Jump to content

Best Method for Applying Texture to 1 Face


Recommended Posts

If you have very predictable shape like a squashed cube, I would go with a multi-material.  Multi-materials are a real pain except for exporters, because the vertices need duplicated on borders.  People do not want the hassle of async loading, but Tower of Babel generates code which can be run sync, eg var a = new Tile('a', scene). 

Made a quick blend:


Generated a .js file.  Here is the materials with stuff stripped out not really needed:

var material = new _BABYLON.StandardMaterial("turso.sides-bottom", scene);
material.ambientColor  = new BABYLON.Color3(.8,.8,.8);
material.diffuseColor  = new BABYLON.Color3(.64,.64,.64);
material.emissiveColor = new BABYLON.Color3(0,0,0);
material.specularColor = new BABYLON.Color3(.5,.5,.5);
material.specularPower = 50;

material = new _B.StandardMaterial("turso.top", scene);
// add texture

var multiMaterial = new BABYLON.MultiMaterial("turso.Multimaterial#0", scene);


Here is the geo class, with more stripped out:

var Tile = (function (_super) {
    __extends(Tile, _super);
    function Tile(name, scene, source) {
        _super.call(this, name, scene, null, source, true);

        var cloning = source && source !== null;

        this.id = this.name;
        if (!cloning){
            this.setVerticesData(BABYLON.VertexBuffer.PositionKind, new Float32Array([

            var _i;//indices & affected indices for shapekeys
            _i = new Uint32Array(36);
            CONTIG(_i, 0, 0, 35);

            this.setVerticesData(BABYLON.VertexBuffer.NormalKind, new Float32Array([

            this.subMeshes = [];
            new BABYLON.SubMesh(0, 0, 30, 0, 30, this);
            new BABYLON.SubMesh(1, 30, 6, 30, 6, this);
    return Tile;

TOB also analyzed your index and noted that it is one contiguous range to save space.  It called another function int the file:

function CONTIG(array, offset, begin, end) {
    for(var i = 0, len = 1 + end - begin; i < len; i++) {
        array[offset + i] = begin + i;


Link to comment
Share on other sites

BTW, one other way which is dead simple is just use 2 meshes.  A plane for the top, and a box for the bottom.  Parent the one least likely to be clicked, probably the box, to the other.  Same 2 draws calls as multi-material.  With instancing, 2 draws total.  Having a custom shader seems a little exotic for this task.

Link to comment
Share on other sites

So I ended up using a ground mesh, and will make it look like a box using JC palmers method.

I strayed away from the UV one because even after I set up the UV's and the texture it made the bezierCurves of the texture vs the physical lines go off just a hair.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...