WebGL中的投影纹理映射

Question

我写了两个简单的WebGL演示，它们使用512x512图像作为纹理。但结果不是我想要的。我知道解决方案是使用投影纹理映射（或任何其他解决方案？）但我不知道如何在我的简单演示中实现它。有人可以帮忙吗？

结果如下（两者都不正确）：

演示代码在这里：https://github.com/jiazheng/WebGL-Learning/tree/master/texture

注意：在我的情况下，模型和纹理都无法修改。

Answer 1

为了获得透视正确的纹理贴图，您必须实际使用透视图。也就是说，不是沿着 x 轴缩小多边形的顶部，而是沿 z 轴向后移动，并应用标准透视投影矩阵。

我自己对细节一点朦胧，但我的理解是透视矩阵将 z 坐标映射到 w 坐标的方式是让GPU“正确”沿表面进行插值的关键。

如果您已经有了透视扭曲的2D几何体，那么您将不得不实施一些将其恢复为3D数据的方法，计算适当的 z 值。 WebGL无法获得透视四边形，因为基元是三角形并且三个点中没有足够的信息来定义您正在寻找的纹理映射 - 您的代码必须使用这四个点来计算出相应的深度。不幸的是，我没有足够的掌握数学知识来为你提供详细的建议。

Answer 2

您必须指定vec4纹理坐标而不是vec2。每个vec4中的第4个字段将是同质的w，当分成x和y时，产生所需的坐标。如果您的数字正确，这反过来应该允许硬件中的透视校正部门在三角形内给出非仿射映射。现在，如果您使用投影矩阵在顶点着色器中转换w = 1的vec4，您应该获得正确的vec4数字，以便进行透视校正，进入片段着色器的设置和光栅化。如果不清楚那么你需要在投影中寻找关于投影纹理变换和齐次坐标的教程。