I’m trying to align the textures as if it were a whole plane. I haven’t had much luck trying to set faceUV or any luck whatsoever.
Playground: Babylon.js Playground
Hi @suredelta and welcome to the forum. What effect are you looking for? Could you produce a drawing or image to show what you expect from the 4 triangles?
I want the textures to be “rotated” as if the image was whole.
hi, @suredelta! I’m not entirely sure what your intention was with the loop at the bottom when it sounds like you want a quad. What you were doing was making four triangles each with the same texture which is why you were seeing the texture duplicated. You can tell quickly if you open the inspector and expand the nodes group:
The issue is that you wanted one quad rather than three triangles, so to do that you will want to pass the four positions of the vertices to make the polygon. I expanded your points3D const to the following:
const points3D = [
new BABYLON.Vector3(-0.5, 0, -0.5),
new BABYLON.Vector3(0.5, 0, -0.5),
new BABYLON.Vector3(0.5, 0, 0.5),
new BABYLON.Vector3(-0.5, 0, 0.5)
];
This will position the quad in the same place as your original. To prevent the duplication of the quad, I removed the loop at the bottom and the rotation since it was pulling a multiplier from the loop. Now you are left with one quad with the texture correctly rendering:
The only other change I made was to change the camera to an ArcRotateCamera so that it was easier to move around the scene and look at the mesh. Hope this is what you were going for, but please feel free to ping me if you have more questions.
The intention is that one or more of the triangles can be removed. But the texture would show as normal if all were placed, or if one is removed then that part is removed.
I think the underlying question is can you rotate a texture on a given mesh. In which case I think the answer is probably no or yes with a combination of vOffset, uOffset, uAng and vAng. Though I still think no is the answer. Others may know better.
@suredelta, I see what you are doing now. To get the texture to align across several meshes like this, you need to pass custom UVs into the mesh so that each mesh vertex occupies the correct UV space. This means that the UV mapping for each mesh will be different due to the rotation of the mesh.
The original mesh was mapping the triangle normalized in 0-1 UV space so you were seeing the initial triangle with the upper left vertex at 0, 1 the upper right at 1, 1 and the bottom vertex at 0.5, 0. This distorts the texture as the first two vertices are in the right position (for the top triangle of the texture) but the bottom vertex needs to be at 0.5, 0.5 so that it maps correctly. The other three meshes need different coordinates for each vertex to align properly.
I am not super familiar with MeshBuilder’s CreatePolygon, so I am unsure how to modify the UV space of that type of mesh even with updatable enabled, but @Deltakosh should be able to explain how to update UVs using that class.
What I did to illustrate how you need to assign your UVs was to just create the mesh manually so I could pass in the correct UVs per mesh using Babylon.Mesh. You can see from the way I set up the UV coordinates how they need to be passed to the mesh. I did make one change to the position data to correct the winding order of the triangles as the one you originally passed had the face normal direction pointing down (away from the camera). With this corrected winding order, the mesh points up toward the camera. Note that if you go with your original winding order, the UV data will need to change to map correctly.
https://playground.babylonjs.com/#2Y8TCC#3
@JohnK, your idea of rotating the mesh is along the right lines, but you would also need to scale the UVs so that you get rid of the distortion in the texture. That said, the scaling, offset, and rotation of the UV space is going to be more expensive that just passing the correct UV coordinate to the vertices in each mesh. This is because all of the meshes with custom UVs can share the same material. Otherwise each mesh would need its own material with a clone of the texture to pass custom UV scale, offset, and angle. There’s just a little pre-planning to do with where each vertex sits in UV space but this example with a plane is very simple to deconstruct and saves a lot of perf since there are no calculations at all to transform the texture from one mesh to the next.
Let me know if you have more questions.
Thank you very much. Very precise and simple. I thought I had tried something similar to no avail.
1 Like
Getting closer. Couple or errors in your PG (1) point order must be anticlockwise (2) updatable spelt incorrectly.
Corrected and added an function to rotate uvs through 90 degs https://playground.babylonjs.com/#2Y8TCC#4
A working example. Rotated the outline points in turn rather than the completed mesh and set appropriate UV values https://playground.babylonjs.com/#2Y8TCC#6