Question

我有这段代码：

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

除了最后一行

之外，代码中的所有内容都会运行

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

我知道这是因为我在每一行之后都设置了警报功能，直到它们无法运行（我需要更好的调试方式在Chrome中，有什么建议吗？）

我使用的是https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix-min.js

中的gl-Matrix库

关于为什么该行停止代码执行的任何想法？

以下是完整代码：

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

Answer 1

使用新API：

旧API

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

新API

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

Answer 2

你有一个错字：

功能unifromMatrix4fv中

uniformMatrix4fv应为setMatrixUniforms。

我不确定这是否可以解决您的问题，或者您认为问题出在mat4.translate的原因。您始终可以打开JavaScript控制台（如果您在Windows中运行Chrome，则为F12），它会告诉您错误是什么。

WebGL使用gl-matrix库mat4.translate无法运行

2 个答案:

旧API

新API