WebGL Textures & Vertices: Beginner's Guide (2015)

The Vertex Shader

This section covers the default vertex shader line by line. The file GLControl.js defines a default vertex and default fragment shader. If a Web page includes a shader, then the controller uses the shader. Otherwise the controller uses shaders defined in GLControl.js. The book's examples all use the default shaders.

Vertex Shader Introduction

This section presents a number of new concepts for readers unfamiliar with shaders. Subsequent sections tie the information together. The sections titled WebGL API vertexAttribPointer() for Vertices and WebGL API vertexAttribPointer() for Texels explain how to specify attribute processing. The section titled 4 x 4 Matrices explains rotation and translation with a matrix. The section titled Perspective Projection introduces perspective with matrices. Perspective Projection also demonstrates how to upload values for uniforms.

The default vertex shader processes one vertex and one texel at a time. The vertices and texels originate from a JavaScript array. For example data from the aVertices array in the GLSquare constructor, eventually passes through the vertex shader.

Outputs from the vertex shader include gl_Position and v_tex_coord0. When the vertex shader completes processing, the built in variable gl_Position contains coordinates for one vertex. The shader modifies vertex coordinates to display rotation and perspective projection. The varying named v_tex_coord0, represents one texel from the original array.

The following listing includes the entire vertex shader. We added line numbers to identify each line for discussion.

1. attribute vec4 a_position;

2. attribute vec2 a_tex_coord0;

3. varying vec2 v_tex_coord0;

4. uniform mat4 um4_matrix;

5. uniform mat4 um4_pmatrix;

6. void main(void) {

7. gl_Position = um4_pmatrix * um4_matrix * a_position;

8. v_tex_coord0 = a_tex_coord0;

9.}

Listing 42: Vertex Shader with Line Numbers

Line 1 attribute vec4 a_position; declares an attribute of type vec4 named a_position. Attribute a_position processes X, Y, and Z coordinates. The coordinates originate with our Float32Array of numbers representing vertex coordinates and texel coordinates.

When the vertex shader runs, the first three entries within a_position contain values for one vertex at a time. WebGL assigns the default value 1.0 to the last entry within a_position. Therefore a_position.x represents the X coordinate of one vertex. a_position.y represents the Y coordinate of one vertex. Each Float32Array prepared for the book's projects always assign 0.0 to the Z coordinate. a_position.z always equals 0.0.

Line 2 attribute vec2 a_tex_coord0; declares an attribute of type vec2 named a_tex_coord0. We run texels through this attribute. For example a_tex_coord0.s equals an S coordinate from our Float32Array of vertex and texel data.a_tex_coord0.t equals a T coordinate from our Float32Array of vertex and texel data. Every specified texel from the Float32Array runs through the vertex processor, one at a time. When the vertex shader runs, the two entries withina_tex_coord0 contain S and T values for one texel at a time.

Attribute Processing

Attributes process data which originate with JavaScript arrays. Each time the vertex shader runs, the attribute processes one subset from the array. The vertex shader executes for every subset in the array. When every entry has processed through the vertex shader, one draw operation has completed.

For example the drawing method used this book, calls the WebGL method drawElements(). The Lighthouse Texture Map project uploads an element array with six entries. Therefore the vertex shader runs six times beforedrawElements() terminates.

Line 3 varying vec2 v_tex_coord0; declares a varying of type vec2 named v_tex_coord0. Vertex shaders output data through varying variables. When the vertex shader finishes one execution, v_tex_coord0 contains texel coordinates for output to the fragment shader.

Line 4 uniform mat4 um4_matrix; declares a uniform of type mat4 named um4_matrix. This matrix applies rotation or translation to every vertex. The book's projects rotate or move the mesh with this matrix.

Uniforms don't change during draw operations. The vertex shader runs six times for every drawing operation applied to the Lighthouse Texture Map project. Yet the value assigned to um4_matrix remains the same during those six calls. When the location of each vertex changes, the entire mesh displays the result.

Line 5 uniform mat4 um4_pmatrix; declares a uniform mat4 named um4_pmatrix. This matrix also modifies the location of each vertex in a mesh. However um4_pmatrix provides a sense of depth with perspective projection. The section titled Perspective Projection provides details.

Line 6 void main(void) { represents the entry point for the vertex shader. In other words, the function named main() executes when the vertex shader runs.

Line 7 gl_Position = um4_pmatrix * um4_matrix * a_position; multiplies our perspective projection matrix, by our rotation matrix, and the current vertex coordinates.

Multiply a vertex by a matrix to modify the vertex's location. In this case the shader multiplies each vertex by two matrices. um4_pmatrix provides depth or perspective. um4_matrix moves or rotates. The built in variable gl_Position, receives the product of both multiplications. gl_Position represents the original X, Y, Z coordinates modified for rotation, translation, and perspective.

Internal processing uses gl_Position to determine which values to pass to the fragment shader. gl_Position is of type vec4 containing values for X, Y, Z, and W coordinates.

Line 8 v_tex_coord0 = a_tex_coord0; assigns values for one texel to the varying v_tex_coord0. The texel coordinates within attribute a_tex_coord0 originate from our JavaScript array. The assignment to a varying provides output for the fragment shader.

Line 9 } The closing curly brace ends the function main(), which terminates one run of the vertex shader.

Vertex Shader Summary

The vertex shader processes one vertex and one texel at a time. Outputs from the vertex shader include gl_Position and v_tex_coord0. When the vertex shader completes processing, the built in variable gl_Position, represents one vertex modified to display rotation, translation, and perspective projection. Additionally, the varying v_tex_coord0 represents one texel. The value for each texel originates with a JavaScript array.

The vertex shader section presents many new concepts to readers unfamiliar with shaders. However, subsequent sections tie together the information provided here. We demonstrate how to upload uniform and attribute values from JavaScript to the vertex shader.

All materials on the site are licensed Creative Commons Attribution-Sharealike 3.0 Unported CC BY-SA 3.0 & GNU Free Documentation License (GFDL)

If you are the copyright holder of any material contained on our site and intend to remove it, please contact our site administrator for approval.