A Simple Shading Example in OpenGL Shading Language
- Brick Shader Overview
- Vertex Shader
- Fragment Shader
- Observations
- Summary
- Further Information
This chapter is from the book
This chapter is from the book
This chapter is from the book
Now that we’ve described the OpenGL Shading Language, let’s look at a simple example. In this example, we apply a brick pattern to an object. The brick pattern is calculated entirely within a fragment shader. If you’d prefer to skip ahead to the next chapter for a more in-depth discussion of the API that allows shaders to be defined and manipulated, feel free to do so.
The shader for rendering a procedural brick pattern was the first interesting shader ever executed by the OpenGL Shading Language on programmable graphics hardware. It ran for the first time in March 2002, on the 3Dlabs Wildcat VP graphics accelerator. Dave Baldwin published the first GLSL brick fragment shader in a white paper that described the language destined to become the OpenGL Shading Language. His GLSL shader was based on a RenderMan shader by Darwyn Peachey that was published in the book, Texturing and Modeling: A Procedural Approach. Steve Koren and John Kessenich adapted Dave’s shader to get it working on real hardware for the first time, and it has subsequently undergone considerable refinement for inclusion in this book.
This example, like most of the others in this book, consists of three essential components: the source code for the vertex shader, the source code for the fragment shader, and the application code that initializes and uses these shaders. This chapter focuses on the vertex and fragment shaders. The application code for using these shaders is discussed in Section 7.13, after the details of the OpenGL Shading Language API have been discussed.
With this first example, we take a little more time discussing the details in order to give you a better grasp of what’s going on. In examples later in the book, we focus mostly on the details that differ from previous examples.
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 rendered—where 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.
)
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.