gpt4 book ai didi

javascript - WebGL 透视投影矩阵

转载 作者:行者123 更新时间:2023-11-29 19:26:38 26 4
gpt4 key购买 nike

谁能告诉我 javascript/webGL 中的一个函数,它将 3d 坐标转换为 2d 投影透视坐标?谢谢

最佳答案

这是一个非常典型的透视矩阵函数

  function perspective(fieldOfViewYInRadians, aspect, zNear, zFar, dst) {
dst = dst || new Float32Array(16);

var f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewYInRadians);
var rangeInv = 1.0 / (zNear - zFar);

dst[0] = f / aspect;
dst[1] = 0;
dst[2] = 0;
dst[3] = 0;

dst[4] = 0;
dst[5] = f;
dst[6] = 0;
dst[7] = 0;

dst[8] = 0;
dst[9] = 0;
dst[10] = (zNear + zFar) * rangeInv;
dst[11] = -1;

dst[12] = 0;
dst[13] = 0;
dst[14] = zNear * zFar * rangeInv * 2;
dst[15] = 0;

return dst;
}

如果你有这样的顶点着色器

attribute vec4 a_position;
uniform mat4 u_matrix;
void main() {
gl_Position = u_matrix * a_position;
}

您将在 WebGL 中获得二维投影坐标。如果实际上想要在 JavaScript 中以像素为单位的坐标,则需要除以 w 并扩展为像素

var transformPoint = function(m, v) {
var x = v[0];
var y = v[1];
var z = v[2];
var w = x * m[0*4+3] + y * m[1*4+3] + z * m[2*4+3] + m[3*4+3];
return [(x * m[0*4+0] + y * m[1*4+0] + z * m[2*4+0] + m[3*4+0]) / w,
(x * m[0*4+1] + y * m[1*4+1] + z * m[2*4+1] + m[3*4+1]) / w,
(x * m[0*4+2] + y * m[1*4+2] + z * m[2*4+2] + m[3*4+2]) / w];
};

var somePoint = [20,30,40];
var projectedPoint = transformPoint(projectionMatrix, somePoint);

var screenX = (projectedPoint[0] * 0.5 + 0.5) * canvas.width;
var screenZ = (projectedPoint[1] * -0.5 + 0.5) * canvas.height;

more here

关于javascript - WebGL 透视投影矩阵,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30429523/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com