Multiple textures for custom mesh

[Echnaton]

Hello

I try to make a little voxel game. I merge manually a chunk of boxes by using VertexData to create a custom mesh. In the vertexData I set positions, normals, colors and indices of the box sides. That way I can set for each box side an individual color.

How can I extend this to use individual textures for each box side? There is no possibility to assign textures in the VertexData to facets like it can be done with simple colors. Thank you for any advices.

[Wingnut]

Hi E!  Welcome to the forum.  BabylonJS hero @jerome created a system to do both faceColors and faceUV on a MeshBuilder-made box.  Here is a demo.

https://www.babylonjs-playground.com/#1XDIJF#8

It uses a single image file for its 6 textures, sometimes called an atlas or map.  In this example, both textures-per-face AND colors-per-face... are demonstrated.

Perhaps you could use something like this?  *shrug*  Be well, talk again soon.

[JohnK]

Welcome from me as well. By far the best way for boxes is the one Wingnut suggests. If you really want to do it for your own custom mesh then you need an array of uv coordinates with one entry for each vertex position and add this to the vertexData as well as positions, normals, colors etc; ie vertexData.uvs = your uv array.

Here is an example http://playground.babylonjs.com/#IJTGJ3#3

You might also want to read http://babylonjsguide.github.io/advanced/Custom#texture

Again as Wingnut mentioned the way that Jerome assigns different textures to different faces is to have all the textures in one image and then make sure the uv values for all vertex positions for all vertices on that face are correctly assigned to the appropriate parts of the image.

Also to do this the mesh has to be flat shaded, ie no adjacent faces can share vertices, see http://babylonjsguide.github.io/advanced/Normals

IMHO the best way to go would be to create two boxes in the playground using the meshBuilder method as Wingnut says merge them as you wish and see if you get the result you want. If you do not get what you want then ask again, link to your playground and give us a diagram of what you do want.

 

Good luck with your project.

 

[securet]

hi I have the same question,

Already looked at: https://doc.babylonjs.com/tutorials/createbox_per_face_textures_and_colors

Just wondering, if there is an other Method like setting the Textures individually using one dedicated image file each, or would it be good practice to use 6 planes and just merge them to a box.

 

By the way is it worth to create instances of boxes instead of creating new ones?

I think at least it should be worth it for spheres, right?

 

Ty in advance

[NasimiAsl]

if you make PG i can help you more 

[Wingnut]

  @NasimiAsl - I think Echnaton is trying to determine best way to make playground.  There is how many ways to do this?  3-6 ways?  Which playground method should Ech use, Naz? 

@Echnaton/@securet  CubeMaps might work, too.  With cubemaps, each of 6 textures must be named ALMOST the same...  like cubemap_py.jpg, cubemap_ny.jpg, cubemap_px.jpg, etc etc. Those suffixes stand-for positive Y, negative Y, positive X, etc etc.  Cubemaps are most-often used for skyboxes (enviroments to put games inside-of), but they may have further uses.

@securet - Instances... are very efficient, but they "inherit" the material from the master.  Clones are not quite as efficient, but can have non-inherited material of their own.  Six-planes method is also good, and that method allows for some "fly it apart" or "differently-rotate-each-plane" special effects options.  Things to dazzle users. 

Use your FPS meter, and built-into-browser performance testers (such as profiler)... to see efficiency, I suppose.  Other opinions may be coming soon, from others.  At SOME point-of-heavy-load, it would be wise to research our Solid Particle System (SPS) which is VERY efficient at large numbers of boxes/mesh.  I THINK SPS prefers each box to be a single mesh, though.  Six-plane boxes might give the SPS system an upset stomach.    Not sure.

I really didn't contribute anything in this comment, did I?  hehe.  I guess I simply enjoy hearing myself talk, huh?   

Thanks for input, fellow forum helpers.  Good stuff.

[Echnaton]

Thank you, assign an atlas of all textures and then pick the one I need with uv, that is the solution I was looking for . Also thanks a lot for the playground examples. I realy appreciate your great support.