WebGL 透视投影矩阵 [英] WebGL Perspective Projection Matrix

问题描述

有人可以在 javascript/webGL 中向我展示一个将 3d 坐标更改为 2d 投影透视坐标的函数吗?谢谢

Can someone show me a function in javascript/webGL that will change 3d coordinates into 2d projected perspective coordinates? Thnx

推荐答案

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

Here's a pretty typical perspective matrix function

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

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

If you have a vertex shader like this

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

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

You'll get 2d projected coordinates in WebGL. If actually want those coordinates in pixels in say JavaScript you need to divide by w and the expand to pixels

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;

更多信息

这篇关于WebGL 透视投影矩阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！