OpenGL ES 3.0: Programming Guide, Second Edition (2014)

Chapter 10. Fragment Shaders

Chapter 9, “Texturing,” introduced you to the basics of creating and applying textures in the fragment shader. In this chapter, we provide more details on the fragment shader and describe some of its uses. In particular, we focus on how to implement fixed-function techniques using the fragment shader. The topics we cover in this chapter include the following:

• Fixed function fragment shaders

• Programmable fragment shader overview

• Multitexturing

• Fog

• Alpha test

• User clip planes

In Figure 10-1, we have previously covered the vertex shader, primitive assembly, and rasterization stages of the programmable pipeline. We have talked about using textures in the fragment shader. Now, we focus on the fragment shader portion of the pipeline and fill in the remaining details on writing fragment shaders.

Figure 10-1 OpenGL ES 3.0 Programmable Pipeline

Fixed-Function Fragment Shaders

Readers who are new to the programmable fragment pipeline but have worked with OpenGL ES 1.x (or earlier versions of desktop OpenGL) are probably familiar with the fixed-function fragment pipeline. Before diving into details of the fragment shader, we think it is worthwhile to briefly review the old fixed-function fragment pipeline. This will give you an understanding of how the old fixed-function pipeline maps into fragment shaders. It’s a good way to start before moving into more advanced fragment programming techniques.

In OpenGL ES 1.1 (and fixed-function desktop OpenGL), you had a limited set of equations that could be used to determine how to combine the various inputs to the fragment shader. In the fixed-function pipeline, you essentially had three inputs you could use: the interpolated vertex color, the texture color, and the constant color. The vertex color would typically hold either a precomputed color or the result of the vertex lighting computation. The texture color came from fetching from whichever texture was bound using the primitive’s texture coordinates and the constant color could be set for each texture unit.

The set of equations you could use to combine these inputs together was quite limited. For example, in OpenGL ES 1.1, the equations listed in Table 10-1 were available. The inputs A, B, and C to these equations could come from the vertex color, texture color, or constant color.

Table 10-1 OpenGL ES 1.1 RGB Combine Functions

There actually was a great number of interesting effects one could achieve, even with this limited set of equations. However, this was far from programmable, as the fragment pipeline could be configured only in a very fixed set of ways.

So why are we reviewing this history here? It helps give an understanding of how traditional fixed-function techniques can be achieved with shaders. For example, suppose we had configured the fixed-function pipeline with a single base texture map that we wanted to modulate (multiply) by the vertex color. In fixed-function OpenGL ES (or OpenGL), we would enable a single texture unit, choose a combine equation of MODULATE, and set up the inputs to the equation to come from the vertex color and texture color. The code to do this in OpenGL ES 1.1 is provided here for reference:

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SOURCE0_RGB, GL_PRIMARY_COLOR);
glTexEnvi(GL_TEXTURE_ENV, GL_SOURCEl_RGB, GL_TEXTURE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SOURCE0_ALPHA, GL_PRIMARY_COLOR);
glTexEnvi(GL_TEXTURE_ENV, GL_SOURCEl_ALPHA, GL_TEXTURE);

This code configures the fixed-function pipeline to perform a modulate (A × B) between the primary color (the vertex color) and the texture color. If this code doesn’t make sense to you, don’t worry, as none of it exists in OpenGL ES 3.0. Rather, we are simply trying to show how this would map to a fragment shader. In a fragment shader, this same modulate computation could be accomplished as follows:

#version 300 es
precision mediump float;
uniform sampler2D s_tex0;
in vec2 v_texCoord;
in vec4 v_primaryColor;
layout(location = 0) out vec4 outColor;
void main()
{
outColor = texture(s_tex0, v_texCoord) * v_primaryColor;
}

The fragment shader performs the exact same operations that would be performed by the fixed-function setup. The texture value is fetched from a sampler (that is bound to texture unit 0) and a 2D texture coordinate is used to look up that value. Then, the result of that texture fetch is multiplied by v_primaryColor, an input value that is passed in from the vertex shader. In this case, the vertex shader would have passed the color to the fragment shader.

It is possible to write a fragment shader that would perform the equivalent computation as any possible fixed-function texture combine setup. It is also possible, of course, to write shaders with much more complex and varied computations than just fixed functions would allow. However, the point of this section was just to drive home how we have transitioned from fixed-function to programmable shaders. Now, we begin to look at some specifics of fragment shaders.

Fragment Shader Overview

The fragment shader provides a general-purpose programmable method for operating on fragments. The inputs to the fragment shader consist of the following:

• Inputs (or varyings)—Interpolated data produced by the vertex shader. The outputs of the vertex shader are interpolated across the primitive and passed to the fragment shader as inputs.

• Uniforms—State used by the fragment shader. These are constant values that do not vary per fragment.

• Samplers—Used to access texture images in the shader.

• Code—Fragment shader source or binary that describes the operations that will be performed on the fragment.

The output of the fragment shader is one or more fragment colors that get passed on to the per-fragment operations portion of the pipeline (the number of output colors depends on how many color attachments are being used). The inputs and outputs to the fragment shader are illustrated inFigure 10-2.

Figure 10-2 OpenGL ES 3.0 Fragment Shader

Built-In Special Variables

OpenGL ES 3.0 has built-in special variables that are output by the fragment shader or are input to the fragment shader. The following built-in special variables are available to the fragment shader:

• gl_FragCoord—A read-only variable that is available in the fragment shader. This variable holds the window relative coordinates (x, y, z, 1/w) of the fragment. There are a number of algorithms where it can be useful to know the window coordinates of the current fragment. For example, you can use the window coordinates as offsets into a texture fetch into a random noise map whose value is used to rotate a filter kernel on a shadow map. This technique is used to reduce shadow map aliasing.

• gl_FrontFacing—A read-only variable that is available in the fragment shader. This boolean variable has a value of true if the fragment is part of a front-facing primitive and false otherwise.

• gl_PointCoord—A read-only variable that can be used when rendering point sprites. It holds the texture coordinate for the point sprite that is automatically generated in the [0, 1] range during point rasterization. In Chapter 14, “Advanced Programming with OpenGL ES 3.0,” there is an example of rendering point sprites that uses this variable.

• gl_FragDepth—A write-only output variable that, when written to in the fragment shader, overrides the fragment’s fixed-function depth value. This functionality should be used sparingly (and only when necessary) because it can disable depth optimization in many GPUs. For example, many GPUs have a feature called Early-Z where the depth test is performed ahead of executing the fragment shader. The benefit of using Early-Z is that fragments that fail the depth test are never shaded (thus saving performance). However, when gl_FragDepth is used, this feature must be disabled because the GPU does not know the depth value ahead of executing the fragment shader.

Built-In Constants

The following built-in constants are also relevant to the fragment shader:

const mediump int gl_MaxFragmentInputVectors = 15;
const mediump int gl_MaxTextureImageUnits = 16;
const mediump int gl_MaxFragmentUniformVectors = 224;
const mediump int gl_MaxDrawBuffers = 4;
const mediump int gl_MinProgramTexelOffset = -8;
const mediump int gl_MaxProgramTexelOffset = 7;

The built-in constants describe the following maximum terms:

• gl_MaxFragmentInputVectors—The maximum number of fragment shader inputs (or varyings). The minimum value supported by all ES 3.0 implementations is 15.

• gl_MaxTextureImageUnits—The maximum number of texture image units that are available. The minimum value supported by all ES 3.0 implementations is 16.

• gl_MaxFragmentUniformVectors—The maximum number of vec4 uniform entries that can be used inside a fragment shader. The minimum value supported by all ES 3.0 implementations is 224. The number of vec4 uniform entries that can actually be used by a developer can vary from implementation to implementation and from one fragment shader to another. This issue is described in Chapter 8, “Vertex Shaders,” and the same issue applies to fragment shaders.

• gl_MaxDrawBuffers—The maximum number of multiple render targets (MRTs) supported. The minimum value supported by all ES 3.0 implementations is 4.

• gl_MinProgramTexelOffset/gl_MaxProgramTexelOffset—The minimum and maximum offsets supported by the offset parameter to the texture*Offset() built-in ESSL functions.

The values specified for each built-in constant are the minimum values that must be supported by all OpenGL ES 3.0 implementations. It is possible that implementations may support values greater than the minimum values described. The actual hardware-dependent values for fragment shader built-in values can also be queried from API code. The following code shows how you would query the values of gl_MaxTextureImageUnits and gl_MaxFragmentUniformVectors:

GLint maxTextureImageUnits, maxFragmentUniformVectors;

glGetIntegerv(GL_MAX_TEXTURE_IMAGE_UNITS,
&maxTextureImageUnits);
glGetIntegerv(GL_MAX_FRAGMENT_UNIFORM_VECTORS
&maxFragmentUniformVectors);

Precision Qualifiers

Precision qualifiers were briefly introduced in Chapter 5, “OpenGL ES Shading Language” and were covered in detail in Chapter 8, “Vertex Shaders.” Please review those sections for full details on precision qualifiers. We remind you here that there is no default precision for fragment shaders. As a consequence, every fragment shader must declare a default precision (or provide precision qualifiers for all variable declarations).

Implementing Fixed-Function Techniques Using Shaders

Now that we have given an overview of fragment shaders, we will demonstrate how to implement several fixed-function techniques using shaders. The fixed-function pipeline in OpenGL ES l.x and desktop OpenGL provided APIs to perform multitexturing, fog, alpha test, and user clip planes. Although none of these techniques is provided explicitly in OpenGL ES 3.0, all of them can still be implemented using shaders. This section reviews each of these fixed-function processes and provides example fragment shaders that demonstrate each technique.

Multitexturing

We start with multitexturing, which is a very common operation in fragment shaders used for combining multiple texture maps. For example, a technique that has been used in many games, such as Quake III, is to store precomputed lighting from radiosity calculations in a texture map. That map is then combined with the base texture map in the fragment shader to represent static lighting. Many other examples of using multiple textures exist, some of which we cover in Chapter 14, “Advanced Programming with OpenGL ES 3.0.” For example, often a texture map is used to store a specular exponent and mask to attenuate and mask specular lighting contributions. Many games also use normal maps, which are textures that store normal information at a higher level of detail than per-vertex normals so that lighting can be computed in the fragment shader.

The point of mentioning this information here is to highlight that you have now learned about all of the parts of the API that are needed to accomplish multitexturing techniques. In Chapter 9, “Texturing,” you learned how to load textures on various texture units and fetch from them in the fragment shader. Combining the textures in various ways in the fragment shader is simply a matter of employing the many operators and built-in functions that exist in the shading language. Using these techniques, you can easily achieve all of the effects that were made possible with the fixed-function fragment pipeline in previous versions of OpenGL ES.

An example of using multiple textures is provided in the Chapter_10/MultiTexture example, which renders the image in Figure 10-3.

Figure 10-3 Multitextured Quad

This example loads a base texture map and light map texture and combines them in the fragment shader on a single quad. The fragment shader for the sample program is provided in Example 10-1.

Example 10-1 Multitexture Fragment Shader