Further Explorations - HTML5 Canvas - page 880

time (in fact, at the time of this writing, this had been updated to version 2.6). It is necessary
to make sure that you have the most recent versions of your libraries:

< script src = "modernizr.js" >< /script>
We now need to include some JavaScript libraries to assist with our application. sylvester.js
and glUtils.js are two libraries that you will find included for most apps that use WebGL.
sylvester.js is a library that helps when performing vector and matrix math calculations in
JavaScript. glUtils.js isanextensionfor sylvester.js ,specificallyforhelpingwithmathrelated
to WebGL:

< script type = "text/javascript" src = "sylvester.js" >< /script>
< script type = "text/javascript" src = "glUtils.js" >< /script>

Shaders

Shaders are pieces of code that run directly on a graphics card. They describe how a
scene —howyourefertoa3DcanvaswhenworkingwithWebGL—shouldberendered.Many
of these little programs perform mathematical transformations that would otherwise run very
slowly in JavaScript. In fact, we are pointing these out because they are not JavaScript; they
are written in a way that WebGL can understand. These sections of code will be read in like
text files and passed to the graphics hardware. Full discussions of topics like shaders are far
out of scope for this little section of the topic,butwewilltellyouabitabouteachoneofthem
to help set the tone for what comes next.
Thefirstshaderbelowisa fragmentshader ,whichtellsthegraphicscardthatwewillbeusing
floating-point numbers and blended colors. The second shader is the vertex shader . It works
with the vertices (defined points in 3D space used to create 3D objects) and will be used for
every vertex we draw onto the Canvas 3D context:

< script id = "shader-fs" type = "x-shader/x-fragment" >
# ifdef GL_ES
precision highp float

float ;

# endif

varying vec4 vColor ;

void void main ( void void ) {

gl_FragColor = vColor ;

}
< /script>

< script id = "shader-vs" type = "x-shader/x-vertex" >
attribute vec3 aVertexPosition ;
attribute vec4 aVertexColor ;