Hello,
I have a question about the use of displacement maps.
When applying a displacement map to my model it leaves gaps at the edges.
I already tried the displacementBias option but that isn’t really the desired solution.
Is there a different solution for this?
Here is a relating post for Blender, where they solved the issue by using an option called “normals > auto smooth”. Relating post: https://blender.stackexchange.com/questions/143529/displacement-map-creates-gaps-on-the-corners-of-a-wall
Additional information
Bellow a screenshot of the problem
This is probably what it comes down to. Each vertex has one (1) normal vector, which means you can’t get a hard edge without duplicating vertices along the edge. If you have duplicate vertices along the edge, they’ll pull apart when you apply a displacement to just one of them.
It’s just a single mesh, with a single material, shown here — correct?
If you can edit the model in Blender a bit, you might just put a small bevel on the sloped edges so it’s not a hard edge.
Thanks for your reply,
I tried quit a few things in Three.js like: applying the material to the standard boxgeometry, Tried ExtrudeGeometry. Also tried a few things in the Blender model: adding an inset, duplicating vertices along the edge, applying a bevel. Also, I removed the subdivisions in the Blender model and added them back with subdivide by stevinz.
This all without success. By all the above solutions the edges stil get pulled apart.
To answer your question about the model. In Blender it’s a single mesh with to materials one for the rooftiles and one for the sides. When exporting as a gltf to Three.js is gets split into 2 meshes one per material.
Is there a way to pull the vertices on the roof side up to the rooftile vertices to match the new vertex position applied by the displacement map?
I think this will be a problem. If you have two meshes and two materials, and only one mesh/material pair uses a displacement map, then nothing is going to displace vertices along the edge while drawing the sides. They’ll end up apart.
I’m wondering if a displacement map is the right solution here… is it an option just to bake the displacement into the vertices?
Hi donmccurdy,
I choose a different solution yesterday, due to time limitation.
Now I make use of the displacementBias this way I can hide the gaps behind the roof sides.
For the roof sides I use a single side material (FrontSide) this way you don’t see the roof sides sticking out above the roof.
A different solution I thought of is using the roof UV unwrap, to create a custom roof texture. with a displacement map where de edges of the displacement map wil be black, so the edge vertices wil not be displaced.
Roof side with FrontSide material
Roof side with DoubleSide material
1 Like
