有人可以向我展示 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 中获得 2d 投影坐标。如果实际上想要在 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;
关于javascript - WebGL 透视投影矩阵,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30429523/