Wireframe over surface

Questions
, ,
1

Greetings !

Working on parametric surface visualization I got the following problem while rendering lines over surface. The goal is applying wireframe to the surface while keeping the surface’s texture.
In general it works, but rendering of some lines is poor, I guess because of overlapping coordinates:

image
image1260×763 205 KB

Could you please suggest to me the most effective method to get rid of this artifacts ?
Thanks in advance.

Code for producing wireframe is following:

// Wireframe
let geo = new ParametricGeometry( mobius3d, 64, 64 );

const points = [];
for(let i=0; i<geo.index.count; i+=2) {
  points.push( new THREE.Vector3( geo.attributes.position.array[geo.index.array[i] * 3],
                                  geo.attributes.position.array[geo.index.array[i] * 3 + 2],
                                  geo.attributes.position.array[geo.index.array[i] * 3 + 1] ));
}

const wfg = new THREE.BufferGeometry().setFromPoints(points);
const wfm = new THREE.LineBasicMaterial( {color: 0x222222} );
wireframe = new THREE.Line( wfg, wfm );
scene.add(wireframe);
2

could you scale the wireframe by a tiny amount so there’s no z fighting?

1 Like
3

Yes, I tried, but suprizely it shifts, so I guess this is not a method:

image
image520×735 78.6 KB

4

Have you tried Material.polygonOffset and its companions Material.polygonOffsetFactor and Material.polygonOffsetUnits? You have to apply them to the solid surface, not to the wireframe.

Alternatively, if you generate good UVs, you can just use a grid texture as lightMap or aoMap without the need of a wireframe object.

Forgot to add this link.

4 Likes
5

If you’ve got UV coordinates on surfaces, then you can embed the code of this shader into material to draw quads :thinking: : Anti-Aliased Grid Shader - Made by Evan

Example of the using: Robeast (selective bloom) (lines 177 - 186 in the JS section of the codepen there)

5 Likes
6

Thanks for the advice and the informative link :), I will take it into account.

Yes, offset works, but gives noticeable gaps between surface and a grid, shader-based solution of @prisoner849 works better.

7

Many thanks for this simple and elegant solution, the shader magic works fine - even AA is perfect. Now my surfaces in the best condition !

image
image554×813 248 KB

1 Like