Skip to main content
GameDev.net gamedev.net
🔒 Locked

(Webgl) Glsl silhouette

Started by resle Dec 20, 2011 at 4:50 PM 5 replies 4.1k views
Original Post
resle
resle
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..
resle
resle
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..
Ruggostein
Ruggostein
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.
resle
resle

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..
Ruggostein
Ruggostein
Yes, sadly this technique is a bit limited, try using different scale values for each object.
resle
resle
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..
Ruggostein
Ruggostein
For image space, look for sobel filter, I think humus3d has a demo that shows how to do it.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.