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

Compile and Link Shaders with a Program

The following diagram illustrates compiling and linking shaders to a WebGLProgram. The GLControl constructor calls method getProgram(). Method getProgram() returns either a WebGLProgram or null. If the program equals null then the constructor displays an error message and returns. Otherwise the controller saves the WebGLProgram to an instance variable named program. A valid WebGLProgram includes one fragment shader and one vertex shader. This book uses two simple shaders.

Method getProgram() calls getShader() twice, once for a fragment shader and once for a vertex shader. Methods getProgram() and getShader() compile, attach, and link shaders to a program. The next few sections provide details regarding compiling, attaching, and linking.

The first parameter to method getShader(String, Number) is a String with the id of a script tag from the current Web page. The second parameter is one of two WebGL constants representing the type of shader to compile, eitherVERTEX_SHADER or FRAGMENT_SHADER.

The diamond in the diagram represents decision. If the current Web page doesn't have an embedded shader program, then getShader(String, Number) uses the default shader. To experiment with fragment shaders add script to a Web page with the tag <script id="shader-f" type="x-shader/x-fragment">. To experiment with vertex shaders add script to a Web page with the tag <script id="shader-v" type="x-shader/x-vertex">. This book uses the controller's simple default shaders. We cover each shader line by line.

Diagram 11: Activity Diagram Compile and Link Shaders with a Program

Compile and Link a Program

The method getProgram() called by the GLControl constructor, receives no parameters and returns either a WebGLProgram object or null. The method getProgram() creates an empty WebGLProgram, attaches two WebGLShader objects to the WebGLProgram, links the program and assigns the program for use.

First getProgram() calls getShader(String, Number) twice, to create and compile two WebGLShader objects. The first call prepares a fragment shader. The second call prepares a vertex shader.

The following listing demonstrates obtaining a reference to the fragment shader. The first parameter shader-f represents the shader's id within the current Web page. The WebGL constant FRAGMENT_SHADER represents the type of shader to compile.

var shaderF = this.getShader

(

"shader-f",

gl.FRAGMENT_SHADER

);

Listing 28: getShader(String, FRAGMENT_SHADER)

The following listing demonstrates obtaining a reference to the vertex shader. The first parameter shader-v represents the shader's id within the current Web page. The WebGL constant VERTEX_SHADER represents the type of shader to compile.

var shaderV = this.getShader

(

"shader-v",

gl.VERTEX_SHADER

);

Listing 29: getShader(String, VERTEX_SHADER)