How does Material Wireframe work? My own wireframe shader?


As as learning exercise, I want to use my own shaders to render a wireframe of a geometry, similar to a material with wireframe set to true.

I tried looking in the codebase and couldn’t figure out how it’s done.

Have you already studied webgl_materials_wireframe?

I hadn’t, thanks! Looking at the code now.

So I guess I need to study the particular geometry, see what attributes it sets, and then I can use those attributes in the vertex shader and possibly pass them via varying to the fragment.

This is something to run with for now, will post again if I run into more trouble, cheers!

Hey @Mugen87 I’ve tried to use the same vertex and fragment shader from the linked example but using it with PlaneBufferGeometry instead of the geometry in the example which does like:

geometry.deleteAttribute( 'normal' );
geometry.deleteAttribute( 'uv' );
geometry.setAttribute( 'center', new THREE.BufferAttribute( centers, 3 ) );

I’m guessing that the reason it’s not working with PlaneBufferGeometry is because of this, but if I just use a basic material with wireframe set to true then it works, so that material must be doing something that doesn’t require this geometry which sets the center attributes, right?

Actually don’t worry if you’re busy

I’m kinda getting it now, I think what I want is to just set the wireframe on the shader material and then play with the vertex shader :slight_smile: