(Webgl) Glsl silhouette

Started by
5 comments, last by Ruggostein 12 years, 4 months ago
Hi,
I went on porting a simple 3d engine to webgl and noticed that GlPolygonMode and more importantly GlLineWidth have both been deprecated. Given that, could anyone point me to some tutorial on how to draw a toon outline using glsl? (perhaps - from what I "sniffed" on google - in image space?)

Thanks

Andrea
..so we ate rare animals, we spent the night eating rare animals..
Advertisement
Oww... no answers, looks badder than I thought. By the way I came back for a little update: image space is unluckily unusable in my rendering scenario, so I am now trying to search for object space ways of outlining a mesh.

It puzzles me the solutions of this problem was so straightforward with fixed function, and with little performance loss despite rendering every mesh twice, and it's an ungooglable riddle now with shaders..
..so we ate rare animals, we spent the night eating rare animals..
Two ways:
1 - As postprocessing: Render the normals/depth to a framebuffer, use a fragment shader to detect sillouette
2 - Use the old trick: Draw the mesh twice, first as normal, 2nd pass with black material, invert culling mode, and extrude/scale the vertices in the normals direction.

Two ways:
1 - As postprocessing: Render the normals/depth to a framebuffer, use a fragment shader to detect sillouette
2 - Use the old trick: Draw the mesh twice, first as normal, 2nd pass with black material, invert culling mode, and extrude/scale the vertices in the normals direction.


Thanks Relfos, the 2nd technique sounds good for my case. I tried it by scaling the mesh in the 2nd pass by simple model matrix scaling. The result looks like this: scaling is probably a bit too simplistic for
some types of geometric shapes, also it doesn't take into account the object's own scale. (I can more or less guess what "extruding" means [moving a vertex on its normal?] but I am not sure I know how to do it, also I haven't per-vertex normals data)

nogood.png
..so we ate rare animals, we spent the night eating rare animals..
Yes, sadly this technique is a bit limited, try using different scale values for each object.
Any hint on the 2nd method - image space? I could try bending some parts of the engine to make it fit...
..so we ate rare animals, we spent the night eating rare animals..
For image space, look for sobel filter, I think humus3d has a demo that shows how to do it.

This topic is closed to new replies.

Advertisement