WebGL Textures & Vertices: Beginner's Guide (2015)
Access Shader Program Variables
The previous section explains how getProgramVariables() creates and assigns a perspective projection matrix to a vertex shader uniform. Method getProgramVariables() also accesses attribute a_position, uniform um4_matrix, and assigns viewport settings. This section demonstrates how to use WebGL methods getAttribLocation(WebGLProgram, String), enableVertexAttribArray(Number), and viewport(Number x, Number y, Number w, Number h), to initialize shader variables associated with the controller.
The following listing demonstrates saving the location of the vertex shader's uniform named um4_matrix. Save the uniform's location to the property named uMatrixTransfrom. Property uMatrixTransform is an instance variable of the controller. The default rendering method uses uMatrixTransform to rotate a mesh around the Y axis. The section titled Draw the Scene explains how to rotate the mesh.
this.uMatrixTransform = gl.getUniformLocation
(
program,
"um4_matrix"
);
Listing 50: Save uniform um4_matrix to property uMatrixTransform
WebGL API getAttribLocation(WebGLProgram, String)
Next getProgramVariables() processes the vertex shader attribute named a_position.
The WebGL API method getAttribLocation(WebGLProgram, String) returns the index location of a shader attribute. The first parameter to getAttribLocation(WebGLProgram, String) is a WebGLProgram with linked vertex and fragment shaders. The second parameter to getAttribLocation(WebGLProgram, String) is the name of an attribute within quotation marks.
The following listing demonstrates saving the index location of the attribute named a_position, from the vertex shader. program is a reference to the WebGLProgram property used throughout the book. The instance variable aPosition, is a property of the controller. After getAttribLocation(WebGLProgram, String) executes, aPosition maintains the location of the shader attribute a_position.
this.aPosition = gl.getAttribLocation
(
program,
"a_position"
);
Listing 51: WebGL API getAttribLocation(WebGLProgram, String)
WebGL API enableVertexAttribArray(Number)
The WebGL API method enableVertexAttribArray(Number) activates an attribute within the vertex shader. Reference the attribute by it's index location within the shader.
The following listing demonstrates activating attribute a_position, by index location. The property aPosition within the GLControl class maintains the location of the attribute a_position. The section titled Prepare Buffersassigns vertex data to the shader attribute a_position, through the property aPosition.
gl.enableVertexAttribArray
(
this.aPosition
);
Listing 52: WebGL API enableVertexAttribArray(Number)
WebGL API viewport(Number x,Number y,Number w,Number h)
Finally method getProgramVariables() assigns the WebGL viewport width and height. The viewport represents the renderable area for WebGL content. The WebGL API method viewport(Number x,Number y,Number w,Number h)includes four parameters representing the X and Y coordinate of the upper left corner, along with the width and height. The book's examples draw to an HTML5 canvas with width and height of 512 pixels. The following listing demonstrates assigning WebGL viewport dimensions.
gl.viewport
(
0,
0,
512,
512
);
Listing 53: WebGL API viewport(Number x,Number y,Number w,Number h)
Access Shader Program Variables Summary
Method getProgramVariables() accesses attribute a_position, uniform um4_matrix, and assigns viewport settings. We discussed WebGL API methods getAttribLocation(WebGLProgram, String), enableVertexAttribArray(Number), and viewport(Number x, Number y, Number w, Number h). See method getProgramVariables().