106

GitHub - mattdesl/webgl-wireframes: Stylistic Wireframe Rendering in WebGL

 6 years ago
source link: https://github.com/mattdesl/webgl-wireframes
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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:

License

MIT, see LICENSE.md for details.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK