Matriax

Best way to texture by code 6 sides of a cube?

Recommended Posts

The idea is create a box and texture each side of the cube, but is so frustating, trying to guess the UV coordinates for each face wich change on each one the coordinates, btw i got this, but still lot of work guessing the other faces, :( so frustrating

https://www.babylonjs-playground.com/#1V3CAT#263

So, my cuestion is , if there is a way more easy to do all this. I mean, maybe some function on you tell that there is 4 textures in horizontal, 4 textures in vertical and babylon with that info know this:

image.png.984b5d8bb22ea06e936c02823e66adee.png

So instead the coordinates like this:

  faceUV[0] = new BABYLON.Vector4(0.25, 0.75 ,0.5 ,0.5);
  faceUV[1] = new BABYLON.Vector4(0.25, 0.5 ,0.5 ,0.75);

We do something like:

  faceUV[0] = new BABYLON.Tile(1);
  faceUV[1] = new BABYLON.Tile(4);

Or if this can't be done, any way more easy to texture the 6 sides of the cube adding one different texture for each face?

 

Share this post


Link to post
Share on other sites

I ended up with the same issue and ended up creating my own using VertexData directly.  I'm hoping there is a way to do it with faceUV like you have done, but I had the same issue as you are having.  I found a solution using a custom shader here in the forum, but didn't want to go that way.  I can post a working PG in a few hours when I get home.  At a very minimum a working solution using MeshBuilder I think would need to do rewrite the uvs - something like:
let uvs = box.getVerticesData(BABYLON.VertexBuffer.UVKind)
// swap uvs here
box.setVerticesData(BABYLON.VertexBuffer.UVKind, uvs);

Share this post


Link to post
Share on other sites

Got it:
https://www.babylonjs-playground.com/#1V3CAT#267
I copied the code concept from @SvenFrankson's awesome planet builder https://github.com/SvenFrankson/planet-builder-web; He has separate mapUV functions for side/top, but because of how one texture maps to multiple different cubes - top/bottom are the same in his project. I don't think it's a substantial enough portion of the code to maintain the MIT license.

If you're not really wrapping a UV cube with unique sides then you can optimize a lot in your texture (ie: your PNG could be 1/4 the size) and even easily have multiple textures in the same image if you are creative.

Can you work your way backwards from this code to build a version with MeshBuilder?  Would like to see that - I went a bit bonkers trying, but that was before I knew how the vertex data worked internally.  I put some comments in the PG to show.

Share this post


Link to post
Share on other sites

@aWeirdo - I think the issue with what you posted is rotation by 90° on the sides left/right.  You can swap UV co-ordinates for 2 sides and they are OK, but the other sides are off by 90°.  You can get around it with a custom shader.  Would really like to be shown how to get same texture as my PG with MeshBuilder.

Share this post


Link to post
Share on other sites

@jerome I'm happy to help with a PR - seems like the triangles forming the default cubes are rotated (hypotenuses are flipped).  I don't know if it needs to be backwards compatible, but otherwise maybe an orientation option for MeshBuilder.  It's kind of mind boggling when it does not work, but I think the default behaviour should be like what I have as that is what is expected - have seen various other topics here with no solutions.

Share this post


Link to post
Share on other sites

@aWeirdo I read that tutorial and based with it but had lots of issues to figure things so i finally do it in numbers, without variables, to see what is problem and as @brianzinn said there is two sides that need a 90º rotation that killed me.

After see all you have to do for map a simple cube... i think i'm not gonna go in this way. So seems that or will load the .OBJ of a cube with the mapped or using a plane for walls, or maybe create a cube with 6 planes, each one with X texture and after that rotate in X.Y from the center of the mesh.

 

Share this post


Link to post
Share on other sites

I've updated the PG to fix the addUVs function to fix a logic error as UVs are calculated from bottom left (not top left), so this is more correct:
https://www.babylonjs-playground.com/#1V3CAT#269
@Matriax - would probably go this way over adding multiple planes and rotating...  I have it working well in my game and also works well in the planet builder.  If you need something else just ask. cheers.

Share this post


Link to post
Share on other sites

It would no doubt be easiesr for all of us if everyone just did their UV mapping in a 3d editor :D 

Anyway.. After a bt of a headache.. here ya go.. roughly..

I made a function which rotates the the specified face,
i have however no clue which face is which so it was a bit of a trial and error

the box must be updateable, function input is explained in a comment.
credits to @jerome for suggesting the solution in another thread :P 

Result; https://www.babylonjs-playground.com/#1V3CAT#268
 

Update; https://www.babylonjs-playground.com/#1V3CAT#272

Share this post


Link to post
Share on other sites

@brianzinn backward compat is mandatory.

So if you add this feature, it must be done with an extra property within the options parameter used by the MeshBuilder class (it's designed like this in purpose to be extensible and to keep backward compatibility in the same time). Keep in mind this should also keep working along with the faceUV feature.

Share this post


Link to post
Share on other sites

Being a simple minded man I came up with a simple minded solution with things as they are  http://guide-calvin-50377.netlify.com/how_to/createbox_per_face_textures_and_colors#how-to-orientate-a-sprite-on-a-face-with-faceuv

A little bit of work necessary but could help until someone does a lot of work on the  code.

https://www.babylonjs-playground.com/#ICZEXW#11

 

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.