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.
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.
Share Improve this question edited Oct 9, 2016 at 2:53 genpfault 52.1k12 gold badges91 silver badges148 bronze badges asked Dec 27, 2011 at 4:20 Emmanuel M. SmithEmmanuel M. Smith 4411 gold badge5 silver badges12 bronze badges2 Answers
Reset to default 14Geometry 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./
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/webgl/lessons/webgl-drawing-without-data.html
This website is dedicated to examples of that:
https://www.vertexshaderart.
WebGL currently only supports pixel shaders and vertex shaders not geometry shaders.
This is as close as it gets:
https://webgl2fundamentals/webgl/lessons/webgl-drawing-without-data.html
And here's a site dedicated to examples of that:
https://www.vertexshaderart.
You have to specify the number of vertices you will generate up front.