solved Set texture per face of loaded mesh

[yLacaute]

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) :
https://www.babylonjs-playground.com/index.html#YYQ1LC#39

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

[RaananW]

to any face, you mean a triangle? 

you will need to know how the UV data is stored and the correlation to the mesh in order to do that properly.

But, have you tried decals (http://doc.babylonjs.com/how_to/decals)? they might come in handy

[yLacaute]

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 ?
 

[RaananW]

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.

[yLacaute]

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 :
https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors

But from an already loaded mesh

[Guest]

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?

[yLacaute]

Sorry, but it does not make sense for me 

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++) {
  wall[i].setEnabled(true);
}

// 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);

 

[Pryme8]

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.

[yLacaute]

I am even not able to display a single texture on my loaded mesh... So you are one step further @Pryme8

[Pryme8]

Pg with your model please, this is ezpz.

[yLacaute]

Sorry but I don't know how to be me clear anymore, I said everything.

There is a playground in the first post and the challenge is simple : you load the Dude.babylon and you set him a specific texture on one face, the face you want.

[Pryme8]

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

[yLacaute]

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.

[Pryme8]

Yeah I need a PG with your mesh so I can help out.

upload it to git then load it into this https://rawgit.com/ and give me the link please.
if your mesh is simple then yes this is ezpz, I just need to be working with the same data buffers as you.

[yLacaute]

I created this playground, you absolutely right it will be more easy to understand :

https://www.babylonjs-playground.com/#JQDPT6#3

=> The wall, in wireframe = true for better understanding of the 2 faces needed to be textured.

 

[Pryme8]

https://www.babylonjs-playground.com/#V48J48

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.

[yLacaute]

Thank you, it is more complicated than I expected 

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 

 

[Pryme8]

repeating the texture is easy with wrap modes and custom shaders.

Do this step first though.

[yLacaute]

@Pryme8 I already can import textured meshes from Blender, but this is not my need

I will check Babylon internal code because 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. 

[JohnK]

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.

[Guest]

Also you may want to read about multimaterials which is the way you need to use to apply different materials to an object:

http://doc.babylonjs.com/how_to/multi_materials

[yLacaute]

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

 

[Pryme8]

https://playground.babylonjs.com/#44X0M9%2333
No its not hard to edit textures on loaded objects.

But with what you are trying to do you is missing elements/steps, mainly a way to identify the different polygonal face groups.

With this example, the model had UV data and uses vertexColor to establish face groups.

[yLacaute]

@Pryme8 Your PG looks very complicated  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 
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.

[Pryme8]

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.