WebGL透视投影矩阵

WebGL Perspective Projection Matrix

本文关键字：透视投影 WebGL      更新时间：2023-09-26

有人能告诉我一个函数在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;

这里

假设这个点是世界坐标，你的相机有一个世界矩阵和一个投影矩阵，这就简单多了:

function point3d_to_screen(point, cameraWorldMatrix, projMatrix, screenWidth, screenHeight) {
  var mat, p, x, y;
  p = [point[0], point[1], point[2], 1];
  mat = mat4.create();
  mat4.invert(mat, cameraWorldMatrix);
  mat4.mul(mat, projMatrix, mat);
  vec4.transformMat4(p, p, mat);
  x = (p[0] / p[3] + 1) * 0.5 * screenWidth;
  y = (1 - p[1] / p[3]) * 0.5 * screenHeight;
  return [x, y];
}

我在这个函数中使用gl-matrix

相关文章：