Hello everyone,
I try to create different shapes out of a simple plane so I created a few displacement maps. I noticed that I need to subdivide the plane a lot to achieve good results but it would be nice if it is possible to avoid this.
https://playground.babylonjs.com/#DXDUGI#1
This is my displacement map.
Setting the subdivisions to 128 leads to a good result but creates >30k faces. Is it possible to keep the subdivisions low and shade smooth?
Best
Unfortunately no as you need the topology to get things smooth. Hopefully one day we will get the geometry shaders on the web 
Too bad 
Just one more edit of this post. I think I shouldn’t mix the topics here so my question regarding cascaded shadows has to wait.
I am still facing some problems regarding displacement maps. Since smooth shading isn’t possible I have to increase the subdivisions until the plane gets as smooth as it fit my needs. That’s fine, but it would be nice if this could be improved in some way.
The displacement map above increases the vertices in vertical lines. So it’s not necessary to subdivide horizontally. I believe you can save a lot of geometry here. Is it possible to subdivide either on x or z axis instead of both?
Is it possible to subdivide custom meshes? Sometimes I create a curved plane with extrudeShape or a pyramid like mesh. Is there a method to subdivide such meshes afterwards?
Can we rotate the displacement map before applying it?
Best
That will probably never happen 
It has been under review for WebGPU but rejected, as there are too much problems with it and compute shaders / tessellation shaders can do the same thing.
I realized that there are subdivisionX and subdivisionY parameters beside just subdivisions. This is exactly what I was looking for. Using 256 subdivisions leads to 131k faces with subdivisions parameter but only to 512!! with subdivisionsX. I love it! https://playground.babylonjs.com/#DXDUGI#3
I can’t find a build in solution but I came across this pg: https://www.babylonjs-playground.com/#P9UZG#14. It takes around 20ms to modify the displacement map before applying it. I playing with the idea to just create displacement maps that are already rotated and I will load just the right one to save some time. That should be fine for my case.
increaseVertices() is nearly that what I want. But it increases the faces on both axis that leads to the initially mentioned problem. I also found this increaseFacets function: BabylonJS Guide. I will try to adapt it.
I can’t figure out how to separate the subdivisions for each axis. For the beginning I tried to separate the x axis but my geometry becomes a mess: https://playground.babylonjs.com/#DXDUGI#8
I assumed that
for (var j = 0; j < 3; j++)
stands for x, y and z axis. So 0 should be x axis, am I right?
No, this loop is a loop over the 3 edges of a triangle.
I think the algorithm is working by creating n new vertices on each of the 3 edges of a triangle and create new triangles from them + the 3 existing vertices of the triangle.
I guess you could try to create n1 new vertices on edge 1, n2 on edge 2 and n3 on edge 3 (instead of the same n for all of the 3 edges) then try to create new triangles from those vertices. You will need to decide which of the 3 edges is the one to apply n1/n2/n3 and then create new triangles from those vertices. For the latter, you can try this algorithm: https://playground.babylonjs.com/#R3JR6V#2 (hit Enter to generate a new triangle).
Thanks for your advise, @Evgeni_Popov . Unfortunately this is definitely too complex for me. I try it since several hours without any progress.
Calculating the deltaX due to segmentsX should be one thing to get the correct position but I am not even able to add the correct amount of vertices for the x axis.
If anyone is willing to help me with tweaking the increaseVertices function I would appreciate it very much.
You could try to build your plane using createRibbon with each path having a start and end point and each path close to its neighbour.
I actually did something similar. I modified the createGround function to create more variable shapes but with the capability of adding subdivisions.
I encounter one problem though. If I align the plane to the z axis instead of the x axis the normals get inverted while applying the displacement map. Any idea what the problem could be?
X axis: https://playground.babylonjs.com/#NBVQP2#8
Z axis: https://playground.babylonjs.com/#NBVQP2#9
