Search code examples
javascriptopengl-esgeometrywebgl

WebGL Geometry Shader Equivalent?

I'm currently researching a way to produce non-photorealistic rendering in webgl. The best looking algorithm I've found so far for edge detection was implemented with OpenGL's geometry shader, here. Specifically GL_TRIANGLES_ADJACENCY.

I was wondering if there was an equivalent in WebGL or even how would I go about porting this code over to Javascript.

Solution

  • Geometry shaders is not available in WebGL.

    However there is plenty of ways to do edge detection. E.g. you can use image space based algorithms, such as

    http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.93.9731&rep=rep1&type=pdf

    Or take a look in "Real-time Rendering - 3rd edition" (book). In this book there is a lot of examples of NPR, of which most will run fine on WebGL.

    http://www.realtimerendering.com/

    UPDATE Nov 4 2023:

    With WebGL2, if you know the number of vertices you want to generate up front, you can use this technique:

    https://webgl2fundamentals.org/webgl/lessons/webgl-drawing-without-data.html

    This website is dedicated to examples of that:

    https://www.vertexshaderart.com