Game Development Reference
In-Depth Information
al, interactive scenes, and not simple, static two dimensional shapes, as illustrated
by the following example.
In order to avoid a large code snippet, we'll break down the example into a few sep-
arate chunks. Each chunk will be presented in the order in which they are executed.
The first thing we need to do is set up the page where our example will run. The two
components here are the two shader programs (more information on what a shader
program is will follow) and the initialization of the
WebGLRenderingContext
object.
<body>
<script type="glsl-shader/x-fragment"
id="glsl-frag-simple">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 0.3, 1.0);
}
</script>
<script type="glsl-shader/x-vertex"
id="glsl-vert-simple">
attribute vec3 aVertPos;
uniform mat4 uMVMat;
uniform mat4 uPMat;
void main(void) {
gl_Position = uPMat * uMVMat *
vec4(aVertPos, 1.0);
}
</script>
<script>
(function main() {
var canvas =
document.createElement("canvas");
