WebGL Textures & Vertices

Beginner's Guide

Page Forty Three

Shader Details

Each WebGL application requires one vertex shader and one fragment shader. The book's default vertex shader processes each attribute from a buffer, one at a time. Each execution of the vertex shader prepares one vertex and one texel attribute, for output. The OpenGL ES pipeline interpolates vertex shader output before passing information on to the fragment shader. Interpolation involves preparing fragment shader inputs based on vertex shader outputs. The fragment shader may run more often than the vertex shader. Modified values may arrive in stages to the fragment shader.

The vertex shader processes first. Data from the vertex shader processes through the pipeline before passing to the fragment shader. The fragment shader displays color to the rendering surface. This book's rendering surface is an HTML5 canvas element.

We previously demonstrated how to declare vertices and texels with a JavaScript array. The section titled Prepare Buffers explains how to upload the array to the GPU, for shader access. This section explains how shaders use the vertex and texel data.

The shader language is based on the C programming language syntax. However shaders include some unique features designed specifically for high speed graphics.

Shader Storage Qualifiers

Storage qualifiers modify the use of a variable. WebGL storage qualifiers include const, attribute, uniform, and varying. The book's shaders use attribute, uniform, and varying qualifiers. This section discusses the qualifiers used within the book's shaders.

Shader Uniforms

Shaders only read values from uniforms. Both the vertex and fragment shader access uniform values. Assign values to uniforms with JavaScript between drawing operations. Before a drawing operation, you may modify the uniform. However the developer can't modify a uniform, until WebGL methods drawElements() or drawArrays() finish execution. WebGL methods drawElements() and drawArrays() render to the drawing surface. This book calls drawElements() to render to the canvas.

For example upload rotation matrix values to a uniform, then call the WebGL API method drawElements(). The next few sections explain how the book's vertex shader moves or rotates every vertex by a uniform matrix.

Shader Varyings

Varyings allow the vertex shader to pass information to the fragment shader. Varyings represent output from the vertex shader and input to the fragment shader. The vertex shader may modify a varying. The fragment shader can only read a varying. The pipeline interpolates values for a varying before sending the varying to the fragment shader. Modified values for a varying may arrive in stages to the fragment shader.

The book's fragment and vertex shaders declare a varying of type vec2 with the name v_tex_coord0. The varying processes texels uploaded from a JavaScript array.

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