Jump to content

Having different textures for each face on a cube


Recommended Posts

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.

Link to comment
Share on other sites


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
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

@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 :P -> http://playground.babylonjs.com/#T40FK#2

If that is not what you asked, just ignore me :P

Link to comment
Share on other sites

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 :


no texture.

We can see 1 draw call and 1 mesh.


And now with Multimaterial :


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)

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...