WebGL Geometry Shader Equivalent?

Question

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 1

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/

Solution 2

WebGL currently only supports pixel shaders and vertex shaders not geometry shaders.

That said there is an interesting article and demo showing how to emulate geometry shaders in WebGL at: https://acko.net/blog/yak-shading/.

Comments

[yosmo78]

I know that this comment is years in the future now, but does anyone have an example of this? Or even better, has someone implemented the above with this technique that I could reference.