JavaScript EditorFree JavaScript Editor     Ajax Editor 

Main Page
Previous Page
Next Page

6.1. Brick Shader Overview

One approach to writing shaders is to come up with a description of the effect that you're trying to achieve and then decide which parts of the shader need to be implemented in the vertex shader, which need to be implemented in the fragment shader, and how the application will tie everything together.

In this example, we develop a shader that applies a computed brick pattern to all objects that are drawn. We don't attempt the most realistic looking brick shader, but rather a fairly simple one that illustrates many of the concepts we introduced in the previous chapters. We don't use textures for this brick pattern; the pattern itself is generated algorithmically. We can build a lot of flexibility into this shader by parameterizing the different aspects of our brick algorithm.

Let's first come up with a description of the overall effect we're after. We want

  • A single light source

  • Diffuse and specular reflection characteristics

  • A brick pattern based on the position in modeling coordinates of the object being renderedwhere the x coordinate is related to the brick horizontal position and the y coordinate is related to the brick vertical position

  • Alternate rows of bricks offset by one-half the width of a single brick

  • Easy-to-modify colors and ratios: brick color, mortar color, brick-to-brick horizontal distance, brick-to-brick vertical distance, brick width fraction (ratio of the width of a brick to the overall horizontal distance between two adjacent bricks), and brick height fraction (ratio of the height of a brick to the overall vertical distance between two adjacent bricks)

The brick geometry parameters that we use to control geometry and color are illustrated in Figure 6.1. Brick size and brick percentage parameters are both stored in user-defined uniform variables of type vec2. The horizontal distance between two bricks, including the width of the mortar, is provided by BrickSize.x. The vertical distance between two rows of bricks, including the height of the mortar, is provided by BrickSize.y. These two values are given in units of modeling coordinates. The fraction of BrickSize.x represented by the brick only is provided by BrickPct.x. The fraction of BrickSize.y represented by the brick only is provided by BrickPct.y. These two values are in the range [0,1]. Finally, the brick color and the mortar color are represented by the variables BrickColor and MortarColor.

Figure 6.1. Parameters for defining brick

Now that we're armed with a firm grasp of our desired outcome, we'll design our vertex shader, then our fragment shader, and then the application code that will tie it all together.

Previous Page
Next Page

JavaScript EditorAjax Editor     JavaScript Editor