Outlines
Draw ink lines around silhouettes and along the edges inside an image.
Cards
2 live examples to tweak, learn and copy.
How it works
Lines are what make a render read as a drawing. There are two families of ways to get them, and they fail in opposite places, which is why this technique has two cards.
Geometry: the inverted hull. Draw the mesh a second time, slightly inflated along its
normalsA unit vector perpendicular to a surface, pointing the way it faces. Lighting and Fresnel effects compare it with other directions. Normal A unit vector perpendicular to a surface, pointing the way it faces. Lighting and Fresnel effects compare it with other directions. Vertex shader The GPU program that runs once for every vertex of a mesh. It places the vertex on screen by writing gl_Position, and passes values on to the fragment shader.
Image: edge detection. Render the scene first, then run a post-processingFull-screen passes run in order over the finished frame, each reading the image the previous one wrote. Bloom, tone mapping and color grading live here. Post-process chain Full-screen passes run in order over the finished frame, each reading the image the previous one wrote. Bloom, tone mapping and color grading live here. Kernel A small grid of weights. Each output pixel is the weighted sum of its neighbors, which blurs, sharpens or finds edges depending on the weights. Sobel operator A pair of 3×3 kernels that measure how fast an image changes across and up the screen. Combined, they give an edge strength per pixel, large where the image changes sharply.out = Σ weight(i, j) · texel(x + i, y + j)edge = length(vec2(gx, gy))
Production renderers run the edge detection on the depth bufferAn image the size of the framebuffer that holds, for each pixel, how far away the nearest surface drawn so far is. The depth test uses it to hide what is behind. Depth buffer An image the size of the framebuffer that holds, for each pixel, how far away the nearest surface drawn so far is. The depth test uses it to hide what is behind.
Further reading
- Relative luminance (opens in a new tab)Reference
- Blend modes (opens in a new tab)Reference
- Alpha compositing (opens in a new tab)Reference
- dFdx, dFdy (opens in a new tab)Reference
- fwidth (opens in a new tab)Reference
- Filterable procedurals (opens in a new tab)Article
- Kernel (image processing) (opens in a new tab)Reference
- Gaussian blur (opens in a new tab)Reference
- Sobel operator (opens in a new tab)Reference
- Depth testing (opens in a new tab)Article
- glDepthFunc (opens in a new tab)Reference
- Spatial shaders (opens in a new tab)Docs
- Framebuffers (opens in a new tab)Article
- glFramebufferTexture2D (opens in a new tab)Reference
- EXT_color_buffer_float extension (opens in a new tab)Docs
- Coordinate Systems (opens in a new tab)Article
- The OpenGL ES Shading Language, version 3.00 (opens in a new tab)Docs
- Cel shading (opens in a new tab)Reference
- Face culling (opens in a new tab)Article
- GuiltyGearXrd's Art Style: The X Factor Between 2D and 3D (opens in a new tab)Video
- normalize (opens in a new tab)Reference
- Screen-reading shaders (opens in a new tab)Docs