WebGL 中的投影纹理映射 [英] Projective texture mapping in WebGL

问题描述

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

I wrote two simple WebGL demos which use a 512x512 image as texture. But the result is not what I want. I know the solution is to use projective texture mapping(or any other solutions?) but I have no idea how to implement it in my simple demos. Anyone can help?

结果如下(两者都不正确):

The results are as follows(both of them are incorrect):

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

注意:就我而言，模型和纹理都无法修改.

note: Both the model and texture could not be modified in my case.

推荐答案

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

In order to get perspective-correct texture mapping, you must actually be using perspective. That is, instead of narrowing the top of your polygon along the x axis, move it backwards along the z axis, and apply a standard perspective projection matrix.

我自己对细节有点模糊，但我的理解是透视矩阵将z坐标映射到w坐标的方式 是让 GPU 沿着表面正确"进行插值的关键.

I'm a little hazy on the details myself, but my understanding is that the way the perspective matrix maps the z coordinate into the w coordinate is the key to getting the GPU to interpolate along the surface "correctly".

如果您已经有透视扭曲的 2D 几何体，那么您将必须实施某种方法将其恢复为 3D 数据，计算适当的 z 值.在 WebGL 中无法获得透视四边形，因为图元是三角形，并且三个点中没有足够的信息来明确定义您正在寻找的纹理映射——您的代码必须使用四点算出对应的深度.不幸的是，我对数学的掌握不够充分，无法就细节向您提供建议.

If you have already-perspective-warped 2D geometry, then you will have to implement some method of restoring it to 3D data, computing appropriate z values. There is no way in WebGL to get a perspective quadrilateral, because the primitives are triangles and there is not enough information in three points to define the texture mapping you're looking for unambiguously — your code must use the four points to work out the corresponding depths. Unfortunately, I don't have enough grasp of the math to advise you on the details.

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