WebGL Textures & Vertices
Page Forty Three
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
The section titled
to upload the array to the GPU, for
This section explains how
shaders use the vertex and texel data.
The shader language is based on the
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
The book's shaders use
This section discusses the qualifiers used within the book's shaders.
Shaders only read values from uniforms.
Both the vertex and fragment shader access uniform values.
Before a drawing operation, you may modify the uniform.
However the developer can't modify a uniform, until WebGL methods
drawArrays() finish execution.
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
The next few sections
explain how the book's vertex shader moves or rotates every vertex by
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