7

次のコード セグメントがあります。

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

実行に失敗するまで、すべての行の後にアラート関数を配置しているため、これを知っています（クロムでデバッグするためのより良い方法が必要です、何か提案はありますか？）

ここにある 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, 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>
4

2 に答える 2

4

タイプミスがあります：

unifromMatrix4fvuniformMatrix4fv機能する必要がありますsetMatrixUniforms。

これで問題が解決したかどうか、またはなぜ問題がmat4.translate. JavaScript コンソール (Windows で Chrome を実行している場合は F12 キー) はいつでも開くことができ、エラーの内容が表示されます。

于 2013-02-12T07:01:27.753 に答える