cube face texture rotation

[eboo]

Hi,

I supposed you already meet this question but i ve not found the answer.

I would like to turn 2 (horizontal) faces of the box to make "basical texturing".

 

 

[NasimiAsl]

why you don't make box like obj file and make a current uv? 

[eboo]

I want to load texture "on the fly" (too many textures variations).

For exemple, users are able to load their own "logo" and i want to make boxes with user's "logo".

[jerome]

not sure to understand... what does prevent you to change the box material (so the texture) on the fly ?

[eboo]

nothing prevent texture load.

I juste need to be able to "turn" 2 faces texture

 

pour comprendre:

mon objectif est de charger une texture sur mon cube (en script) pour pouvoir intégrer la texture que je souhaite. (pas de soucis c'est facaile)

Ensuite, tourner une face sur 2 de 90° pour rendre cela plus joli et "aligné". (là je sèche) exemple si je charge une texture briques. D'avoir des briques horizontales.

 

[jerome]

Not sure you can rotate a texture for 90°...

You can easily flip if vertically or horizontally (so for 180°) with faceUV : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors#textures

If you want to change the way the texture is applied onto a box face, I'm afraid you need to modify the vertexData uvs to change their orientation.

[GameMonetize]

You can rotate using texture.uAng and texture.vAng and texture.wAng

[NasimiAsl]

if you want change just 2 face you need shader or need new box with different uv 

[GameMonetize]

Correct

[eboo]

bad news

would it 'performant' to create my boxes with 5 planes?

[NasimiAsl]

eboo i think your problem is fix with shader if you want i can help(if i can ) you .

[eboo]

i will read about shader and make a playground

[NasimiAsl]

r u want i make it for you ?

[eboo]

it would be great

 

here are my actual trys http://babylonjs-playground.com/#10I31V#10

[NasimiAsl]

wait for me 30 min : i build box with 6 face you can texture all of them : )

[jerome]

another simple lead (no time to make a PG, sorry) :

1. create an updatable box
2. get its uvs with box.getVerticesData(UV.Kind);
3. swap the uvs on the wanted faces : for a quad => (x, y, z, w) becomes (z, y, x, w) (example : (0,0,1,1) becomes (1,0,0,1) ), but do it for 2 successive triangles instead
4. set back the updated uvs with box.setVerticesData()

this should work :-)

[NasimiAsl]

hi i think you need this :

http://www.babylonjs-playground.com/#TRNYD#4

tell me if you want other material you need.

http://www.babylonjs-playground.com/#TRNYD#5  enable alpha mode for png (and scaling box)

http://www.babylonjs-playground.com/#TRNYD#6 with 2 textures

[eboo]

nice

i'd like all "sides" and maybe an other texture on the top
 

[NasimiAsl]

http://www.babylonjs-playground.com/#TRNYD#8

 

correct all faces : http://www.babylonjs-playground.com/#TRNYD#9

[eboo]

wow that's it (just one dog inverted :p)

i'll try to understand now ^^

[NasimiAsl]

http://www.babylonjs-playground.com/#TRNYD#9 it fixed

[eboo]

wonderfull

compare will help me to understand.

that's perfect

thanks a lot

[eboo]

oops hard to read

 : http://www.babylonjs-playground.com/#TRNYD#10

[eboo]

fix http://www.babylonjs-playground.com/#TRNYD#11

[NasimiAsl]

http://www.babylonjs-playground.com/#TRNYD#13 try this