Introduction to 3D Game Programming with DirectX.9.0 - F. D. Luna

304 Chapter 17

We have variables to represent the vertex shader and its constant table. We have a teapot mesh variable, followed by a set of D3DXHANDLEs whose variable names describe the variable they refer to.

The Setup function performs the following tasks:

Creates the teapot mesh

Compiles the vertex shader

Creates the vertex shader based on the compiled code

Obtains handles to several variables in the shader program through the constant table

additional components that a flexibleFvertex format cannot describe. Therefore, we use a flexible vertex format instead of a vertex declara-

Initializes several of the shader variables through the constant

//

// Create geometry:

//

D3DXCreateTeapot(Device, &Teapot, 0);

//

// Compile shader

//

hr = D3DXCompileShaderFromFile( "diffuse.txt",

0,

0,

"Main", // entry point function name "vs_1_1",

D3DXSHADER_DEBUG, &shader, &errorBuffer, &DiffuseConstTable);

// output any error messages if( errorBuffer )

{

::MessageBox(0, (char*)errorBuffer->GetBufferPointer(), 0, 0); d3d::Release<ID3DXBuffer*>(errorBuffer);

Team-Fly®

Introduction to Vertex Shaders 305

Introduction to Vertex Shaders 307

d3d::Release<IDirect3DVertexShader9*>(DiffuseShader);

d3d::Release<ID3DXConstantTable*>(DiffuseConstTable);

}

17.5 Sample Application: Cartoon Rendering

As a second vertex shader sample, let’s write two vertex shaders that shade and outline a mesh in such a way that it appears as a cartoonstyle drawing. Figure 17.2 illustrates this:

308 Chapter 17

Note: Cartoon rendering is a particular kind of non-photorealistic rendering, sometimes called stylistic rendering.

Although cartoon rendering isn’t for all games, such as violent firstperson shooters, it can enhance the atmosphere of some types of games when you want to impart a cartoonish feel. Furthermore, cartoon rendering is pretty easy to implement and allows us to demonstrate vertex shaders nicely.

We break cartoon rendering into two steps.

1.Cartoon drawings typically have few shading intensity levels with an abrupt transition from one shade to the next; we refer to this as cartoon shading. In Figure 17.2.a we see that the meshes are shaded using exactly three shading intensities (bright, medium, dark) and the transition between them is abrupt—unlike Figure 17.2.c, which has a smooth transition from light to dark.

2.Cartoon drawings also typically have their silhouette edges outlined, as Figure 17.2.b shows.

Both steps require their own vertex shader.

17.5.1 Cartoon Shading

To implement cartoon shading, we take the same approach as Lander describes in his article “Shades of Disney: Opaquing a 3D World” featured in the March 2000 issue of Game Developer Magazine. It works like this: We create a grayscale luminance texture that contains the different shade intensities we desire. Figure 17.3 shows the texture that we use in the sample program.

Figure 17.3: Shade texture holds the shade intensities we use. Observe the abrupt transitions between shades and that the texture shade intensity must increase from left to right.

Then in the vertex shader we perform the standard diffuse calculation dot product to determine the cosine of the angle between the vertex

normal N and the light vector L, which is used to determine how much light the vertex receives:

s L N

Introduction to Vertex Shaders 309

310 Chapter 17

when the color is combined with the luminance texture, it appears shaded.

//File: toon.txt

//Desc: Vertex shader that lights geometry so it appears to be

//drawn in a cartoon style.

//

// Globals

//

extern matrix WorldViewMatrix; extern matrix WorldViewProjMatrix;

extern vector Color;

extern vector LightDirection;

static vector Black = {0.0f, 0.0f, 0.0f, 0.0f};

//

// Structures

//

struct VS_INPUT

{

vector position : POSITION; vector normal : NORMAL;

};

struct VS_OUTPUT

{

vector position : POSITION; float2 uvCoords : TEXCOORD; vector diffuse : COLOR;

};

//

// Main

//

VS_OUTPUT Main(VS_INPUT input)

{

//zero out each member in output VS_OUTPUT output = (VS_OUTPUT)0;

//transform vertex position to homogenous clip space output.position = mul(input.position, WorldViewProjMatrix);

//

//Transform lights and normals to view space. Set w

//components to zero since we're transforming vectors.

//Assume there are no scalings in the world

//matrix as well.

//

LightDirection.w = 0.0f;

Introduction to Vertex Shaders 311

312 Chapter 17

17.5.3.1 Edge Representation

We represent an edge of a mesh as a quad (built from two triangles)— see Figure 17.5.

Figure 17.5: A quad to represent an edge

We choose quads for a couple of reasons: We can easily change the thickness of the edge by adjusting the dimensions of the quad, and we can render degenerate quads to hide certain edges, namely edges that are not silhouette edges. In Direct3D we build a quad out of two triangles. A degenerate quad is a quad built from two degenerate triangles. A degenerate triangle is a triangle with zero area or, in other words, a triangle defined by three vertices that lie on the same line (collinear). If we pass a degenerate triangle into the rendering pipeline, nothing is displayed for that triangle. This is useful because if we wish to hide a particular triangle we can simply degenerate it without actually removing it from our triangle list (vertex buffer). Recall that we only want to display the silhouette edges—not every edge of the mesh.

When we first create an edge, we specify its four vertices so that it is degenerate (Figure 17.6), which means the edge will be hidden (not displayed when rendered).

Figure 17.6: Degenerate quad describing the edge shared by the two triangles

Note that for the two vertices v0 and v1 in Figure 17.6, we set their vertex normal vector to the zero vector. Then when we feed the edge vertices into the vertex shader, the shader will test if a vertex is on a silhouette edge; if it is, then the vertex shader will offset the vertex position in the direction of the vertex normal by some scalar. Observe then that the vertices with a zero normal vector will not be offset.

Introduction to Vertex Shaders 313

Thus, we end up with a non-degenerate quad to represent the silhouette edge, as Figure 17.7 shows.

Figure 17.7: Vertices v2 and v3 on a silhouette edge being offset in the direction of their vertex normals n2 and n3 respectively. Observe that vertices v0 and v1 remain in their fixed position since their vertex normals equal the zero vector, thus no offset occurs for them. In this way the quad is successfully regenerated to represent the silhouette edge.

Remark: If we didn’t set the vertex normals of vertices v0 and v1 to the zero vector, then those vertices would have been offset as well. But if we offset all four of the vertices describing a silhouette edge, then we have only translated the degenerate quad. By keeping vertices v0 and v1 fixed and only offsetting vertices v2 and v3 we regenerate the quad.