WebGL - initGL未定義

Question

我正在嘗試使用WebGL繪製三角形和正方形的教程。 http://learningwebgl.com/blog/?p=28那一個。

所以當我到了第一個測試區域。 我得到了錯誤：

Uncaught ReferenceError: initGL is not defined.

這是我的代碼：

var triangleVertexPositionBuffer; 
var squareVertexPositionBuffer; 

function webGLStart() { 
    var canvas = document.getElementById("lesson01-canvas"); 
    initGL(document.getElementById("lesson01-canvas")); 
    initShaders(); 
    initBuffers(); 

    gl.clearColor(0.0, 0.0, 0.0, 1.0); 
    gl.enable(gl.DEPTH_TEST); 

    drawScene(); 
} 

function initBuffers() { 
    // driehoek 
    triangleVertexPositionBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); 
    var vertices = [ 
     0.0, 1.0, 0.0, 
     -1.0, -1.0, 0.0, 
     1.0, -1.0, 0.0 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
    triangleVertexPositionBuffer.itemSize = 3; 
    triangleVertexPositionBuffer.numItems = 3; 

    // vierkant 
    squareVertexPositionBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); 
    vertices = [ 
     1.0, 1.0, 0.0, 
     -1.0, 1.0, 0.0, 
     1.0, -1.0, 0.0, 
     -1.0, -1.0, 0.0 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
    squareVertexPositionBuffer.itemSize = 3; 
    squareVertexPositionBuffer.numItems = 4; 
} 

function drawScene() { 
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); 
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

    mat4.perspective(pMatrix, 45, gl.viewportWidth/gl.viewportHeight, 0.1, 100.0); 
    mat4.identity(mvMatrix); 
    mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); 
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,  
      triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); 
    setMatrixUniforms(); 
    gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); 
    mat4.translate(mvMatrix, mvMatrix, [3.0, 0.0, 0.0]); 
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); 
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
      squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); 
    setMatrixUniforms(); 
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); 
} 

提前感謝！

Answer 1

那些功能（例如initGL）是不是WebGL

部推測它們是在（或者應已通過提及）教程其它功能 - 也許有應包含一個JavaScript庫？看起來initGL也應該設置全局gl變量。

例如，請參見同一站點（我通過搜索「WebGL initGL」找到的）的"initGL"。您需要搜索其他定義（其中是initShaders？）以修補給定的代碼。

Answer 2

與user2864740類似，您提到缺少本教程編寫者創建的一些幫助函數。我建議點擊每個章節頂部附近的「點擊這裏，你會看到活的WebGL版本」並查看源代碼。

看來你缺少以下代碼：

var gl; 
function initGL(canvas) { 
    try { 
     gl = canvas.getContext("experimental-webgl"); 
     gl.viewportWidth = canvas.width; 
     gl.viewportHeight = canvas.height; 
    } catch (e) { 
    } 
    if (!gl) { 
     alert("Could not initialise WebGL, sorry :-("); 
    } 
} 


function getShader(gl, id) { 
    var shaderScript = document.getElementById(id); 
    if (!shaderScript) { 
     return null; 
    } 

    var str = ""; 
    var k = shaderScript.firstChild; 
    while (k) { 
     if (k.nodeType == 3) { 
      str += k.textContent; 
     } 
     k = k.nextSibling; 
    } 

    var shader; 
    if (shaderScript.type == "x-shader/x-fragment") { 
     shader = gl.createShader(gl.FRAGMENT_SHADER); 
    } else if (shaderScript.type == "x-shader/x-vertex") { 
     shader = gl.createShader(gl.VERTEX_SHADER); 
    } else { 
     return null; 
    } 

    gl.shaderSource(shader, str); 
    gl.compileShader(shader); 

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 
     alert(gl.getShaderInfoLog(shader)); 
     return null; 
    } 

    return shader; 
} 


var shaderProgram; 

function initShaders() { 
    var fragmentShader = getShader(gl, "shader-fs"); 
    var vertexShader = getShader(gl, "shader-vs"); 

    shaderProgram = gl.createProgram(); 
    gl.attachShader(shaderProgram, vertexShader); 
    gl.attachShader(shaderProgram, fragmentShader); 
    gl.linkProgram(shaderProgram); 

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { 
     alert("Could not initialise shaders"); 
    } 

    gl.useProgram(shaderProgram); 

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); 
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); 

    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); 
    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); 
} 


var mvMatrix = mat4.create(); 
var pMatrix = mat4.create(); 

function setMatrixUniforms() { 
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); 
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); 
} 

根據您的頁面上的HTML的休息，你也可能會丟失以下腳本標籤：

<script id="shader-fs" type="x-shader/x-fragment"> 
    precision mediump float; 

    void main(void) { 
     gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 
    } 
</script> 

<script id="shader-vs" type="x-shader/x-vertex"> 
    attribute vec3 aVertexPosition; 

    uniform mat4 uMVMatrix; 
    uniform mat4 uPMatrix; 

    void main(void) { 
     gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); 
    } 
</script>