Game Development Reference
In-Depth Information
Our fragment shader is shown in Listing 7-11.
Listing 7-11.
Our Fragment Shader
<script id="shader-fs" type="x-shader/x-fragment">
varying highp vec4 vColor;
void main(void) {
gl_FragColor =
vColor
;
}
</script>
You can see in Listing 7-11 that we simply assigned the passed in vertex color to the final fragment color.
The qualifier
highp
denotes the level of precision that we want.
The full listing of
demo_1.html
is shown in Listing 7-12.
Listing 7-12.
Our Full demo_1.html Code
<!DOCTYPE html>
<html>
<head>
<style>
body{ background: gray; }
canvas{ background: white; }
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="gl-matrix-min.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var gl = null,
shaderProgram = null,
fragmentShader = null,
vertexShader = null,
vertexPositionAttribute = null,
vertexColorAttribute = null,
squareVerticesBuffer = null,
mvMatrix = mat4.create(),
pMatrix = mat4.create();
$(document).ready(function(){
initWebGL();
initShaders();
executeProgram();
});
function initWebGL() {
try {
var canvas = $("#canvas").get(0);
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch(e) {
