Adding Features to Your Game - Learn HTML5 by Creating Fun Games - page 308

will use dummy shaders. Without the proper background knowledge and experience
with graphics programming, shader programming, and other 3D graphics topics, it
would be rather challenging to explain our way through a custom shader program.
The following shader programs take three inputs from CSS, namely a value between
0.0 and 1.0 representing the amount of red, green, and blue to be applied to each
pixel in the image. As a quick and brief crash course in OpenGL Shading Language
(GLSL), I'll just say this: a uniform is like a global variable that we can pass in to the
vertex shader. The vertex shader is called once per vertex and determines where
each vertex is positioned. In order to send values to the fragment shader, the vertex
shader can use a varying variable. If we define a variable of whatever type in the ver-
tex shader that has the varying keyword before it, that means that whatever value
is assigned to it will be available to the fragment shader, provided that the fragment
shader also defines a varying variable of the same name and type. Thus, if we want
a value to be passed to the fragment shader directly from CSS, we can simply send
the value to the vertex shader, then use varying to pass the value through to the
fragment shader. The fragment shader is called once per pixel and determines what
color to apply to that pixel.
//
----------------------------------------------------
// Vertex shader: simple-vert-shader.glsl
//
----------------------------------------------------
precision mediump float;
// Built-in attribute
attribute vec4 a_position;
// Built-in uniform
uniform mat4 u_projectionMatrix;
// Values sent in from CSS
uniform float red;
uniform float green;
uniform float blue;
// Send values to fragment shader