当前位置: 动力学知识库 > 问答 > 编程问答 >

webgl - How to create perspective Matrix with DartVectorMath?

问题描述:

I'm looking at Learning WebGL website and porting their code. I came across a line of code that I'd like to produce with DartVectorMath library:

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

What should createPerspectiveMatrix4 be?

I've tried various different things and this is the last one I tried:

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

I simply see nothing rendered on the screen.

The full source is as follows:

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

}

So, how do I create perspectives in DartVectorMath?

网友答案:

See makePerspective found in src/common/opengl.dart.

分享给朋友:
您可能感兴趣的文章:
随机阅读: