webgl добавление проекции не отображает объект

Question

Я просматриваю web gl и пытаюсь отобразить куб, но у меня проблема, когда я пытаюсь добавить проекцию в шейдер вершин. Я добавил атрибут, но когда я использую его для множественного просмотра модели и положения, он перестает отображать куб. Я не уверен, почему и задавался вопросом, может ли кто-нибудь помочь? Ive пытался смотреть на несколько примеров, но просто не могу получить эту работу

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 соответственно. Это означает, что для того, чтобы все фрагменты были видимыми, они должны падать в диапазоне z [1, 10]. Вы кубик - 1 единица на каждую сторону, с центром (0, 0, 0), и вы перемещаете ее «назад» с камеры 1. Это означает, что ближайшая сторона к камере будет фактически равна 0,5 Z, которая находится за пределами диапазона отсечения и, следовательно, отбрасывается. Около половины вашего куба будет в z> 1, но вы будете смотреть на внутреннюю часть куба в этот момент. Если вы включили обратную обработку, вы ничего не увидите.

Короткий рассказ - ваш куб, вероятно, слишком близко к камере. Попробуйте вместо этого:

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