WebGL Textures & Vertices

Beginner's Guide

Page Fifty Five

Access Shader Program Variables

This section continues demonstrating how to connect shader variables with JavaScript properties within controller method getProgramVariables(). The previous section assigned a perspective projection matrix to a vertex shader uniform. However method getProgramVariables() also accesses attribute a_position, uniform um4_matrix, and assigns viewport settings.

The next two pages demonstrate how to use WebGL API methods getAttribLocation(WebGLProgram, String) and enableVertexAttribArray(Number) to initialize shader attributes, with values from variables in the controller. Also WebGL API method viewport(Number x, Number y, Number w, Number h), assigns the rendering area's location, width, and height.

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 a property of the controller. The default rendering method uses uMatrixTransform to rotate a mesh around the Y axis. The section titled Timed Animation explains how to rotate the mesh. The section titled Vertex Shader demonstrates declaration and usage of uniform um4_matrix.

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. Variable program, references the WebGLProgram used throughout the book. Controller property aPosition allows JavaScript access to the vertex shader's attribute a_position. 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 Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.