WebGL 2D纹理坐标到3D顶点坐标的映射

webgl纹理映射用来把图片贴到模型的材料表面，给模型添加丰富的细节。

该方法的核心是把一张二维的图片映射到三维的坐标空间去，也就是为每一个3d顶点找到其相应的纹理像素。

要想实现这样的目标，显然需要先把3d模型展开为2d的平面，然后才可以和2d贴图建立对等的映射关系。

我们这里以一个最简单的平面来观察这个映射的过程，我们假设webgl的纹理坐标空间为：

左上角为（0，0），顺时针依次为（1，0），（1，1），（0，1），中心点为(0.5,0.5)

而webgl 3d模型坐标空间为x向右，y向上，z垂直指向屏幕外部，坐标范围为(-1,-1,-1)到(1,1,1)，中心点为(0,0,0)。

那么对于一个简单的z为0的垂直平面，uv mapping就是建立类似如下的映射关系：

(0,0) --> (-1,1,0)

(1,0) --> (1,1,0)

(1,1) --> (1,-1,0)

(0,1) --> (-1,-1,0)

其映射关系为 

u = (x - 0.5)*2

v = (0.5 - y)*2

z坐标这里忽略，就很容易从顶点坐标找到uv坐标，然后获取顶点位置所在的像素值。

当然由于分辨率不一致的原因，在建立纹理映射的时候，对于不能刚好映射到的点有一些取值策略，比如最近、线性插值等，

可以参考阅读：纹理基础知识和过滤模式详解