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.


  • 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

    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.

    UPDATE Nov 4 2023:

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

    This website is dedicated to examples of that: