Results 1 to 3 of 3

Thread: What am I doing wrong here?

  1. #1
    Junior Member
    Join Date
    Sep 2011
    Posts
    1

    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:
    Code :
    <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:
    Code :
    <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!

  2. #2
    Junior Member
    Join Date
    Aug 2011
    Posts
    5

    Re: What am I doing wrong here?

    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.

  3. #3
    Junior Member
    Join Date
    Aug 2011
    Posts
    5

    Re: What am I doing wrong here?

    "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:
    Code :
    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, perspectiveMatrix);
    instead of
    Code :
    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
    (line 130)

Similar Threads

  1. What's wrong with this code?
    By Nils Pipenbrinck in forum OpenVG and VGU
    Replies: 1
    Last Post: 03-21-2006, 08:53 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •