Geek Answers Handbook

WebGL using gl-matrix mat4.translate library does not work

I have this code segment:

function setupWebGL() { gl.clearColor(0.1, 0.5, 0.1, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0,0,400,300); mat4.perspective(45, 400 / 300, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [0, 0, -2.0]); }

And everything in the code works, except for the very last line

 mat4.translate(mvMatrix, [0, 0, -2.0]);

I know this because I put warning functions after each line until they could execute (I need a better way to debug in chrome, any suggestions?)

I am using the gl-Matrix library found here https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix-min.js

Any ideas on why this line stops code execution?

Here is the complete code:

 <!doctype html> <html> <head> <title>WebGL - Chapter One - Lol</title> <style> body{ background-color: grey; } canvas{ background-color: white; } </style> <script src = "gl-matrix-min.js"></script> <script src = "raf_polyfill.js"></script> <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; attribute vec3 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying highp vec4 vColor; void main(void){ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = vec4(aVertexColor, 1.0); } </script> <script id="shader-fs" type="x-shader/x-fragment"> varying highp vec4 vColor; void main(void){ gl_FragColor = vColor; } </script> <script> var gl = null, canvas = null, glProgram = null, fragmentShader = null, vertexShader = null; var vertexPositionAttribute = null, trianglesVerticeBuffer = null, vertexColorAttribute = null, trianglesColorBuffer = null; var angle = 0.0; var mvMatrix = mat4.create(), pMatrix = mat4.create(); function initWebGL(){ var canvas = document.getElementById("my-canvas"); try{ gl = canvas.getContext("experimental-webgl"); }catch(e){} if(gl){ initShaders(); setupBuffers(); getMatrixUniforms(); animLoop(); }else{ alert("Error: Your browser does not appear to support WebGL."); } } function animLoop(){ setupWebGL(); setupDynamicBuffers(); setMatrixUniforms(); drawScene(); requestAnimationFrame(animLoop,canvas); } function setupWebGL() { //sets the clear color to red lol gl.clearColor(0.1, 0.5, 0.1, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0,0,400,300); mat4.perspective(45, 400 / 300, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [0, 0, -2.0]); } function initShaders(){ var fs_source = document.getElementById("shader-fs").innerHTML; var vs_source = document.getElementById("shader-vs").innerHTML; //compile shaders vertexShader = makeShader(vs_source, gl.VERTEX_SHADER); fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER); //create program glProgram = gl.createProgram(); //attach and link shaders to the program gl.attachShader(glProgram, vertexShader); gl.attachShader(glProgram, fragmentShader); gl.linkProgram(glProgram); if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) { alert("Unable to initialize the shader program."); } //use program gl.useProgram(glProgram); } function makeShader(src, type) { //compile the vertex shader var shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert("Error compiling shader: " + gl.getShaderInfoLog(shader)); } return shader; } function getMatrixUniforms(){ glProgram.pMatrixUniform = gl.getUniformLocation(glProgram, "uPMatrix"); glProgram.mvMatrixUniform = gl.getUniformLocation(glProgram, "uMVMatrix"); } function setMatrixUniforms(){ gl.unifromMatrix4fv(glProgram.pMatrixUniform, false, pMatrix); gl.unifromMatrix4fv(glProgram.mvMatrixUniform, false, mvMatrix); } function setupBuffers() { var triangleVerticeColors = [ 1.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0 ]; trianglesColorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVerticeColors), gl.STATIC_DRAW); } function setupDynamicBuffers(){ var xTran = Math.sin(angle)/2.0; var triangleVertices = [ -0.5 + xTran, 0.5, -0.5, 0.0 + xTran, 0.0, -0.5, -0.5 + xTran, -0.5, -0.5, 0.5 + xTran, 0.5, -0.5, 0.0 + xTran, 0.0, -0.5, 0.5 + xTran, -0.5, -0.5 ]; angle += 0.05; trianglesVerticeBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.DYNAMIC_DRAW); } function drawScene() { vertexPositionAttribute = gl.getAttribLocation(glProgram, "aVertexPosition"); gl.enableVertexAttribArray(vertexPositionAttribute); gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer); gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); vertexColorAttribute = gl.getAttribLocation(glProgram, "aVertexColor"); gl.enableVertexAttribArray(vertexColorAttribute); gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer); gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 6); } </script> </head> <body onload="initWebGL()"> <canvas id="my-canvas" width="400" height="300"> Your browser does not support the HTML5 canvas element. </canvas> </body> </html>
+7
source share
2 answers

Use the new API:

Old API

 mat4.translate(mvMatrix, [0, 0, -2.0]);

New API

 var translation = vec3.create(); vec3.set (translation, 0, 0, -2.0); mat4.translate (mvMatrix, mvMatrix, translation);
+15
source

You have a typo:

unifromMatrix4fv must be uniformMatrix4fv in the setMatrixUniforms function.

I am not sure if this fixes your problem or not, or why you thought your problem was related to mat4.translate . You can always open the JavaScript console (F12 if you use Chrome on Windows) and it will tell you what the error is.

+3
source

More articles:


All Articles