How can it Achieve the Silhoutte Outline Shader effect in Playcanvas?

Like Unity3D, I want the basic Silhoutte Outline effect Playcanvas. Or Anyone had made this Shader, can it Share?

Thanks a lot.

These are two of most common ways to do it.

First (simple), take a model, flip triangles (or just draw front faces), draw it with same vertex shader, but offset vertices slightly by vertex normal, and in fragment shader simply output single color (orange in example above).

Second (harder), this option would require to draw outlined geometry to separate buffer, and then using post-effect you will need to iterate through neighbour pixels to identify if pixel is near by the edge of outlined geometry. If so - paint pixel in colour of your choice.

1 Like

The trick I’ve used in the past is to to do a render-to-texture (samemethod as for a real-time mirror), use a plane in front of the camera, and then a fragment shader doing an edge detect on the texture.
By managing what textures and what objects are visible for the edge render-pass, you can do a lot of cool things.

I haven’t done it it playcanvas, but in another engine, it looked like this:


(The outline on the barrel)

This is the same as #2 from the post above

What Engine? Seem I Haven’t seem.

Happens to be Blender Game Engine, which has some rather heavy limitations on it’s rendering pipeline leading to some interesting workarounds. It does however have the best integrated modeling and level editing tool, after all it is primarily for content creation. That makes it fantastic for throwing together gameplay prototypes in an afternoon, but not necessarily for final products.

Interestingly it hasn’t been overhauled for years and the limitations imposed on game engines due to performance when it was written/designed are pretty similar to what limitations in a web browser are now.