Best Method for Applying Texture to 1 Face

[Pryme8]

http://pryme8.github.io/TSO/

Starting a Tsuro style game, that uses no external assets.  Just like the title says, what would be the best way for me to apply the texture to just the top of the box?

Custom mesh with custom uv? or a 6 plane box?

[NasimiAsl]

any shader solution accepted?

[Pryme8]

sure, you know I can read though shader solutions ^_^.

It would need support for 3 lights, shadows and reflections.  I was thinking about doing it and then just applying the texture sample to the face with the normal 0,1,0.

[NasimiAsl]

https://www.babylonjs-playground.com/#65Z9AW

dear @Pryme8

[JCPalmer]

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);
multiMaterial.subMaterials.push(scene.getMaterialByID("turso.sides-bottom"));
multiMaterial.subMaterials.push(scene.getMaterialByID("turso.top"));

 

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([
                1,0,-1,-1,0,1,1,0,1,1,.1852,1,1,0,-1,1,0,1,1,.1852,-1,-1,0,-1,1,0,-1,-1,.1852,-1,-1,0,1,-1,0,-1,1,0,1,-1,.1852,1,1,.1852,1,1,0,-1,-1,0,-1
                ,-1,0,1,1,.1852,1,1,.1852,-1,1,0,-1,1,.1852,-1,-1,.1852,-1,-1,0,-1,-1,.1852,-1,-1,.1852,1,-1,0,1,1,0,1,-1,0,1,-1,.1852,1,-1,.1852,1,1,.1852,-1,1,.1852,1,-1,.1852,1
                ,-1,.1852,-1,1,.1852,-1
            ]),
            false);

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

            this.setVerticesData(BABYLON.VertexBuffer.NormalKind, new Float32Array([
                0,-1,0,0,-1,0,0,-1,0,1,0,0,1,0,0,1,0,0,0,0,-1,0,0,-1,0,0,-1,-1,0,0,-1,0,0,-1,0,0,0,0,1,0,0,1,0,0,1,0,-1,0,0,-1,0
                ,0,-1,0,1,0,0,1,0,0,1,0,0,0,0,-1,0,0,-1,0,0,-1,-1,0,0,-1,0,0,-1,0,0,0,0,1,0,0,1,0,0,1,0,1,0,0,1,0,0,1,0,0,1,0
                ,0,1,0,0,1,0
            ]),
            false);

            this.setMaterialByID("turso.Multimaterial#0");
            this.subMeshes = [];
            new BABYLON.SubMesh(0, 0, 30, 0, 30, this);
            new BABYLON.SubMesh(1, 30, 6, 30, 6, this);
        }
    }
    return Tile;
})(BABYLON.Mesh);

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;
    }
}

 

[Pryme8]

@NasimiAsl btw you can strip the \ out if you use literal quotes ``
https://www.babylonjs-playground.com/#65Z9AW#1

@JCPalmer, that was my original thought thanks for breaking that down great post.  I think I am going with the shader solution though.

[Pryme8]

@NasimiAsl

BJS - [14:26:12]: Babylon.js engine (v3.2.0-alpha4) launched
(index):38 Uncaught TypeError: BABYLON.CustomMaterial is not a constructor

line 38: var tileShader = new BABYLON.CustomMaterial("tileShader", scene);

[NasimiAsl]

add this

https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js

[Pryme8]

http://pryme8.github.io/TSO/

@NasimiAsl, Sorry to keep bugging you but can you explain that hefty error now?

https://github.com/Pryme8/Pryme8.github.io/blob/master/TSO/index.html

if I nerf line https://github.com/Pryme8/Pryme8.github.io/blob/master/TSO/index.html#L41

the error does not drop, but the shader does not work.

[NasimiAsl]

hi sorry i sleeped 

/*tileShader.onBindObservable.add(function () {
	//box.material.getEffect().setTexture('pathTexture',new BABYLON.Texture("/textures/ground.jpg",scene)
	);
	});*/ why that is not enabled?

[Pryme8]

because I need to set it later.
https://github.com/Pryme8/Pryme8.github.io/blob/master/TSO/index.html#L200

[JCPalmer]

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.

[JohnK]

Why not faceUVs ?

https://www.babylonjs-playground.com/#ICZEXW#52

[Pryme8]

7 minutes ago, JohnK said:

Why not faceUVs ?

https://www.babylonjs-playground.com/#ICZEXW#52

That's about what I was thinking.

[Pryme8]

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.