Having different textures for each face on a cube

[MasterSword314]

Hello, I am new to Babylon.js, and fairly new to JavaScript. I have a project in which I need to give each face on a cube I am making a different texture. I have read articles on SubMeshes, but to no avail, because I don't understand about the parameters for "box.subMeshes.push(new BABYLON.SubMesh(#,#,#,#,#,box));" . Could anyone help? I tried the following slightly messy code:

var canvas=document.getElementById("nuggetCanvas");var engine=new BABYLON.Engine(canvas, true);var createScene=function(){	//scene and background color	var scene=new BABYLON.Scene(engine);	scene.clearColor=new BABYLON.Color3(1,1,1);	//create camera	var camera=new BABYLON.ArcRotateCamera("camera",1.0,1.0,12,BABYLON.Vector3.Zero(),scene);	//attach camera to canvas	camera.attachControl(canvas,false);	//add a light	var light=new BABYLON.HemisphericLight("hemi",new BABYLON.Vector3(0,1,0),scene);	//reflect the light off the ground to light the mesh bottom	light.groundColor=new BABYLON.Color3(0,0,0.5);	//create a builtin shape	var box=BABYLON.Mesh.CreateBox("box",5,scene);	box.showBoundingBox=false;	//Define a material	var f=new BABYLON.StandardMaterial("material0",scene);	f.diffuseColor=new BABYLON.Color3(0,0,0.75);	f.diffuseTexture=new BABYLON.Texture("nugget.png",scene);	var ba=new BABYLON.StandardMaterial("material1",scene);	ba.diffuseColor=new BABYLON.Color3(0,0,0.75);	var l=new BABYLON.StandardMaterial("material2",scene);	l.diffuseColor=new BABYLON.Color3(0,0,0.75);	var r=new BABYLON.StandardMaterial("material3",scene);	r.diffuseColor=new BABYLON.Color3(0,0,0.75);	var t=new BABYLON.StandardMaterial("material4",scene);	t.diffuseColor=new BABYLON.Color3(0,0,0.75);	var bo=new BABYLON.StandardMaterial("material5",scene);	bo.diffuseColor=new BABYLON.Color3(0,0,0.75);	//put into one	var multi=new BABYLON.StandardMaterial("nuggetman",scene);	multi.subMaterials.push(f);	multi.subMaterials.push(ba);	multi.subMaterials.push(l);	multi.subMaterials.push(r);	multi.subMaterials.push(t);	multi.subMaterials.push(bo);	//apply material	box.subMeshes=[];	var verticesCount=box.getTotalVertices();	box.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 6, box));	box.subMeshes.push(new BABYLON.SubMesh(1, 1, verticesCount, 6, 6, box));	box.subMeshes.push(new BABYLON.SubMesh(2, 2, verticesCount, 12, 6, box));	box.subMeshes.push(new BABYLON.SubMesh(3, 3, verticesCount, 18, 6, box));	box.subMeshes.push(new BABYLON.SubMesh(4, 4, verticesCount, 24, 6, box));	box.subMeshes.push(new BABYLON.SubMesh(5, 5, verticesCount, 30, 6, box));	box.material=multi;	box.material=f;	return scene;};var scene=createScene();engine.runRenderLoop(function(){	scene.render();});//resizewindow.addEventListener("resize", function(){	engine.resize();});

The values I have inside the  BABYLON.SubMesh are placeholders, part of it I got from examples. 

 

I am not sure what to use for the parameters. What are the indices? In one example for a cube I saw, the developer used 4 vertices as the vertex count instead of 8 (the number of vertices a cube has), which I do not understand.

 

Thanks for any help you can provide.

[RaananW]

Hi,

I think you are mistaken in the way you are creating the sub meshes - http://doc.babylonjs.com/page.php?p=24740

I think the only problem you have with the sub-meshes code (haven't tested, maybe a playground demo would be more helpful) that your verticesStart variable is wrong (the 2nd variable in the constructor) .

This should be (in your case) 0. 

 

Regarding the material:

The mesh's material should be a multiMaterial. This is an export i made from the material editor :

//Material generated using babylon material editor, http://materialeditor.raananweber.com/ ;var boxMat = new BABYLON.MultiMaterial('Box Multi Material', scene);var boxMat_0 = new BABYLON.StandardMaterial('Box Multi Material 0', scene);boxMat_0.diffuseColor = new BABYLON.Color3(1.00, 0.00, 0.00);boxMat.subMaterials[0] = boxMat_0;var boxMat_1 = new BABYLON.StandardMaterial('Box Multi Material 1', scene);boxMat_1.diffuseColor = new BABYLON.Color3(0.24, 0.08, 0.08);boxMat.subMaterials[1] = boxMat_1;var boxMat_2 = new BABYLON.StandardMaterial('Box Multi Material 2', scene);boxMat_2.diffuseColor = new BABYLON.Color3(0.00, 0.33, 0.72);boxMat.subMaterials[2] = boxMat_2;var boxMat_3 = new BABYLON.StandardMaterial('Box Multi Material 3', scene);boxMat_3.diffuseColor = new BABYLON.Color3(0.32, 1.00, 0.00);boxMat.subMaterials[3] = boxMat_3;var boxMat_4 = new BABYLON.StandardMaterial('Box Multi Material 4', scene);boxMat_4.diffuseColor = new BABYLON.Color3(1.00, 0.78, 0.00);boxMat.subMaterials[4] = boxMat_4;var boxMat_5 = new BABYLON.StandardMaterial('Box Multi Material 5', scene);boxMat_5.diffuseColor = new BABYLON.Color3(0.68, 0.00, 1.00);boxMat.subMaterials[5] = boxMat_5

then use:

box.material = boxMat

[Wingnut]

Hi MS314, welcome to the forum.

http://playground.babylonjs.com/#T40FK 

I did some minor adjustments.  Set some more colors, disabled a texture, removed the box.material=f, made the hemi light's groundColor a bit more powerful gray so we could see the yellow bottom better, etc. 

Nothing major, other than the line 31 "multi" material change, like Raanan said (and like he shows in his first line of code).  Again, welcome!

[PoloEz]

There is a way to don't call a "Draw" on all SubMesh when we use MultiMaterial ?

[iiceman]

@PoloEz: You mean you want to hide some submeshes? In the current playground example with the cube:  hide one side so it's like an open box? You could try to set the alpha value for the material of that submesh to 0. Like this: http://playground.babylonjs.com/#T40FK#1 The problem is that I couldn't activate the rendering of the inside of the cube to make it really look like a box. I thought backfaceculling would be the way to go, but it didn't work with the multimaterial as I hoped it would. Anybody an idea here?

EDIT: stupid me, after posting I realized I have to turn backfaceculling off, not on -> http://playground.babylonjs.com/#T40FK#2

If that is not what you asked, just ignore me

[PoloEz]

I want to create a lot of boxes, but for performance reasons i want to merge meshes for minimize GPU call.

 

My problem is:

the merge remove material and texture, so i have set them after the merge.

 

 

Here i have merge 100 boxes :

http://www.babylonjs-playground.com/#2BGBU2#1

no texture.

We can see 1 draw call and 1 mesh.

 

And now with Multimaterial :

http://www.babylonjs-playground.com/#2BGBU2#2

200 draw call.

 

I set a submesh on each face of cubes, for testing.

 

Could i have a specific texture on each face without so much draw call ?

 

(sorry for my english)

[GameMonetize]

Hey PoloEz, for such a thing you will have to:

- Either use a ShaderMaterial where you handle it manually

- Either use hardware instancing (http://doc.babylonjs.com/page.php?p=22571)

[PoloEz]

Thanks

 

I will send a feedback soon.