Stylistic Wireframe Rendering in WebGL

webgl-wireframes

This is the code for a November 2017 net magazine tutorial, Stylized Wireframe Rendering in WebGL. Check out the article (when it's released) for more details.

Stylized Wireframe Rendering in WebGL

The code here uses barycentric coordinates to create stylized wireframes in ThreeJS and WebGL. Some features of the code and its shaders include:

• Alpha to Coverage for crisp alpha cutouts and depth testing with Multisample Anti-Aliasing
• Thick and anti-aliased single-pass wireframe rendering
• Basic support for animated line dashes
• Inner edge removal to render quads instead of triangles
• A few other effects, such as noise, tapered lines, dual strokes and backface coloring

Demo

Click here to see a live demo.

Usage

To build & run this project locally, first clone the repository, then use npm to install and run it:

npm install
npm start

Now open localhost:9966 to see it in your browser.

To build:

npm run build

Further Reading

The technique here is just one approach to wireframe rendering. You may find these other articles interesting:

• Easy Wireframes with barycentric coordinates – Florian Bösch
• Two Methods for Antialiased Wireframe Drawing with Hidden Line Removal
• glsl-solid-wireframe – drawing wireframes and grids in a fragment shader by Ricky Reusser
• Drawing Lines is Hard

License

MIT, see LICENSE.md for details.