- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在查看 Learning WebGL 网站并移植他们的代码。我遇到了我想用 DartVectorMath 生成的一行代码图书馆:
var pMatrix = createPerspectiveMatrix4(45.0, canvas.width/canvas.height, 0.1, 100.0);
createPerspectiveMatrix4
应该是什么?
我尝试过各种不同的东西,这是我最后一次尝试:
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 中创建透视图?
最佳答案
请参阅 src/common/opengl.dart
中的 makePerspective
。
关于webgl - 如何使用 DartVectorMath 创建透视矩阵?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13673529/
假设我有两个矩阵,每个矩阵有两列和不同的行数。我想检查并查看一个矩阵的哪些对在另一个矩阵中。如果这些是一维的,我通常只会做 a %in% x得到我的结果。 match似乎只适用于向量。 > a
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 9 个月前。 Improv
我只处理过 DirectX 矩阵 我读过一些文章,说不能将 DirectX 矩阵数学库用于 openGL 矩阵。 但我也读过,如果你的数学是一致的,你可以获得类似的结果。那只会让我更加困惑。 任何人都
我编写了一个C++代码来解决线性系统A.x = b,其中A是一个对称矩阵,方法是首先使用LAPACK(E)对角矩阵A = V.D.V^T(因为以后需要特征值),然后求解x = A^-1.b = V^T
我遇到了问题。我想创建二维数组 rows=3 cols=2我的代码如下 int **ptr; int row=3; int col=2; ptr=new int *[col]; for (int i=
我有一个 3d mxnxt 矩阵,我希望能够提取 t 2d nxm 矩阵。在我的例子中,我有一个 1024x1024x10 矩阵,我想要 10 张图像显示给我。 这不是 reshape ,我每次只需要
我在 MATLAB 中有一个 3d 矩阵 (n-by-m-by-t) 表示一段时间内网格中的 n-by-m 测量值.我想要一个二维矩阵,其中空间信息消失了,只剩下 n*m 随着时间 t 的测量值(即:
作为一个简化的示例,我有一个 3D numpy 矩阵,如下所示: a = np.array([[[1,2], [4,np.nan], [7,
作为一个简化的示例,我有一个 3D numpy 矩阵,如下所示: a = np.array([[[1,2], [4,np.nan], [7,
使用 eigen2 , 并给定一个矩阵 A a_0_0, a_0_1, a_0_2, ... a_1_0, a_1_0, a_1_2, ... ... 和一个矩阵B: b_0_0, b_0_1, b_
我想知道如何获得下面的布局。 在中型和大型设备上,我希望有 2 行和 2 列的布局(2 x 2 矩阵)。 在小型(和超小型)设备上或调整为小型设备时,我想要一个 4 行和 1 列的矩阵。 我将通过 a
有什么方法可以向量化以下内容: for i = 1:6 te = k(:,:,:,i).*(c(i)); end 我正在尝试将 4D 矩阵 k 乘以向量 c,方法是将其
如何从填充有 1 和 0 的矩阵中抽取 n 个随机点的样本? a=rep(0:1,5) b=rep(0,10) c=rep(1,10) dataset=matrix(cbind(a,b,c),nrow
我正在尝试创建一个包含 X 个 X 的矩阵。以下代码生成从左上角到右下角的 X 对 Angular 线,而不是从右上角到左下角的 X 对 Angular 线。我不确定从哪里开始。是否应该使用新变量创建
我想在 python 中创建一个每行三列的矩阵,并能够通过任何一行对它们进行索引。矩阵中的每个值都是唯一的。 据我所知,我可以设置如下矩阵: matrix = [["username", "name"
我有点迷茫 我创建了一个名为 person 的类,它具有 age 和 name 属性(以及 get set 方法)。然后在另一个类中,我想创建一个 persons 数组,其中每个人都有不同的年龄和姓名
我有 n 个类,它们要么堆叠,要么不堆叠。所有这些类都扩展了同一个类 (CellObject)。我知道更多类将添加到此列表中,我想创建一种易于在一个地方操纵“可堆叠性”的方法。 我正在考虑创建一个矩阵
我有一个包含 x 个字符串名称及其关联 ID 的文件。本质上是两列数据。 我想要的是一个格式为 x x x 的相关样式表(将相关数据同时作为 x 轴和 y 轴),但我想要 fuzzywuzzy 库的函
机器学习与传统编程的一个重要区别在于机器学习比传统编程涉及了更多的数学知识。不过,随着机器学习的飞速发展,各种框架应运而生,在数据分析等应用中使用机器学习时,使用现成的库和框架成为常态,似乎越来越不需
当我在 julia 中输入这个错误跳转但我不知道为什么,它应该工作。/ julia> A = [1 2 3 4; 5 6 7 8; 1 2 3 4; 5 6 7 8] 4×4 Array{Int64,
我是一名优秀的程序员,十分优秀!