Show only visible side of geomerty wireframe

Questions
,
1

image
image782×809 83.9 KB

I need to only show the visible (front) side of the wireframe geometry (Icosahedron).

I came across this topic but I couldn’t make it work.

Any idea?

2

From the WEBGL Materials Wireframe example, the result would look like this jsfiddle.

Edited the following line in the Fragment Shader:
gl_FragColor.a = gl_FrontFacing ? edge : 0.0;

You also need to set the geometry to none indexed:
const geometry = new THREE.SphereGeometry(10).toNonIndexed();

And don’t forget to set the center attributes:
setupAttributes(geometry);

4 Likes
3

Thanks a lot! Could you explain why the need of removing normal and uv attributes, and add the center?

Also, it still works without toNonIndexed()

4

It depends on your scene, in the official example, they’re removing them for optimization reasons, since they’re not using any lights they don’t need normals and the same goes for UVs, no texture no UVs.

That’s the trick, the Shader is basically drawing a copy of your geometry at the center with a 0 alpha, effectively masking/redrawing the back side.

I’m guessing you’re using a custom none indexed geometry, if you use it with a Three.js primitive geometry or one that uses indexed vertices, you’ll need to convert it.

1 Like