Jump to content

Set texture per face of loaded mesh


Recommended Posts

Hi !

I am trying to set 2 different textures _by code_ on a loaded mesh exported of Blender. There is no problem on "creating" a mesh from MeshBuilder and set it faceUV with options, but from a "loaded" mesh (created from blender, without any texture) I don't manage to do it.

I give this playground for a start (my code is too complicated to put it in a playground) :

The goal : set any texture (from internet) to the loaded mesh to any face of the Dude.babylon.

I tried few things like VertexBuffer.UVKind but... it should not be the way to go <_<

More details :
My Blender object is a single plane : 6 vertices, 2 faces. My goal is to dynamically set different texture on each face . The wireframe show me the 2 faces but I have no idea how to set them the texture. 

Thanks for any help

Link to comment
Share on other sites

No, i mean "face" not triangle. For example, I have 6 vertices => 2 faces showed with wireframe. I would like to set textures exactly as I would do with MeshBuilder / faceUV.

I think decals are interesting to add details "after" the mesh has been textured, doesn't it ?

Link to comment
Share on other sites

yep. But otherwise you need to know the mesh's structure. if you know the right indices you want to change, you will be able to do that. In that case there is no difference if it is 1 face (triangle) or 7, you will need to know their position in the vertex data in order to set their texture.

Link to comment
Share on other sites

Sorry I am not sure to understand, consider I have to know the mesh structure as I set some specific texture on specific face, I just want to set it dynamically (not from Blender).
Really my need is exactly the same as using MeshBuilder with faceUV, but I don't want to use MeshBuilder to create object, I import it with a .babylon file.

As this :

But from an already loaded mesh

Link to comment
Share on other sites

You have to get the mesh.getVerticesData("uv") to get the first set of UV and update it per vertex

Same for "uv2" to build the set of UV for your second texture


Does it make sense?

Link to comment
Share on other sites

Sorry, but it does not make sense for me :huh:

I have :

  • An object mesh (loaded from a babylon file)
  • 2 textures, loaded with the assets manager

I would like :

  • apply texture 1 on a face of the mesh
  • apply texture 2 on a another face

As i said in my first post I tried to play with getVerticesData as you mentioned @Deltakosh but I still don't undertand how i can set textures. 


// Loaded assets from assets manager
let wall = game.meshes.wall;
let textureA = game.textures.textureA;
let textureB = game.textures.textureB;

// Enable mesh (in this case, only one child)
for (let i = 0; i < wall.length; i++) {

// Scaling and position, no problem
wall[0].scaling = new BABYLON.Vector3(5, 5, 5);
wall[0].position = new BABYLON.Vector3(0, 0, 0);

// Assigning textures to mesh : HOW ?
// Should we use classic material like that ? (obisoulsy not since I have 2 textures) : 
wall[0].material = new BABYLON.StandardMaterial("wallMat", game.scene);
wall[0].material.diffuseTexture = textureA;

// This wireframe show me the 2 square faces I expect to see (6 vertices, 2 faces)
// I would like to set a texture on each of these faces
wall[0].material.wireframe = true;

// You spoke about uv coordonate, I can do something like that
// But I should first set texture I think
var uvs = [0, 0, 1, 0, 1, 1, 0, 1];
wall[0].updateVerticesData(BABYLON.VertexBuffer.UVKind, uvs);


Link to comment
Share on other sites

Split up your UV of the faces, or make it submeshes.

have one face be on 0,0,0.5,0.5
and another be 0.5,0.0,1,0.5

then if you load a single texture with your two textures in the respective places:

and set that as the texture for your object it should work.

Link to comment
Share on other sites

... ok lets make sure we are talking about the same thing. face as in polygonal face or face as in the characters face?

Assigning a texture to a singular polygonal face is simple on simple objects but will have little effect on a complex shape unless you have a method to identify regions, if you are looking to replace the face of the character then why not just make different textures based of the original?

Link to comment
Share on other sites

I speak about a polygonal face and the complexity is not a problem : my mesh is simple : a plane, 6 vertices, 2 faces.
I could set my 2 textures in Blender, but I don't want to do that. I would like to set it by code with Babylon, whatever HOW, I just want myMesh.babylon loaded and set 2 textures on it 

I gave this link : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
It's the kind of things I want to do, but without using MeshBuilder ===> by using an already loaded mesh.

Link to comment
Share on other sites


well first off, its going to be tough to texture this without UV data, we can do it off of gl_fragCoords or vPosition in a custom shader but that is limited.

Second, there are not just 2 faces on this model there are 4 we do not use quads but triangle polygons, so we need to be able to identify what are the two regions you want to have.

Let me do some wizardry and Ill show you more a hacky way to do this, but for the most part you need to just set up UV regions in your Modeling Software.


*EDIT* nope never-mind I'm out, this is gonna take to much time to create a hacky solution.  Its on you to set your mesh up correct.

Link to comment
Share on other sites

Thank you, it is more complicated than I expected :wacko:

I updated the PG : https://www.babylonjs-playground.com/#JQDPT6#4

If I undertand correctly, the mesh got 6 vertices, 4 triangles => 12 indices. So I have to build an uv array of 12 * 2 = 24 (2 coordinates for each vertice)
But wow ! This this just hell, I even not know the vertice order... And what about repeating the texture :unsure:


Link to comment
Share on other sites

6 minutes ago, yLacaute said:

I think it is very strange that it is so easy to use faceUV from MeshBuilder with options, and so hard from an already loaded mesh

Not really strange as MeshBuilder is building the mesh vertex by vertex using a set of rules that is known will construct the mesh. Since the set of rules was designed to produce particular faces in particular positions it is straight forward to use the same rules to deal with each face and set a faceUV. Once a mesh is built all that is stored are the indices of the vertices and their positions, normals and UVs the rules for building it are gone and so it becomes more difficult to obtain a face. Take a simple box with six faces, each face is made up of two triangular facets, to find a particular face you need to find two facets that are adjacent and share the same mathematical normal. Note also that the mathematical normal of a facet may not be the same as the stored normals for the vertices making up the facet. (see http://doc.babylonjs.com/resources/normals )  so the mathematical normal may have to be calculated or the mesh turned into a flat shaded one. This is not an easy task.

However @jerome has produced a way of obtaining data about individual facets from a mesh, including the mathematical normal of the facet (see  http://doc.babylonjs.com/how_to/how_to_use_facetdata  ) . However to find a face you still need to find all the adjacent facets that share a mathematical normal that make up this face. 

You should also note that

  1. even when using faceUV with MeshBuilder only one image incorporating all textures is used, you cannot use two separate texture files.
  2. you can only change vertex values of a mesh if it was created as updateable.
Link to comment
Share on other sites

Thank you everyone :)

So, if I resume, there is no easy way to apply a texture (or many) on an external loaded mesh (from a babylon file for example) even if It should be technically possible.

We would prefer to :

  • load an external object already textured
  • or, create the object with the Babylon API and configure texture(s) at the build time


Link to comment
Share on other sites

@Pryme8 Your PG looks very complicated :blink: Clearly lol GJ anyway :)

To give you the context, I am trying to make a FPS and a map generator for the game, if I had to write so much code to put a texture I would stop immediately :D
Especially that I have to learn everything (Babylon and Blender), I come from the "java world"...

Currently I am trying to build all environment "parts"  in Blender (like a wall, a wall with a door, etc because it is too hard to design custom mesh in Babylon) and assemble them by a JSON configuration file. So with all this discussion I will just set textures directly in Blender.

Link to comment
Share on other sites

Nononono, don't get discouraged.
That is a "complex" set of specific functions that shows you can really handle the crap outta imported meshs.

What you need to learn would be how to use a Texture Atlas/Master Texture, and then apply UV's in blender that will assign the texture sections to the polygon faces.

You can then use a single texture and a ton of different models.

I could make you like a 10 min tutorial or something when I get the time but until then:

Learning a little bit of normal convention for modeling and exporting is better then diving into some super conditional logic to make it work.

If you need more help, maybe I can record that tutorial or I can screen share with you and explain some quick concepts at some point.

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

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...