我编写了两个使用 512x512 图像作为纹理的简单 WebGL 演示。但结果不是我想要的。我知道解决方案是使用投影纹理映射（或任何其他解决方案？），但我不知道如何在我的简单演示中实现它。有人可以帮忙吗？
结果如下（均不正确）：
演示代码在这里：https://github.com/jiazheng/WebGL-Learning/tree/master/texture
注意：在我的情况下，模型和纹理都无法修改。
【问题讨论】：
标签： webgl texture-mapping
为了获得透视正确的纹理映射，您必须实际使用透视。也就是说，不是沿着 x 轴缩小多边形的顶部，而是沿着 z 轴向后移动它，并应用标准透视投影矩阵。
我自己对细节有点模糊，但我的理解是透视矩阵将z坐标映射到w坐标的方式 是让 GPU “正确”沿曲面进行插值的关键。
如果您已经拥有透视扭曲的 2D 几何图形，那么您将必须实施某种方法将其恢复为 3D 数据，计算适当的 z 值。在 WebGL 中无法获得透视四边形，因为基元是 三角形，并且三点中没有足够的信息来明确定义您正在寻找的纹理映射 - 您的代码必须使用四点算出相应的深度。不幸的是，我没有足够的数学知识来告诉你细节。
【讨论】：
您必须指定 vec4 纹理坐标而不是 vec2。每个 vec4 中的第 4 个字段将是同质的 w ，当分为 x 和 y 时会产生您想要的坐标。如果您的数字正确，这反过来应该允许硬件中的透视校正划分为您提供三角形内的非仿射映射。现在，如果您使用投影矩阵在顶点着色器中转换 w=1 的 vec4，您应该准备好正确的 vec4 数字，以便在片段着色器的设置和光栅化中进行透视校正。如果不清楚，则需要查找有关投影纹理变换和投影中的齐次坐标的教程。
【讨论】：