webgl添加投影不顯示對象

Question

我正在看網絡gl，並試圖渲染一個立方體，但我有一個問題，當我嘗試將投影添加到頂點着色器。我添加了一個屬性，但是當我使用它來多重模型視圖和位置時，它將停止顯示多維數據集。我不知道爲什麼，想知道是否有人可以幫忙？香港專業教育學院試圖尋找幾個例子，但都無法得到這個工作

vertex shader 
    attribute vec3 aVertexPosition; 

    uniform mat4 uMVMatrix; 
    uniform mat4 uPMatrix; 

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

fragment shader 
    #ifdef GL_ES 
    precision highp float; // Not sure why this is required, need to google it 
    #endif 

    uniform vec4 uColor; 

    void main() { 
      gl_FragColor = uColor; 
    } 


    function init() { 

     // Get a reference to our drawing surface 
     canvas = document.getElementById("webglSurface"); 
     gl = canvas.getContext("experimental-webgl"); 

     /** Create our simple program **/ 
     // Get our shaders 
     var v = document.getElementById("vertexShader").firstChild.nodeValue; 
     var f = document.getElementById("fragmentShader").firstChild.nodeValue; 

     // Compile vertex shader 
     var vs = gl.createShader(gl.VERTEX_SHADER); 
     gl.shaderSource(vs, v); 
     gl.compileShader(vs); 

     // Compile fragment shader 
     var fs = gl.createShader(gl.FRAGMENT_SHADER); 
     gl.shaderSource(fs, f); 
     gl.compileShader(fs); 

     // Create program and attach shaders 
     program = gl.createProgram(); 
     gl.attachShader(program, vs); 
     gl.attachShader(program, fs); 
     gl.linkProgram(program); 

     // Some debug code to check for shader compile errors and log them to console 
     if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) 
      console.log(gl.getShaderInfoLog(vs)); 

     if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) 
       console.log(gl.getShaderInfoLog(fs)); 

     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 
       console.log(gl.getProgramInfoLog(program)); 


     /* Create some simple VBOs*/ 
     // Vertices for a cube 
     var vertices = new Float32Array([ 
      -0.5, 0.5, 0.5, // 0 
      -0.5, -0.5, 0.5, // 1 
      0.5, 0.5, 0.5, // 2 
      0.5, -0.5, 0.5, // 3 
      -0.5, 0.5, -0.5, // 4 
      -0.5, -0.5, -0.5, // 5 
      -0.5, 0.5, -0.5, // 6 
      -0.5,-0.5, -0.5 // 7 
     ]); 

     // Indices of the cube 
     var indicies = new Int16Array([ 
      0, 1, 2, 1, 2, 3, // front 
      5, 4, 6, 5, 6, 7, // back 
      0, 1, 5, 0, 5, 4, // left 
      2, 3, 6, 6, 3, 7, // right 
      0, 4, 2, 4, 2, 6, // top 
      5, 3, 1, 5, 3, 7 // bottom 
     ]); 

     // create vertices object on the GPU 
     vbo = gl.createBuffer(); 
     gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 
     gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 

     // Create indicies object on th GPU 
     ibo = gl.createBuffer(); 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); 
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indicies, gl.STATIC_DRAW); 

     gl.clearColor(0.0, 0.0, 0.0, 1.0); 
     gl.enable(gl.DEPTH_TEST); 
     // Render scene every 33 milliseconds 
     setInterval(render, 33); 

    } 

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

    function render() { 

     // Set our viewport and clear it before we render 
     gl.viewport(0, 0, canvas.width, canvas.height); 
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

     gl.useProgram(program); 

     // Bind appropriate VBOs 
     gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); 

     // Set the color for the fragment shader 
     program.uColor = gl.getUniformLocation(program, "uColor"); 
     gl.uniform4fv(program.uColor, [0.3, 0.3, 0.3, 1.0]); 

     // 
     // code.google.com/p/glmatrix/wiki/Usage 

     program.uPMatrix = gl.getUniformLocation(program, "uPMatrix"); 
     program.uMVMatrix = gl.getUniformLocation(program, "uMVMatrix"); 

     mat4.perspective(45, gl.viewportWidth/gl.viewportHeight, 1.0, 10.0, pMatrix); 

     mat4.identity(mvMatrix); 

     mat4.translate(mvMatrix, [0.0, -0.25, -1.0]); 

     gl.uniformMatrix4fv(program.uPMatrix, false, pMatrix); 
     gl.uniformMatrix4fv(program.uMVMatrix, false, mvMatrix); 


     // Set the position for the vertex shader 
     program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); 
     gl.enableVertexAttribArray(program.aVertexPosition); 

     gl.vertexAttribPointer(program.aVertexPosition, 3, gl.FLOAT, false, 3*4, 0); // position 

     // Render the Object   
     gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); 
    } 

預先感謝任何幫助

Answer 1

問題是在這裏：

..., gl.viewportWidth/gl.viewportHeight, ... 

兩個gl.viewportWidth和gl.viewportHeight是不確定的值。

我想你錯過了這兩條線：

gl.viewportWidth = canvas.width; 
gl.viewportHeight = canvas.height; 

---

你會看到很多人這樣做：

canvas.width = canvas.clientWidth; 
canvas.height = canvas.clientHeight; 

gl.viewportWidth = canvas.width; 
gl.viewportHeight = canvas.height; 

但請注意，WebGL的背景下也有這個兩attributes ：

gl.drawingBufferWidth 
gl.drawingBufferHeight 

Answer 2

所以你的立方體顯示了沒有投影矩陣，正確嗎？

乍一看，我認爲你可能會用近平面剪去幾何圖形。你提供了一個遠近平面的函數，分別爲1.0和10.0。這意味着對於任何碎片都是可見的，它們必須落在[1,10]的z範圍內。你的立方體每側有1個單位，以（0,0,0）爲中心，並且你正在將它從攝像機1單元「移回」。這意味着與攝像機最近的面將實際位於0.5 Z，這在裁剪範圍之外並因此被丟棄。大約一半的立方體將在z> 1處，但是在那時您將看到立方體的內部。如果你打開背面剔除，你將看不到任何東西。

長話短說 - 您的立方體可能太靠近相機。試試這個：

mat4.translate(mvMatrix, [0.0, -0.25, -3.0]);