I have problem with multitexture

[Gamerazor]

Hello everybody, when I render this code, it doesn't show all sphere multitexture, only shows the first texture:

function createSceneTuto(engine){	var scene = new BABYLON.Scene(engine);		var camera = new BABYLON.ArcRotateCamera("camara",-20,-45,35, new BABYLON.Vector3.Zero(),scene);		var luz = new BABYLON.HemisphericLight("Sol", new BABYLON.Vector3(-10,150,0),scene);	luz.diffuse = new BABYLON.Color3(0.6,0.7,1);	luz.intensity = 0.5;			var cubo = new BABYLON.Mesh.CreateBox("Cubo",10,scene);	cubo.position.y = 10;		var esfera = new BABYLON.Mesh.CreateSphere("Esfera",10,8,scene);	var espejo = new BABYLON.StandardMaterial("texturaEspejo",scene);	esfera.position = new BABYLON.Vector3(-15,10,0);		suelo = new BABYLON.Mesh.CreateGround("tierra",200,200,2,scene,false);		piedras = new BABYLON.StandardMaterial("Piedras",scene);	piedras.bumpTexture = new BABYLON.Texture("../materiales/piedras.jpg",scene);	rocas = new BABYLON.StandardMaterial("Rocas",scene);	rocas.diffuseTexture = new BABYLON.Texture("../materiales/roca.png",scene);	madera = new BABYLON.StandardMaterial("Plata",scene);	madera.diffuseTexture = new BABYLON.Texture("../materiales/madera_gris.jpg",scene);	multimat = new BABYLON.MultiMaterial("multi", scene);	multimat.subMaterials.push(rocas);	multimat.subMaterials.push(piedras);	multimat.subMaterials.push(madera);			esfera.subMeshes = [];	var verticesCount = esfera.getTotalVertices();		esfera.subMeshes.push(new BABYLON.SubMesh(0,0, verticesCount,0,900,esfera));	esfera.subMeshes.push(new BABYLON.SubMesh(1,0, verticesCount,900,1800,esfera));	esfera.subMeshes.push(new BABYLON.SubMesh(2,0, verticesCount,1800,2088,esfera));	esfera.material = multimat;			pelicula = new BABYLON.StandardMaterial("Pelicula",scene);	pelicula.diffuseTexture = new BABYLON.VideoTexture("Sintel",["../textures/sintel.ogv"],256,scene,true);	pelicula.emissiveColor = new BABYLON.Color3(1,1,1);	suelo.material = pelicula;		espejo.reflectionTexture = new BABYLON.MirrorTexture("espejo",512,scene,true);	espejo.reflectionTexture.mirrorPlane = new BABYLON.Plane(1,-1.0,10,-10.0);	espejo.reflectionTexture.renderList = [esfera,suelo];	cubo.material = espejo;		return scene;}

This is the image:

 

 

[Wingnut]

Hello promodominus!  Welcome to the forum!

 

Some more information about subMeshes can be found here.. http://doc.babylonjs.com/page.php?p=24740.

 

In this document... http://blogs.msdn.com/b/eternalcoding/archive/2013/07/10/babylon-js-using-multi-materials.aspx, we need to better explain 0, 900, 1800, 2088.  These numbers are based-upon a sphere with 16 segments.  When you made a sphere, you made it with 10 segments...

var esfera = new BABYLON.Mesh.CreateSphere("Esfera",10,8,scene);

Change that 10 into 16, and things will work better.  16 segments to the sphere.

 

 

In that MSDN document, the author was showing many things.  He used a bumpTexture for material #1, a diffuseColor for material #2, and an emissiveColor for material #3.  He was trying to show how the TYPES of materials could freely and easily mix... on a single object.  For you, now, I think it would be wise to use ONLY diffuseTexture.

	piedras = new BABYLON.StandardMaterial("Piedras",scene);	piedras.bumpTexture = new BABYLON.Texture("../materiales/piedras.jpg",scene);	rocas = new BABYLON.StandardMaterial("Rocas",scene);	rocas.diffuseTexture = new BABYLON.Texture("../materiales/roca.png",scene);	madera = new BABYLON.StandardMaterial("Plata",scene);	madera.diffuseTexture = new BABYLON.Texture("../materiales/madera_gris.jpg",scene);

You adjusted that well.  Notice you still have one 'bump' texture in line 2.  That is fine.  That will work good, but I still wanted to remind you. 

 

Now look at this...

espejo.reflectionTexture.mirrorPlane = new BABYLON.Plane(1,-1.0,10,-10.0);

There are no mistakes in that line.  You did it correctly, but those settings could give you unusual results.  Below, are some better numbers, in my opinion.

espejo.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1, 0, -1);

These numbers have worked good for me, in my experiments.  These are reflection angle and depth numbers.  I am still learning about these numbers, myself. 

 

Come back and tell us what you learn about these... from your experiments.  Thanks.

 

Now you are ready for more success.  I am still new to babylon.js and I needed to do some experiments to find a solution for you. While I did that, I made a 'test scene' much like yours.  Here is a zipped version.  Download it if you like.  It is very much the same as your demo, so it is your demo.  You own it.  I just did some little adjustments to make things easier for you. 

 

Again, welcome to babylon.js and welcome to our forum!  Good to have you with us!  We are working hard to improve our documents, and make less trouble for your experiments.  Be well!

[GameMonetize]

The document is good. It works just here:

http://www.babylonjs.com/index.html?MULTIMATERIAL

 

This line

sphere.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere))

 

means:

- Start at index 900 and use 900 indexes from there (900 indexes = 300 faces). So this submesh will start from face number 300 and will use 300 faces

[GameMonetize]

Wingnut is right about your problem though. You create a sphere with 10 segments so there will not be 3880 indices but less

[Wingnut]

Ahh, thanks for that information about those numbers, deltakosh.  Yes, the MSDN document is correct.  The demo works great.  I was mistaken about how the numbers were used.  I edited my previous post.

 

Promodominus, keep in mind the difference between vertices (points) and indices (lines between points).  You can see vertices and indices (and triangular faces made by them)... easier... by temporarily setting wireframe mode on your three materials... like this:

		piedras.wireframe = true;		rocas.wireframe = true;		madera.wireframe = true;

Fun with materials. 

 

Wingnut tries some math...

 

alert(esfera.subMeshes[0].indexCount + esfera.subMeshes[1].indexCount + esfera.subMeshes[2].indexCount);

result is 3600

 

3880 - 3600 = 280

 

Hey deltakosh... is 280... the number of indices that needed to be used twice, to complete the sphere?  In better words, is that the amount of indices that were SHARED at the intersections between subMaterials?  I bet so.  Interesting.  (thanks for info)

 

Just curious.  I am trying to get the math to make sense.    I am VERY new to subMeshes... like so many other things.

[Gamerazor]

Finaly, I resolve the problem although I don't understand  very well that but I will study it in other moment because often I export the meshes with the textures from blender. Thank you Wingnut and Deltakosh.

 

function createSceneTuto(engine){	var scene = new BABYLON.Scene(engine);	//scene.fogMode = BABYLON.Scene.FOGMODE_EXP;	//scene.fogDensity = 0.07;	//scene.fogColor = new BABYLON.Color3(0.25,0.8,0.3);	var camera = new BABYLON.ArcRotateCamera("camara",-20,-45,35, new BABYLON.Vector3.Zero(),scene);		var luz = new BABYLON.HemisphericLight("Sol", new BABYLON.Vector3(-10,150,0),scene);	luz.diffuse = new BABYLON.Color3(0.6,0.7,1);	luz.intensity = 0.5;		var entorno = new BABYLON.Mesh.CreateBox("Entorno",400,scene);	var entornoMaterial = new BABYLON.StandardMaterial("skyBox",scene);	entornoMaterial.backFaceCulling = false;	entornoMaterial.reflectionTexture = new BABYLON.CubeTexture("../skybox/skybox",scene);	entornoMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;	entornoMaterial.diffuseColor = new BABYLON.Color3(0,0,0);	entornoMaterial.specularColor = new BABYLON.Color3(0,0,0);	entorno.material = entornoMaterial;		var cubo = new BABYLON.Mesh.CreateBox("Cubo",10,scene);	cubo.position.y = 10;		var esfera = new BABYLON.Mesh.CreateSphere("Esfera",10,8,scene);	var espejo = new BABYLON.StandardMaterial("texturaEspejo",scene);	esfera.position = new BABYLON.Vector3(-15,10,0);		suelo = new BABYLON.Mesh.CreateGround("tierra",200,200,2,scene,false);		piedras = new BABYLON.StandardMaterial("Piedras",scene);	piedras.bumpTexture = new BABYLON.Texture("../materiales/piedras.jpg",scene);	rocas = new BABYLON.StandardMaterial("Rocas",scene);	rocas.diffuseTexture = new BABYLON.Texture("../materiales/roca.png",scene);	madera = new BABYLON.StandardMaterial("Plata",scene);	madera.diffuseTexture = new BABYLON.Texture("../materiales/madera_gris.jpg",scene);	multimat = new BABYLON.MultiMaterial("multi", scene);	multimat.subMaterials.push(rocas);	multimat.subMaterials.push(piedras);	multimat.subMaterials.push(madera);			esfera.subMeshes = [];	var verticesCount = esfera.getTotalVertices();		esfera.subMeshes.push(new BABYLON.SubMesh(0,0, verticesCount,0,300,esfera));	esfera.subMeshes.push(new BABYLON.SubMesh(1,0, verticesCount,300,600,esfera));	esfera.subMeshes.push(new BABYLON.SubMesh(2,0, verticesCount,600,1125,esfera));	esfera.material = multimat;			pelicula = new BABYLON.StandardMaterial("Pelicula",scene);	pelicula.diffuseTexture = new BABYLON.VideoTexture("Sintel",["../textures/sintel.ogv"],256,scene,true);	pelicula.emissiveColor = new BABYLON.Color3(1,1,1);	suelo.material = pelicula;		espejo.reflectionTexture = new BABYLON.MirrorTexture("espejo",512,scene,true);	espejo.reflectionTexture.mirrorPlane = new BABYLON.Plane(1,-1.0,10,-10.0);	espejo.reflectionTexture.renderList = [esfera,suelo];	cubo.material = espejo;		return scene;}