我有这段代码：
function setupWebGL() {
gl.clearColor(0.1,0.5,0.1,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,400,300);
mat4.perspective(45,400 / 300,100.0,pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix,[0,-2.0]);
}
mat4.translate(mvMatrix,-2.0]);
我知道这是因为我在每一行之后都设置了警报功能,直到它们无法运行(我需要一种更好的调试方式,在Chrome中,有什么建议？)
我正在使用这里找到的gl-Matrix库https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix-min.js
关于为什么该行停止代码执行的任何想法？
这是完整的代码：
<!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,pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix,-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,mvMatrix);
}
function setupBuffers() {
var triangleVerticeColors = [
1.0,0.0,1.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.0 + xTran,-0.5 + xTran,0.5 + xTran,-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,0);
vertexColorAttribute = gl.getAttribLocation(glProgram,"aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER,trianglesColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute,0);
gl.drawArrays(gl.TRIANGLES,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>
解决方法
使用新API：
旧API
mat4.translate(mvMatrix,-2.0]);
新API
var translation = vec3.create(); vec3.set (translation,-2.0); mat4.translate (mvMatrix,mvMatrix,translation);
