如何使用DartVectorMath創建透視矩陣？

Question

我在學習WebGL網站並移植他們的代碼。

var pMatrix = createPerspectiveMatrix4(45.0, canvas.width/canvas.height, 0.1, 100.0); 

我應該createPerspectiveMatrix4是：我碰到一個行的代碼，我想生產出DartVectorMath圖書館來的？

我已經嘗試了各種不同的事情，這是最後一個我想：

var zNear = 0.1; 
    var zFar = 10000; 
    double yTop = Math.tan(45.0 * Math.PI/180.0/2.0) * zNear; 
    double xRight = canvas.width/canvas.height * yTop; 
    double zDepth = zFar - zNear; 

    var row1 = new vec4(zNear/xRight, 0.0, 0.0, 0.0); 
    var row2 = new vec4(0.0, zNear/yTop, 0.0, 0.0); 
    var row3 = new vec4(0.0, 0.0, -(zFar + zNear)/zDepth, -(2 * zNear * zFar)/zDepth); 
    var row4 = new vec4(0.0, 0.0, -1.0, 0.0); 

    var pMatrix = new mat4(row1, row2, row3, row4); 

我根本什麼也看不見呈現在屏幕上。

完整的源代碼如下：

import 'dart:html'; 
import 'dart:math' as Math; 
import 'package:vector_math/vector_math_browser.dart'; 

main() { 
    var canvas = query('#back-buffer'); 
    WebGLRenderingContext gl = canvas.getContext('experimental-webgl'); 
    gl.viewport(0, 0, canvas.width, canvas.height); 

    gl.clearColor(0.0, 0.0, 0.0, 1.0); 
    gl.enable(WebGLRenderingContext.DEPTH_TEST); 

    // VERTEX SHADER. 
    var vertexShader = gl.createShader(WebGLRenderingContext.VERTEX_SHADER); 
    gl.shaderSource(vertexShader, """attribute vec3 aVertexPosition; 

uniform mat4 uMVMatrix; 
uniform mat4 uPMatrix; 

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

    gl.compileShader(vertexShader); 

    // FRAGMENT SHADER. 
    var fragmentShader = gl.createShader(WebGLRenderingContext.FRAGMENT_SHADER); 
    gl.shaderSource(fragmentShader, """precision mediump float; 

void main(void) { 
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 
}"""); 

    gl.compileShader(fragmentShader); 

    WebGLProgram shaderProgram = gl.createProgram(); 
    gl.attachShader(shaderProgram, vertexShader); 
    gl.attachShader(shaderProgram, fragmentShader); 
    gl.linkProgram(shaderProgram); 
    gl.useProgram(shaderProgram); 

    int vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); 
    gl.enableVertexAttribArray(vertexPositionAttribute); 

    WebGLUniformLocation pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); 
    WebGLUniformLocation mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); 

// init buffers 
    WebGLBuffer triangleVertexPositionBuffer = gl.createBuffer(); 
    gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, triangleVertexPositionBuffer); 
    var vertices = [ 
        0.0, 1.0, 0.0, 
        -1.0, -1.0, 0.0, 
        1.0, -1.0, 0.0 
        ]; 
    Float32Array floa = new Float32Array.fromList(vertices); 
    gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER, floa, WebGLRenderingContext.STATIC_DRAW); 

    gl.enable(WebGLRenderingContext.DEPTH_TEST); 

    // draw scene 
    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(1.0, 0.0, 0.0, 1.0); 
    gl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT | WebGLRenderingContext.DEPTH_BUFFER_BIT); 


    var zNear = 0.1; 
    var zFar = 10000; 
    double yTop = Math.tan(45.0 * Math.PI/180.0/2.0) * zNear; 
    double xRight = canvas.width/canvas.height * yTop; 
    double zDepth = zFar - zNear; 

    var row1 = new vec4(zNear/xRight, 0.0, 0.0, 0.0); 
    var row2 = new vec4(0.0, zNear/yTop, 0.0, 0.0); 
    var row3 = new vec4(0.0, 0.0, -(zFar + zNear)/zDepth, -(2 * zNear * zFar)/zDepth); 
    var row4 = new vec4(0.0, 0.0, -1.0, 0.0); 

    var pMatrix = new mat4(row1, row2, row3, row4); 

    var mvMatrix = new mat4.translation(new vec3(-1.5, 0.0, -7.0)); 

    gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, triangleVertexPositionBuffer); 
    gl.vertexAttribPointer(vertexPositionAttribute, 3, WebGLRenderingContext.FLOAT, false, 0, 0); 
    gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix.copyAsArray()); 
    gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix.copyAsArray()); 
    gl.drawArrays(WebGLRenderingContext.TRIANGLES, 0, 3); 

} 

所以，我怎麼創造DartVectorMath觀點？

Answer 1

請參閱makePerspective發現於src/common/opengl.dart。