I have a complex terrain mesh loaded from a GLB file (approximately 30,000 vertices). I also have a polygon that represents a road (including the road surface and its border/shoulder).
Goal:
When I move or change the height of this polygon (raise/lower the road), I want the terrain vertices that lie inside the polygon to deform smoothly so they conform to the road’s height, with a nice falloff/blend at the edges (so it doesn’t look like a hard cut).
If that needs to be interactive, you have to do it with the vertex shaders to get the best performance. You can make them communicate with a uniform, but if you application is way too complex, things might not work the way you want!
Hi, @MKebsi@Amr_Khamis thank you for the replies so far.
Here is a clearer description of my current implementation and the problems I’m facing:
Current method:
I am using Raycaster to check intersection between terrain vertices and the road polygon/mesh:
For each vertex in the terrain (BufferGeometry, ~30k vertices), I cast a ray upward/downward.
If the ray intersects the road, I adjust the vertex’s Y position to match the road height.
I do this with some lerp to make it smoother.
Problems:
Performance: Very slow if I update continuously (e.g. while dragging/moving the road). Looping 30k vertices + raycasting every time is expensive.
Visual artifacts due to low vertex density:
When the road is raised high, there are visible gaps between the road and terrain.
When the road is lowered, the terrain clips/penetrates into the road.
Because the original terrain doesn’t have enough vertices in that area, the result doesn’t look tight and natural.
My new idea:
I want to extract the polygon vertices of the road and dynamically add them into the terrain’s BufferGeometry. Then I can control the height of these new vertices (and their surrounding area) so the terrain conforms perfectly to the road with better resolution.
However, I’m not sure what is the best/recommended way to dynamically add vertices to an existing loaded GLB BufferGeometry at runtime.
Questions:
What is the best/recommended technique in Three.js for handling local terrain deformation under a dynamic polygon?
Is dynamically adding vertices from a polygon to a loaded BufferGeometry a viable method? If so, what is the efficient runtime implementation? What are the keywords for this?
I will attach some demo images below (before / after deformation) to illustrate the issues.
Any advice or links to similar implementations would be really helpful. Thank you!
use BVH raycasting instade three-mesh-bvh much faster in your case.
it happens due to the low poly count and from the image i can see you doing it vertically high, give it more vertices and use cubic falloff to prevent the look of hard cuts