透视投影（使用GL-矩阵）表示什么都没有，但没有它示出了细

Question

我有以下JavaScript代码：正确

// convenience function. 
function v(x, y, z){ 
    var v = vec3.create(); 
    vec3.set(v, x, y, z); 
    return v; 
} 

window.onload = function() { 
    gl = get_gl('c', {antialias: true}) 
    var vert_shader = make_vertex_shader(gl, 
     ` 
     in vec3 a_pos; 
     uniform mat4 u_transform; 
     uniform mat4 u_camera; 
     uniform mat4 u_projection; 
     void main(){ 
      gl_Position = vec4(a_pos.xyz, 1) * u_transform * u_camera * u_projection; 
     } 
     `); 
    var frag_shader = make_fragment_shader(gl, 
     ` 
     uniform vec4 u_color; 
     out vec4 frag_color; 
     void main(){ 
      frag_color = u_color; 
     } 
     `) 
    var program = make_program(gl, vert_shader, frag_shader); 
    // Triangle 
    var points = [1, 0, 0, 
       -1, 0, 0, 
       0, 1, 0] 
    var pos_buffer = gl.createBuffer() 
    gl.bindBuffer(gl.ARRAY_BUFFER, pos_buffer) 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW) 

    // ---------- create a transform matrix.. 
    var point_transform = mat4.create(); 
    mat4.scale(point_transform, point_transform, v(0.5, 1, 1)) 

    // ---------- create a camera matrix 
    var camera = mat4.create(); 
    mat4.lookAt(camera, v(0, 0, 10), v(0, 0, 0), v(0, 1, 0)) 

    // ---------- create a projection matrix 
    var proj = mat4.create(); 
    var c = document.querySelector('#c') 
    mat4.perspective(proj, 0.5, c.width/c.height, 1, 1000) 

    // ---------- set attribs 
    var attrib_location = gl.getAttribLocation(program, "a_pos") 
    gl.vertexAttribPointer(attrib_location, 3, gl.FLOAT, false, 0, 0) 

    // ---------- set uniforms 
    gl.useProgram(program) 
    var color_location = gl.getUniformLocation(program, "u_color") 
    gl.uniform4fv(color_location, new Float32Array([0.9, 0.9, 0.8, 1])) 
    var transform_location = gl.getUniformLocation(program, "u_transform") 
    gl.uniformMatrix4fv(transform_location, false, point_transform) 
    var camera_location = gl.getUniformLocation(program, "u_camera") 
    gl.uniformMatrix4fv(camera_location, false, camera) 
    var proj_location = gl.getUniformLocation(program, "u_projection") 
    gl.uniformMatrix4fv(proj_location, false, mat4.identity(mat4.create())) 

    // ---------- setup pre drawing 
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height) 
    gl.clearColor(0, 0, 0, 0) 
    gl.clear(gl.COLOR_BUFFER_BIT) 

    // ---------- do the drawing 
    gl.enableVertexAttribArray(attrib_location) 
    gl.drawArrays(gl.TRIANGLES, 0, 3) 

} 

此输出屏幕上的三角形作为预期：

画布的屏幕截图

注意我在这里实际上并没有使用透视矩阵进行任何乘法运算。我只是传递一个身份矩阵来表明它在没有它的情况下正常工作。

现在，当我改变行：

gl.uniformMatrix4fv(proj_location, false, mat4.identity(mat4.create())) 

到：

gl.uniformMatrix4fv(proj_location, false, proj) 

我得到一个空白的画布。

我在网上查看了帖子，尝试了一些建议，比如反转Z.并且用远近的飞机等弄乱等等。但它总是空输出。

视角矩阵有什么问题？即在这里：

mat4.perspective(proj, 0.5, c.width/c.height, 1, 1000) 

注：我使用gl-matrix的MAT4和VEC3模块的矩阵运算。

Answer 1

在顶点着色器，你必须改变行：

gl_Position = vec4(a_pos.xyz, 1) * u_transform * u_camera * u_projection; 

到

gl_Position = u_projection * u_camera * u_transform * vec4(a_pos.xyz, 1); 

因为，向量和矩阵之间GLSL操作不交换。

参见Khronos GLSL ES Specification (chapter 5.10 Vector and Matrix Operations)这清楚地表示：

是矩阵乘以矢量，矢量乘以矩阵，和矩阵乘以矩阵的异常。这些并 不操作逐个分量，而是执行正确的线性代数乘法

vec3 v, u;
mat3 m;
u = v * m;

相当于

u.x = dot(v, m[0]); // m[0] is the left column of m
u.y = dot(v, m[1]); // dot(a,b) is the inner (dot) product of a and b
u.z = dot(v, m[2]);

而且

u = m * v;

相当于

u.x = m[0].x * v.x + m[1].x * v.y + m[2].x * v.z;
u.y = m[0].y * v.x + m[1].y * v.y + m[2].y * v.z;
u.z = m[0].z * v.x + m[1].z * v.y + m[2].z * v.z;

参见

• GLSL Programming/Vector and Matrix Operations
• GLSL Programming/Applying Matrix Transformations