发 送

WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

techbrood 发表于 2016-07-15 22:41:57

标签: webgl, texture, map, mode

- +

我们在纹理滤镜一文中已经说明了2个重要的纹理参数，用来定义对象缩放时纹理的处理方式：

GL_TEXTURE_MIN_FILTER

GL_TEXTURE_MAG_FILTER

本文讲解其余几个纹理参数，定义如何将纹理图像的像素点映射到模型网孔上。

这可以分为两步来完成：

定义UV坐标

UV Mapping指将Bitmap的像素映射到Mesh上的顶点。UV坐标定义为左上角（0，0），右下角（1，1）（因为使用的2D Texture)，下图坐标显示了UV坐标，右边为我们需要染色的平面的顶点顺序：

为了能正确的匹配，需要把UV坐标中的（0，1）映射到顶点0，（1，1）映射到顶点2等等。

1
2
3
4
float textureCoordinates[] = {0.0f, 1.0f,
 1.0f, 1.0f,
 0.0f, 0.0f,
 1.0f, 0.0f };

如果使用如下小于1的坐标定义：

1
2
3
4
float textureCoordinates[] = {0.0f, 0.5f,
 0.5f, 0.5f,
 0.0f, 0.0f,
 0.5f, 0.0f };

纹理将映射到平面的左上角部分。

而如下大于1的坐标值：

1
2
3
4
float textureCoordinates[] = {0.0f, 2.0f,
 2.0f, 2.0f,
 0.0f, 0.0f,
 2.0f, 0.0f };

将使用一些不存在的纹理去渲染平面(UV坐标为0，0-1，1 而 (0,0)-(2,2)定义超过UV定义的大小），

这时需要告诉WebGL库如何去渲染这些不存在的部分。

有两种设置：

  • GL_REPEAT 重复纹理绘制。

  • GL_CLAMP_TO_EDGE 只靠边线绘制一次。

下面是WRAP_S（对应于u坐标）和WRAP_T（对应于v）四种不同组合的示意图，很直观的说明不同取值的差异：

参考阅读：

http://gamedev.stackexchange.com/questions/62548/what-does-changing-gl-texture-wrap-s-t-do


possitive(6) views16888 comments0

发送私信

发送

最新评论

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