CODEWITHSUNDEEP
openglgraphics3dglsl
dupersuper
dupersuper

Reputation: 839

Outline effects in OpenGL

In OpenGL, I can outline objects by drawing the object normally, then drawing it again as a wireframe, using the stencil buffer so the original object is not drawn over. However, this results in outlines with one solid color.

enter image description here

In this image, the pixels of the creature's outline seem to get more transparent the further they are from the creature they outline. How can I achieve a similar effect with OpenGL?

Upvotes: 22

Views: 29921

Answers (4)

Emeric Beaufays
Emeric Beaufays

Reputation: 191

I'm late for an answer but I was trying to achieve the same thing and thought I'd share the solution I'm using.

A similar effect can be achieved in a single draw operation with a not so complex shader.

In the fragment shader, you will calculate the color of the fragment based on lightning and texture giving you the un-highlighted color 'colorA'.

Your second color is the outline color, 'colorB'.

You should obtain the fragment to camera vector, normalize it, then get the dot product of this vector with the fragment's normal.

The fragment to camera vector is simply the inverse of the fragment's position in eye-space.

The colour of the fragment is then:

float CameraFacingPercentage = dot(v_fragmentToCamera, v_Normal);
gl_FragColor = ColorA * CameraFacingPercentage + ColorB * (1 - FacingCameraPercentage);

This is the basic idea but you'll have to play around to have more or less of the outline color. Also, the concave parts of your model will also be highlighted but that is also the case in the image posted in the question.

Upvotes: 7

rioki
rioki

Reputation: 6118

As far as I see it the effect on the screen short and many "edge" effects are not pure edges, as in comic outline. What mostly is done, you have one pass were you render the object normally then a pass with only the geometry (no textures) and a GLSL shader. In the fragment shader the normal is taken and that normal is perpendicular to the camera vector you color the object. The effect is then smoothed by including area close to perfect perpendicular.

I would have to look up the exact math but I think if you take the dot product of the camera vector and the normal you get the amount of "perpendicularness". That you can then run through a function like exp to get a bias towards 1.

So (without guarantee that it is correct):

exp(dot(vec3(0, 0, 1), normal));

(Note: everything is in screenspace.)

Upvotes: 2

ChatCloud
ChatCloud

Reputation: 1200

Detect edges in GLSL shader using dotprod(view,normal)

http://en.wikibooks.org/wiki/GLSL_Programming/Unity/Toon_Shading#Outlines

Upvotes: 2

weltensturm
weltensturm

Reputation: 2162

They did not use wireframe for this. I guess it is heavily shader related and requires this:

  1. Rendering object to a stencil buffer
  2. Rendering stencil buffer with color of choice while applying blur
  3. Rendering model on top of it

Upvotes: 8

Related Questions