per face UVs on some mesh

[jerome]

Hi,

 

Since we have now the new CreateXXX() methods, I would like to implement tha ability for the user to set its own UVs per face of a box with CreateBox().

A bit like you can set the UVs per particle in the SPS :  https://github.com/BabylonJSX/SolidParticleSystem

 

This would be a set a of 4 values per face [utop, Vtop, Ubottom, Vbottom] ("top" is top left corner, "bottom" the bottom right one). So 6 sets of 4 values for a box.

U and V values will be in the range [0, 1]

 

What will this be useful to ?

 

With such a parameter, you could load only one texture for the box. This texture could be a picture with different images a bit like an texture atlas. You could then choose what image should be displayed onto what face at the mesh creation.

Easy and quick : no need to play then with multimaterials, submeshes, etc although they keep obviously their utility.

 

So how would you call such a parameter and how would you structure it ?

 

suggestion :

options.faceUV = [ [ut0, vt0, ub0, vb0], [ut1, vt1, ub1, vb1], ... [ut5, vt5, ub5, vb5] ];// an array of 6 quadruplet arrays : one quadruplet per face of the box ? 

[JohnK]

As someone who is still swimming on the surface of BJS and am currently only just getting my face wet and maybe thinking of snorkeling but enjoying watching you deep sea divers at work I would like something along the lines of

 

mesh.paintFaces([image1, image2, image3, image4, image5, image6]) for a box

mesh.paintFaces([image1, image2, image3]) for a cylinder

mesh.paintFaces(image1) for a sphere

 

I would imagine the scuba divers would like your suggestion.

[MidnightCow]

Probably using pixel positions on the image rather than uv-style 0-1, because it would make it easier for texture creation, and rather than passing values like 0.324565 etc you'd be using more readable integers..  And the uvFace could do the conversion to UV behind the scenes.

 

So like:

 

mymesh.faceUV[0] = [0,0,20,20];

mymesh.faceUV[1] = [20,0,40,20];

 

Etc..  Or:

 

mymesh.faceUV = [[0,0,20,20],[2,0,40,20],...etc]

[jerome]

thank you for your suggestions

 

@MidnightCow : having ratios (0-1) instead of pixel positions allows to work with any image size 

@JohnK : I like your readable and easy to code suggestion but....

 

this "but" concerns both of your suggestions. I think it's my fault : when I said this new parameter could easily paint a box face with an image positioned in single picture file, it was just an example about what this feature could bring.

remember in the SPS : a texture from an atlas per particle  => http://www.babylonjs-playground.com/#2KSQ1R#38

Actually it would be far more powerful than just painting a box face with a dedicated image : it would allow to do, well, whatever you want about texturing per face !

SPS again : playing with the same image on each particle, different shift => 

http://www.babylonjs-playground.com/#2KSQ1R#33

http://www.babylonjs-playground.com/#2KSQ1R#34

 

That's why I wouldn't reduct its behavior (and its name) to something like : "please just paint this face with this image set at these coordinates in the picture file". 

[GameMonetize]

an array of vector4 should be enough I guess

[jerome]

Ok, let's go for

options.faceUV[0] = vector4_var1;...options.faceUV[5] = vector4_var5;

with vector4 = (Utop, Vtop, Ubottom, Vbottom) like  defined in the first post

 

I propose that each element of faceUV will be set by default to : new Vector4(0,0,1,1) , so everyone will be able to change directly only one face UV

ex : face 3

options.faceUV[3].x = 0.3;options.faceUV[3].y = 0.3;options.faceUV[3].z = 0.6;options.faceUV[3].w = 0.6;

this would display on face 3 only the part of the texture from 30% up and left to 60 % right and bottom (% from texture total width and height)

 

 

just need to find a little time to do this now ;-)

[jerome]

PRed

 

easy usage !

Example : you want a different UV than the default one (0,0,1,1) for the box face 1

var faceUV = new Array(6);faceUV[1] = new BABYLON.Vector4(0.5, 0.5, 0.6, 0.6);var options = { width: 10, height: 3, depth: 5, faceUV:  faceUV };var box = BABYLON.Mesh.CreateBox('box', options, scene);

Imagine now your loaded texture is an atlas with 4 rows ot 6 sprites like this one : http://jerome.bousquie.fr/BJS/images/spriteAtlas.png

and you want a different sprite per face :

  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, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);  }var options = { width: 10, height: 3, depth: 5, faceUV: faceUV };var box = BABYLON.Mesh.CreateBox('box', options, scene);

That's all... no need to play anymore with submeshes and multimaterials

 

I will do a PG to show this once it will be pushed in the PG engine.

[jerome]

Something funnier and as easy to do

Say, you want to flip horizontally the image only on one face : just swap x and z values

 

example :

  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, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);  }// flip the image on face 1var f = 1;var temp = faceUV[f].x;faceUV[f].x = faceUV[f].z;faceUV[f].z = temp;var options = { width: 10, height: 3, depth: 5, faceUV: faceUV };var box = BABYLON.Mesh.CreateBox('box', options, scene);

done :-)

 

note : just swap y and w values for vertical flip... "horizontal" and "vertical" are relative to the initial image of course, not to the face