WebGL Textures & Vertices

Beginner's Guide

Page Thirty Six

Compile & 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 property, 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, either VERTEX_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.

Activity Diagram: Program and Shaders

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

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