GitHub - mattdesl/webgl-wireframes: Stylistic Wireframe Rendering in WebGL
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK