0

I am working on a system to procedurally build meshes for "mines", right now I don't want to achieve visual perfection I am more focused on the basic.

I got the point in which I am able to generate the shape of the mines and from that generating the 2 meshes, one for the ground and one for the "walls" of the mine.

Now I am working on getting the UV mapping right but my problem is that the ground is really hard to map to UV coordinates properly and I am currently not able to get it right. For the tessellation I am using a constrained version of the delaunay triangulation to which I added a sub-tessellation what simply splits the triangles at least once and keeps splitting them if the area of the triangle is greater than X.

Here a 2D rendering of the tessellation that highlight the contours, the triangles and the edges constrained delaunay triangulation

Here the result of the 3D rendering (using three.js and webgl) with my current UV mapping applied (a displacement map as well, please ignore it for now).

3d rendering

I am taking a naive approach to the UV mapping, each vertex of a triangle in the grid is translated to values between 0 and 1 and that's it. I think that, in theory should be right, but the issue is with the order of the vertexes that is creating a problem but if that would be the case the texture should be shown rotated or oddly not just oddly AND stretched like that.

Once I will get the UV mapping right, the next step would be to correctly implement the

I am currently writing this in javascript but any hint or solution in any language would be alright, I don't mind converting and/or re-engineering it to make it work.

My goal is to be able to procedurally build the mesh, send it to multiple clients and achieve the same visual rendering. I need to add quite a few bits and pieces after this other step is implemented so I can't rely on shaders on the client side because otherwise being able to place tracks, carts or something else on the ground would just be impossible for the server. Once I will get these things sorted out, I will switch to Unity 3D for the rendering on the client side, webgl and three.js are currently being used just to have a quick and easy way to view what's being produced without the need of a client/server whole infrastructure.

Any suggestion?

Thanks!

Daniele Salvatore Albano
  • 1,263
  • 2
  • 13
  • 29
  • Hi Daniele, I will write this as a comment because it is not a perfect answer and I am not sure if it really covers your need. But, have you considered just normalizing the position based in the bounding box (p.x / width, p.y / height) and use it as UV? Basically a planar UV mapping. This approach will result in texture cords ranging from 0 to 1 and with values respecting the vertices relative distances. Almost like an Atlas. If this seems acceptable let me know and, if you want, I would be happy to post an answer. – diogoslima Feb 24 '20 at 13:31
  • as diogoslima says, triplanar projection should do the trick, so you don't really need to mess it up with uv coordinates (here you have a good tuto of how to implement it in Unity: https://www.martinpalko.com/triplanar-mapping) – Lotan Feb 24 '20 at 14:06
  • For such flat floor you can just use vertex coordinates as UVs. Assuming your X and Y axes are on the floor and Z points up, you could truncate integer values from (X,Y) and use the result as (U,V). So the value `2.3` becomes `0.3` etc. – kolenda Feb 24 '20 at 16:35
  • Thanks for the comments! This is exactly what I am doing and I was expecting it to work properly but clearly there is a problem in the mapping. To be exact, in the last image posted is built from a 52x52 map (ranges from -1 to 51) and the coordinates gets mapped to UVs (X -> U, Y -> V) using a simple proportion (in this case U = (X + 1) / 52 ... ) but the result is the weird one above. Even without displacement map applied (that of course should not change anything) the result is the same. Can the order of the vertexes of the triangles affect how the texture is mapped? – Daniele Salvatore Albano Feb 24 '20 at 18:28
  • Haaa, interesting @DanieleSalvatoreAlbano! It is more of a guess due to the little information I have, but: * If you are already using Unity to render please take a look at [Continuous tiling](https://docs.unity3d.com/Packages/com.unity.probuilder@4.0/manual/workflow-uvs.html) * If you have your custom shader, you may just set the color R and B to the U and V values. This will make visually clear if the mapping is correct as you will see a well defined multi-color gradient. – diogoslima Feb 24 '20 at 19:31
  • I am not yet using Unity for the rendering but I was actually thinking of exporting the model in format that can be easily opened via an editor (ie. OBJ) and review the mapping performed by a proper editor once I apply the texture and I get the result I want. Thanks for the link though, I will look into it! – Daniele Salvatore Albano Feb 24 '20 at 20:24

1 Answers1

0

I sorted out the issue in my code, it was pretty stupid though: by mistake I was adding 3 UV mappings per triangle and not 1 per point causing an huge visual mess. Sorted out that, I was able to achieve what I needed!

https://www.youtube.com/watch?v=DHF4YWYG7FM

Still a lot of work to do but starts to look decent!

Daniele Salvatore Albano
  • 1,263
  • 2
  • 13
  • 29