WebGL Textures & Vertices

Beginner's Guide

Page Forty Seven

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 in 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 before drawElements() 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 drawing operations. Uniforms can change between drawing 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 bring the information together, that's provided here. We demonstrate how to upload uniform and attribute values from JavaScript to the vertex shader.

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.