Non-photorealistic rendering technology (NPR)-1. Cartoon rendering

Reprint Please specify source: http://blog.csdn.net/tianhai110

Non-photorealistic rendering (non-photorealistic rendering)

(NPR) is a class of computer graphics that mainly simulates the artistic style of drawing and is also used to develop new drawing styles. Unlike the traditional computer graphics that seek realism, NPR is influenced by paintings, sketches, technical drawings, and animated cartoons. NPR has appeared in film and video games in the form of "cartoon radiography", which has also appeared in design drawings and experimental animations

(a) Cartoon rendering

Cartoon rendering is a special kind of non-photorealistic rendering technique, which requires that the post is composed of non-obvious gradient color blocks and some non-complicated textures. It emphasizes the thickness of lines and simple color blocks, ignoring the details. With these very simple and pure lines and color blocks, it is possible to render a highly textured cartoon effect required by the designer, thus creating an interactive two-dimensional animation world.

The game with this technology: "Network fast Racing"

Cartoon painting, including: Hook Edge, Cartoon light, edge halo, hair highlights and other technologies, as follows:

We explain the hook edge and cartoon coloring (cartoon shading) below;

Silhouette (Contour hook edge):

Hook Edge Method has a pixel hook edge and vertex hook edge, we use the Sobel edge detection algorithm, its theoretical basis, please refer to:

Http://blog.csdn.net/tianhai110/archive/2010/06/11/5663756.aspx

Implementation principle:

1. Render the model onto a texture map;

2. Perform Sobel edge detection on this graph to find the boundary and render it to screen space.

So we need to render through two passes, the first pass renders the model into a texture, the second pass detects the edge and outputs the rendering effect.

The vs,ps of the second pass is as follows:

Vs_output Vs_main (Vs_input in)

{

Vs_output out;

Ensure that the coordinates of the object are between [ -1,1]

In.Pos.xy = sign (IN.POS.XY);

Let the object be rendered in the screen coordinate system;

Out.pos = FLOAT4 (In.Pos.xy, 0.0, 1.0);

Aligning the texture coordinates

out.texcoord.x = 0.5 * (1 + in.pos.x);

OUT.TEXCOORD.Y = 0.5 * (1-IN.POS.Y);

return out;

}

Pixel Shader for:

Sampler2d Rttmap;

const float off = 1.0/512.0;

Float4 Ps_main (float2 tex:texcoord0): COLOR0

{

float p00 = tex2d (Rttmap, Tex + float2 (-off,-off)). R;

float P01 = tex2d (Rttmap, Tex + float2 (0,-off)). R;

float P02 = tex2d (Rttmap, Tex + float2 (off,-off)). R;

float P10 = tex2d (Rttmap, Tex + float2 (-off, 0)). R;

float P12 = tex2d (Rttmap, Tex + float2 (off, 0)). R;

float P20 = tex2d (Rttmap, Tex + FLOAT2 (-off, Off)). R;

float P21 = tex2d (Rttmap, Tex + float2 (0, off)). R;

float P22 = tex2d (Rttmap, Tex + FLOAT2 (1, off)). R;

The longitudinal gray value of Sobel operator

FLOAT GX = (p00 + 2*p10 + P20)-(p02 + 2*P12 + p22);

float Gy = (p00 + 2*p01 + p02)-(P20 + 2*p21 + p22);

Float EDGESQR = gx*gx + gy*gy;

Valve value 0.07

Return 1-(Edgesqr > 0.07*0.07);

}

In this example, the rendering state should be changed to D3drs_cullmode to D3dcull_none; Otherwise it won't show.

In programming, const float off = 1.0/512.0 is written as const float off = 1/512;

The results are not shown for half a day, note 1/512 is 0, and 1.0/512.0 is 0.001953125;

Cartoon Coloring ( cel-shading )

To achieve cartoon coloring, we need to create a grayscale texture with intensity levels to achieve the shadow over effect in cartoon painting.

Then in the vertex shader, we perform the basic scattering operation, by the dot product of the light vector l and the normal vector n, to determine how much light the vertex receives:

s= L.N

If the s<0; indicates that the angle between the light and the vertex normals is greater than 90 degrees, the vertex receives no light, so if s<0, let s=0; To allow S to be located between [0,1], it is convenient to take a value in the texture coordinate space.

Pixel processor, we take value from the brightness texture, because the brightness texture only 3 color, so the result of coloring is one color to another color of the blunt excessive, this is what we expect.

VS Code Snippet:

Vs_output Vs_main (Vs_input INPUT)

{

Vs_output OUTPUT;

Output.position = Mul (input.position, matviewprojection);

FLOAT3 PosW = Mul (Matview, input.position);

FLOAT3 NORMALW = Mul (Input.normal, Matview);

float diffuse = max (0, Dot (veclightdir, NORMALW));

Output.texcoord.x = diffuse;

Output.texcoord.y = 0.0f;

return (Output);

}

PS Code:

Sampler Cartoonmap;

Float4 Ps_main (float2 tex:texcoord0): COLOR0

{

Return tex2d (Cartoonmap, Tex);

}

The results are as follows:

Cartoon rendering with outline:

Combining the above two technologies, to achieve the outline of the cartoon, you need 3 pass to render:

1. Render the model's cartoon rendering to a texture (RTT), Alpha set to 1, so that the contour can be found;

2. The second pass, the alpha of the texture you just got