What am I doing wrong here?

Hello all,

I am brand new to WebGL (though I have a lot of experience in other languages), and I am trying to complete some low-level tutorials but cannot get my code to work. I am hoping that someone here might be able to look at one or both of the programs I have written and point out where I am going wrong. Both programs are supposed to draw a black canvas with white shapes on it (a white square in the first one, and a white square and a white triangle in the second). I am getting the black canvas but no white shapes. Loading from the tutorial website works, however, so the assumption is that there is something wrong with my code, though it is mostly cut and pasted from the tutorials.

First Program:

<html>
	<head>
	</head>
	<body onload="start()">
		<canvas id="glcanvas" width="640" height="480">
		</canvas>
		<script src="js/sylvester/sylvester.js"></script>
		<script src="js/glMatrix-0.9.5.min.js"></script>
		<script src="js/glUtils.js"></script>
		<script type="text/javascript">
			function start() {
				var canvas = document.getElementById("glcanvas");

				initWebGL(canvas);      // Initialize the GL context
				initShaders();
				initBuffers();

				// Only continue if WebGL is available and working

				if (gl) {
					gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Set clear color to black, fully opaque
					gl.enable(gl.DEPTH_TEST);                               // Enable depth testing
					gl.depthFunc(gl.LEQUAL);                                // Near things obscure far things
					gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Clear the color as well as the depth buffer.
				}
				drawScene();
			} //start()

			function initWebGL(canvas) {
				gl = null;

				try {
					gl = canvas.getContext("experimental-webgl");
				} catch(e) {
				}

				// If we don't have a GL context, give up now

				if (!gl) {
					alert("Unable to initialize WebGL. Your browser may not support it.");
				}
			}//initWebGL(canvas)

			function initShaders() {
				var fragmentShader = getShader(gl, "shader-fs");
				var vertexShader = getShader(gl, "shader-vs");

				// Create the shader program

				shaderProgram = gl.createProgram();
				gl.attachShader(shaderProgram, vertexShader);
				gl.attachShader(shaderProgram, fragmentShader);
				gl.linkProgram(shaderProgram);

				// If creating the shader program failed, alert

				if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
					alert("Unable to initialize the shader program.");
				}

				gl.useProgram(shaderProgram);

				vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
				gl.enableVertexAttribArray(vertexPositionAttribute);
			} //initShaders()

			function getShader(gl, id) {
				var shaderScript = document.getElementById(id);

				if (!shaderScript) {
					return null;
				}

				var theSource = "";
				var currentChild = shaderScript.firstChild;

				while(currentChild) {
					if (currentChild.nodeType == currentChild.TEXT_NODE) {
						theSource += currentChild.textContent;
					}

					currentChild = currentChild.nextSibling;
				}
				var shader;

				if (shaderScript.type == "x-shader/x-fragment") {
					shader = gl.createShader(gl.FRAGMENT_SHADER);
				} else if (shaderScript.type == "x-shader/x-vertex") {
					shader = gl.createShader(gl.VERTEX_SHADER);
				} else {
					return null;  // Unknown shader type
				}
				gl.shaderSource(shader, theSource);

				// Compile the shader program

				gl.compileShader(shader);

				// See if it compiled successfully

				if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
					alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
					return null;
				}

				return shader;

			} //getShader(gl, id)

			function initBuffers() {
				squareVerticesBuffer = gl.createBuffer();
				gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);

				var vertices = [
				1.0,  1.0,  0.0,
				-1.0, 1.0,  0.0,
				1.0,  -1.0, 0.0,
				-1.0, -1.0, 0.0
				];

				gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
				console.log("1: " + squareVerticesBuffer);
			} //initBuffers()

			function drawScene() {
				console.log("2: " + squareVerticesBuffer);
				gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
				gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

				perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);

				loadIdentity();
				mvTranslate([-0.0, 0.0, -6.0]);

				gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
				gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
				setMatrixUniforms();
				gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
			} //drawScene()

			function loadIdentity() {
				mvMatrix = Matrix.I(4);
			}

			function multMatrix(m) {
				mvMatrix = mvMatrix.x(m);
			}

			function mvTranslate(v) {
				multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
			}

			function setMatrixUniforms() {
				var pUniform = gl.getUniformLocation(shaderProgram, "pMatrix");
				gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));

				var mvUniform = gl.getUniformLocation(shaderProgram, "mvMatrix");
				gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
			}
		</script>
		<script id="shader-fs" type="x-shader/x-fragment">
			void main(void) {
			gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
			}
		</script>
		<script id="shader-vs" type="x-shader/x-vertex">
			attribute vec3 aVertexPosition;
			attribute vec4 aVertexColor;

			uniform mat4 uMVMatrix;
			uniform mat4 uPMatrix;

			varying lowp vec4 vColor;

			void main(void) {
			gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
			vColor = aVertexColor;
			}
		</script>
	</body>
</html>

Second Program:

<html>
	<head>
	</head>
	<body onload="start()">
		<canvas id="glcanvas" width="500" height="500">
		</canvas>
		<script src="js/sylvester/sylvester.js"></script>
		<script src="js/glMatrix-0.9.5.min.js"></script>
		<script src="js/glUtils.js"></script>
		<script type="text/javascript">
			var triangleVertexPositionBuffer;
			var squareVertexPositionBuffer;
			var mvMatrix = mat4.create();
			var pMatrix = mat4.create();
			var shaderProgram;

			function start() {
				var canvas = document.getElementById("glcanvas");

				initWebGL(canvas);      // Initialize the GL context
				initShaders();
				initBuffers();

				// Only continue if WebGL is available and working

				if (gl) {
					gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Set clear color to black, fully opaque
					gl.enable(gl.DEPTH_TEST);                               // Enable depth testing
					gl.depthFunc(gl.LEQUAL);                                // Near things obscure far things
					gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Clear the color as well as the depth buffer.
				}
				drawScene();
			} //start()

			function initWebGL(canvas) {
				gl = null;

				try {
					gl = canvas.getContext("experimental-webgl");
				} catch(e) {
				}

				// If we don't have a GL context, give up now

				if (!gl) {
					alert("Unable to initialize WebGL. Your browser may not support it.");
				}
			}//initWebGL(canvas)

			function initShaders() {
				var fragmentShader = getShader(gl, "shader-fs");
				var vertexShader = getShader(gl, "shader-vs");

				shaderProgram = gl.createProgram();
				gl.attachShader(shaderProgram, vertexShader);
				gl.attachShader(shaderProgram, fragmentShader);
				gl.linkProgram(shaderProgram);

				if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
					alert("Could not initialise shaders");
				}

				gl.useProgram(shaderProgram);
				shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
				gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
				shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
				shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
			} //initShaders()

			function getShader(gl, id) {
				var shaderScript = document.getElementById(id);
				if (!shaderScript) {
					return null;
				}

				var str = "";
				var k = shaderScript.firstChild;
				while (k) {
					if (k.nodeType == 3)
						str += k.textContent;
					k = k.nextSibling;
				}

				var shader;
				if (shaderScript.type == "x-shader/x-fragment") {
					shader = gl.createShader(gl.FRAGMENT_SHADER);
				} else if (shaderScript.type == "x-shader/x-vertex") {
					shader = gl.createShader(gl.VERTEX_SHADER);
				} else {
					return null;
				}

				gl.shaderSource(shader, str);
				gl.compileShader(shader);

				if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
					alert(gl.getShaderInfoLog(shader));
					return null;
				}

				return shader;
			} //getShader(gl, id)

			function initBuffers() {
				triangleVertexPositionBuffer = gl.createBuffer();
				gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
				var vertices = [
				0.0,  1.0,  0.0,
				-1.0, -1.0,  0.0,
				1.0, -1.0,  0.0
				];
				gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
				triangleVertexPositionBuffer.itemSize = 3;
				triangleVertexPositionBuffer.numItems = 3;
				squareVertexPositionBuffer = gl.createBuffer();
				gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
				vertices = [
				1.0,  1.0,  0.0,
				-1.0,  1.0,  0.0,
				1.0, -1.0,  0.0,
				-1.0, -1.0,  0.0
				];
				gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
				squareVertexPositionBuffer.itemSize = 3;
				squareVertexPositionBuffer.numItems = 4;
			} //initBuffers()

			function drawScene() {
				gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
				mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
				mat4.identity(mvMatrix);
				mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
				gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
				gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
				setMatrixUniforms();
				gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
				mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
				gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
				gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
				gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
			} //drawScene()

			function loadIdentity() {
				mvMatrix = Matrix.I(4);
			}

			function multMatrix(m) {
				mvMatrix = mvMatrix.x(m);
			}

			function mvTranslate(v) {
				multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
			}

			function setMatrixUniforms() {
				gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
				gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
			}
		</script>
		<script id="shader-fs" type="x-shader/x-fragment">
			#ifdef GL_ES
			precision highp float;
			#endif

			void main(void) {
			gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
			}
		</script>
		<script id="shader-vs" type="x-shader/x-vertex">
			attribute vec3 aVertexPosition;

			uniform mat4 uMVMatrix;
			uniform mat4 uPMatrix;

			void main(void) {
			gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
			}
		</script>
	</body>
</html>

I would greatly appreciate any guidance anyone can give me.

Thanks!

First program Java-Script-Error: makePerspektive is not defined in row 130
You should read the javascript-errors and use web-development-tools like Bugzilla.

“mat4 is not defined” for the second program…
You may include this script: glMatrix for the second program.
Do the same for the first and use:


mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, perspectiveMatrix);

instead of


perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);

(line 130)