透視投影は何も示していないが、それは微細

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

、あなたは行を変更する必要があります：行列とベクトルの間のGLSL操作が可換はない、ので

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

に

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

を。

はっきり言った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;

も参照してください

gl_Position = u_projection * u_camera * u_transform * vec4 `へ
• GLSL Programming/Vector and Matrix Operations
• GLSL Programming/Applying Matrix Transformations