npr_0000s_0005_final_paper

NPR sketch shader vvvv

This is a first sketch for a real-time shader which mimics the style of old architectural drawings. Two steps are involved: first creating the drawn outlines and second shading the areas in between.

Let’s begin with the outlines.

npr_0001_simple_shade

Starting from a simple standard shading and trying to extract contours via sobel-edge doesn’t produce useful results:

npr_0002_simple_contours

Edges appear depending on contrast. So we have to create some more useful starting material. First create a depth map. Edges will appear between areas of different depth.

npr_0003_depth

Second we render the normals. Edges will appear between areas facing in different directions.

npr_0004_normals

Both are rendered in one pass and output into the RGB color channels.
red – x component of normal
green – y component of normal
blue – depth

npr_0005_combined

Derived contours: much better!

npr_0006_normal_contours

The line are then modulated with the depth information to fade them out at the distance, producing higher contrast in foreground objects:

npr_0007_normal_contours_fade

The second step is the proper shading. We can easily modulate the standard shading with a screen aligned noise texture which produces already good results:

npr_0008_noise_shade

But we can do better with a simple trick. Taking the depth map from an earlier step and modulating it with the noise texture we can lower the contrast in distant areas. Using a down sampled version produces even nicer irregular shading at various edges:

npr_0010_noise_shade_mod

Adding the outlines creates the final look:

npr_0011_final_white

The final image is just a multiplication with an image of drawing paper:

npr_0000s_0005_final_paper

Here is another version using halftone dots:

npr_0001s_0002_layer-10

4 thoughts on “NPR sketch shader vvvv

  1. Pingback: Willy Chyr | Development Update - Edge Detection

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>