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