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(1) views14798 comments0

发送私信

最新评论

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