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

iefreer 发表于 2019-09-12 20:24:55

标签: webgl, texture, mapping, 纹理映射, 坐标空间

- +

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就是建立类似如下的映射关系:

uv1.png

(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坐标,然后获取顶点位置所在的像素值。

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

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


possitive(0) negative(0) views98 comments1
私信 收藏 分享
分享到

发送私信

最新评论

iefreer 2019-09-12 20:26:21

https://discoverthreejs.com/book/first-steps/textures-intro/


请先 登录 再评论.
相关文章