Outline Pass Algorithm

[spidersharma03]

1. Draw Non Selected objects in the depth buffer
2. Make non selected objects invisible, and draw only the selected objects, by comparing the depth buffer of non selected objects. Write a mask here for visible and hidden edges.
3. Downsample the Mask buffer to half
4. Edge detect the half res buffer, with different colors to hidden and visible edges.
5. Blur the edges of half res/quarter res buffer(quarter res is used for edge glow)
6. Add the blurred edges on top of original scene using the full res mask buffer

[spidersharma03]

A preview::

[bhouston]

http://ci.threejs.org/api/pullrequests/9407/examples/webgl_postprocessing_outline.html

[mrdoob]

Nice!

[mrdoob]

Is this how Blender does it? I always wondered...

[bhouston]

It will be the way Clara.io does it soon. :)

This is sort of a fancy way with a lot of glow effects and options, I suspect that Blender, like most apps with selection do something very similar but probably simpler.

[weiserhei]

Very cool!
I noticed outline Edges that overlap other edges in the background are hidden although there is an object inbetween:

Is this intended behavior?

[spidersharma03]

Yeah, well, I think this is one of the limitation you can say of this algorithm. This is due to the fact that the edge pass finds the edges, by simply creating a black and white mask, for the selected object/objects. Probably a different edge detection can replace this to create a different result :-)

[EskelCz]

@spidersharma03 @bhouston This is awesome. But what about animated models? Can this approach be updated to outline skinned meshes as well? I'd like to use it in a game engine for character models and right now it outlines their T-poses, before animation. Not very pretty. :)
http://i.makeagif.com/media/9-02-2016/ln3ILm.gif

I've made my own solution earlier but this is more complex, I like it more, except this issue. Maybe I can help to fix it, if you can point me into right direction.

This was my approach: http://stackoverflow.com/questions/23245748/uniform-vertex-displacement-for-skinned-mesh-shader-animated-outline-three-js/23253396

[spidersharma03]

@EskelCz, I am not sure why this dosen't work for skinned meshes. The edge detection should work on any dynamic models as well. Could you provide some demo/example which I can run and see the problems?

[spidersharma03]

@EskelCz, I was able to produce the error, I will take a look.

[jasonrhaddix]

@spidersharma03 would be nice to have that error fixed, but it's usefulness still out weighs this bug. Great work!

[EskelCz]

@spidersharma03 From my quick examination it seems to me like your ShaderMaterial's vertex shader should also use skinning (skinned?) matrix.

It looked like this when I solved it earlier in about r74:
mvPosition = modelViewMatrix * skinned

Not sure how is the skinning shader structured in the latest code though. :(

[spidersharma03]

@EskelCz, yeah you are right. The vertex shader should have the skinning code. I also don't have much idea about the skinning code. would you be taking a look and interested in integrating that part of the code?

[EskelCz]

@spidersharma03 I've found this great working example of shader material with skinning code:
http://necromanthus.com/Test/html5/Lara_shader.html

But for some reason whenever I try to add #ifdef USE_SKINNING (even just the condition itself) to your shaderMaterial's vertex shader I get a compilation error: '#' : invalid character

Maybe it can be done with only includes of the skinning chunks but I'm getting errors there as well. I'm afraid I just don't know GLSL good enough to make it work.

I'm afraid we're gonna need someone more knowledgable.
@mrdoob @bhouston
Please?

[robertoranon]

I like this example, but it only works when the edge color is brighter than the background.

Suppose you want white background, black edge color (or any other color) - due to the additive blending you are using, you cannot see any edge.

To overcome this limitation, I have modified OutlinePass.js in the following ways:

• the edge detection pass uses fixed colours for visible and hidden edges, respectively (1,0,0) and (0,1,0) - so that edges can be detected regardless of user's chosen colors
• the final pass substitutes those colors with user's chosen ones, and also sets alpha such that alpha > 0 only where there are edges
• additive blending is substituted by normal (alpha) blending

With this solution, you can also have e.g. black edges on white background.
If you think this is an improvement, I can make a PR.

p.s. I tried to remove the FXAA pass from the example, and set the outline pass to render to screen, but then screen is black: I think any kind of pass should be able to write its result to screen.

[msmcgillis]

I would like to see @robertoranon improvements get added through a PR.

[Eketol]

Any progress on this with skinned meshes?