CreateBox tutorial : per face textures and colors

[jerome]

Hi,

 

Here's a tiny tutorial about the new CreateBox method features : per face textures and colors.

 

Textures

 

Image that you have such an image file : http://jerome.bousquie.fr/BJS/images/spriteAtlas.png

We call it, in video games development,  a sprite atlas because we have 24 different spite images in a single file : 4 rows of 6 sprites, each having the same size.

Well, I'm about to talk about atlases here, but remember it's only an example to illustrate the per-texture feature. It's not mandatory to use an atlas, you can just use a regular texture file and choose what part of it to display on each (or only some) box face.

 

Let's start...

We create a rectangular box by using the new options parameters line 43 and 50 : http://www.babylonjs-playground.com/#1V3CAT

Then we give to its material the texture as usual : http://www.babylonjs-playground.com/#1V3CAT#1

Nothing new until now, right ?

 

Let's go on.

Please have a look from line 27 :

Line 30, we define a new array called faceUV, sized 6 because our box has 6 faces. This array will content Vector4 elements.

Each Vector4(x, y, z, w) will be defined this way :

x = Utop  y = Vtopz = Ubottomw = Vbottom

all in the range [0, 1]

 

as Utop, Vtop are the 2D coordinates of the top left point where to start to crop the texture file and Ubottom, Vbottom the bottom right ones where to stop to crop.

Not clear ?

Let's go back to our sprite atlas : we've got 4 rows of 6 sprites.

So if we iterate i from 0 to 5 (so 6 times as 6 box faces) and if we assign

Utop = i / 6Vtop = 0Ubottom = (i+1) / 6Vbottom = 1 / 4

to each array element, we actually set a different sprite from the the first horizontal row to each box face in the faceUV array

code :

  var hSpriteNb =  6;  // 6 sprites per raw  var vSpriteNb =  4;  // 4 sprite raws  var faceUV = new Array(6);  for (var i = 0; i < 6; i++) {    faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, 0, (i+1)/hSpriteNb, 1 / vSpriteNb);  }

To pass then this array to the CreateBox method, just add a parameter called faceUV, valued with this array, to the options :

  var options = {    width: 10,    height: 3,    depth: 5,    faceUV: faceUV  };  var box = BABYLON.Mesh.CreateBox('box', options, scene);  box.material = mat;

Here's the result : http://www.babylonjs-playground.com/#1V3CAT#2

Quite easy, isn't it ?

 

 

Now look at the red haired character on the top face of the box. He has his head on the left, right ?

What if I want to flip only this face ?

This face is the box face 4 (just make attempts to discover the box geometry). I just then need to swap y and w coordinate values :

  var f = 4;  var temp = faceUV[f].y;  faceUV[f].y = faceUV[f].w;  faceUV[f].w = temp;

Now, his head in on the right : http://www.babylonjs-playground.com/#1V3CAT#3

 

 

Obviously, you're not obliged to set every box face.

Imagine you want to set only the face 4.

Forget about the for{} loop, just initialize your faceUV array and set only faceUV[4] :

  var faceUV = new Array(6);  faceUV[4] = new BABYLON.Vector4(0, 0, 1 / hSpriteNb, 1 / vSpriteNb);

Two lines of code only and that's all : http://www.babylonjs-playground.com/#1V3CAT#4

 

 

 

Colors

 

Let's go back to our initial rectangular box : http://www.babylonjs-playground.com/#1V3CAT

We are about to apply the same principle here not with textures, but with colors.

Let's define a 6 element array faceColors (as for 6 box faces) and just set the color of the faces we want with Colors4

  var faceColors = new Array(6);  faceColors[4] = new BABYLON.Color4(1,0,0,1);   // red top  faceColors[1] = new BABYLON.Color4(0,1,0,1);   // green front

then pass this array to the CreateBox method with the new faceColors parameter of options

  var options = {    width: 10,    height: 3,    depth: 5,    faceColors : faceColors  };  var box = BABYLON.Mesh.CreateBox('box', options, scene);

simple, isn't it ?  http://www.babylonjs-playground.com/#1V3CAT#5

 

 

Colors are BJS vertex color4, this mean you can give an alpha if you enable the hasVertexAlpha mesh property : http://www.babylonjs-playground.com/#1V3CAT#6

 

 

You can even combine the vertex colors with a colored material, blue here :  http://www.babylonjs-playground.com/#1V3CAT#7

 

 

And finally you can of course mix the face colors with the per-face texture feature (and the material color) :

  var options = {    width: 10,    height: 3,    depth: 5,    faceUV: faceUV,    faceColors : faceColors  };

Enjoy : http://www.babylonjs-playground.com/#1V3CAT#8

 

 

No more submaterials or submeshes for so simple things !

Have fun gals and guys

[GameMonetize]

Hey Jerome

 

please copy paste it to the documentation This is where it belongs to be:)

[jerome]

sir, yes sir !

[jerome]

Doc PRed

[Wingnut]

Congrats, Jerome... nice work!  Thanks for the cool feature add!!! 

 

Ok, so... now... 3 and 4 sided pyramids?  Make a new CreatePyramid() basic shape so that pyramids are no longer dependent-upon the rules of a cylinder?  If pyramids could be made without using CreateCylinder, then the per-side coloring and texturing... would be available to those, too, yes?  hmm. 

[jerome]

Yes, I will do this, it's planned  (endless backlog, arrf)

 

BTW, 3 sided pyramids are actually tetrahedrons with ... 4 sides and what we usually call 4 sided pyramids are real pyramids with 5 sides (don't forget the bottom side)

[Wingnut]

yuh yuh, you is absolutely correct, sir.  And, that is good news (about pyramid futures).  Probably a 3-4 minute modification of CreateBox... and then CreatePyramid will be done?  *nod*  

 

Ok, ok, 10 minutes, tops, right? 

 

I came across the word "apex" when reading-about pyramids.  It is the point or tip of the pyramid (duh).  I like that word.  Using it makes me feel important and educated... just like "orthogonal".  In fact... I sometimes take one of Jerome's technical geometry-word-ladened posts to my local cafe... read it aloud, and they give me free coffee... for reciting that cool math poem. 

[jerome]

 

So don't say "Snub Icosidodecahedron" ... else they will offer to you a year of bourbon !

[jerome]

documentation updated : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors

waiting for the last PR to be merged

 

I just added an example how to use only one single texture file to display two different images onto two different boxes

[Eric McG]

Hi Jerome,

I can't for the life of me create a box with CreateBox using this image so that the faces form an RGB color cube.  My attempt is here.   Any advice?

[jerome]

maybe, you just have to set different UVs...

example : here, I just invert V for the face B http://www.babylonjs-playground.com/#1V3CAT#138 , this looks better

just a matter of order