WebGL -如何将向量解构到屏幕空间

Question

我有个奇怪的问题..。它可能与webGL的关系较小，而更多的是与直线的三维几何和矩阵乘法有关。但这就是：

我使用第三方javascript库来执行webGL呈现。使用这个库，我想将3d空间(x，y，z)中的一个点“取消”到HTML画布的2d屏幕空间，在这个空间上呈现场景。

库不提供任何内置的方法来执行此操作.而且不是开源的..。

但是，库提供了两个有用的函数。一个用于检索当前相机的“视图”和“投影”矩阵。另一个用来计算命中点-有点像射线投射。要计算命中点，您需要传入屏幕坐标(Xs，Ys)，如果它击中了一个对象，它将返回3d世界空间点(Xw，Yw，Zw)。

我希望有了这些信息，有人可以帮助我反向工程解决方案，从(Xw，Yw，Zw)到(Xs，Ys) --给出相机矩阵信息。

以下是一些示例数据：

TestPoint =
{
  ScreenCoordinateX: 1098,
  ScreenCoordinateY: 998
}

HitPoint = 
{ 
  WorldCoordinateX: 12082.2,
  WorldCoordinateY: 200.18,
  WorldCoordinateZ: -5848
}

CameraViewMatrix = 
{
  0: -0.817419,  1: -0.130593,    2: 0.561045,    3: 0, 
  4: 0.57542,    5: -0.139804,    6: 0.805821,    7: 0,
  8: -0.0267983, 9: 0.981529,     10: 0.189425,   11: 0,
  12: 7844.46,   13: 6482.28,     14: -17852.8,   15: 1
}

CameraProjectionMatrix = 
{
  0: 1.9222,     1: 0,         2: 0,          3: 0,     
  4: 0,          5: 3.73205,   6: 0,          7: 0,
  8: 0,          9: 0,         10: -1.58869,  11: -1,
  12: 0,         13: 0,        14: -13901.6,  15: 0
}

谢谢您能提供的任何帮助。

Answer 1

项目还是项目？通常，取消项目意味着采取一个屏幕空间的位置(如鼠标)，并将它变成一个三维的位置(就像射线穿过圆顶)。

要将向量投影到屏幕空间，您需要一个viewProjection矩阵。在你的例子中，你只有一个视图和一个投影，所以把它们相乘得到一个viewProjection，然后用这个矩阵乘以你的向量。结果应该是一个4d向量。将xyz部分除以w部分。(注意，有些库已经有一个矩阵*向量函数，除以w)。

现在您将拥有裁剪空间坐标(-1到+1)。缩放屏幕空间

 zeroToOne = (clipSpace + 1) / 2
 screenSpace = zeroToOne * screenDimension 

这里有定位HTML文本以匹配WebGL的示例