javascript – WebGL使用gl-matrix库mat4.translate没有运行

我有这段代码：

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);

javascript – WebGL使用gl-matrix库mat4.translate没有运行

解决方法

相关文章