11
votes

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.

2

2 Answers

13
votes

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/

7
votes

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/.