Question

我有一个古怪的问题......它可能与webGL关系不大，更多的是与直接的3D几何和矩阵乘法有关......但是这里有：

我使用第三方javascript库来执行webGL渲染。使用这个库，我想“取消项目”。 3d空间（x，y，z）中的一个点，指向渲染场景的HTML画布的第二个屏幕空间。

该库没有提供任何内置方法来执行此操作......并且它不是开源的......

但是，库提供了两个有用的功能。一个用于检索＆＃39;视图＆＃39;和＆＃39;投影＆＃39;当前相机的矩阵。另一个用于计算生命值 - 有点像射线投射。要计算生命值，请传入屏幕坐标（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

取消项目或项目？通常，unproject意味着占据屏幕空间位置（如鼠标）并将其转换为3d位置（就像穿过平截头体的光线一样）。

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

您现在将拥有剪辑空间坐标（-1到+1）。缩放到屏幕空间

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

There's examples here for positioning HTML text to match WebGL

WebGL - 如何将矢量取消投影到屏幕空间

1 个答案: