学习之路系列
这两天在看<<OpenGL ES 应用开发实践指南 iOS卷>>这本书的时候,看到书里面讲纹理过滤模式
和纹理循环模式
的时候,给出了一个例子,感觉挺好的在这里给大家讲一下
本篇主要内容
纹理过滤模式
纹理循环模式
效果图
纹理循环模式
该模式用于指定纹理坐标超出[0 ~ 1]
范围时所处理的方式.
/* TextureWrapMode */
define GL_REPEAT 0x2901
define GL_CLAMP_TO_EDGE 0x812F
define GL_MIRRORED_REPEAT 0x8370
系统给定了这三种模式, 默认是使用`GL_REPEAT `模式
![](http://upload-images.jianshu.io/upload_images/1366641-e912a468dde83fd0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
我们先渲染下这张图片, 还不会纹理渲染的小伙伴可以参考[上一篇](http://www.jianshu.com/p/105bf9e05e6a)文章
######调整片段着色器
为了更直观的看书效果,我将原本顶点片段着色器的
gl_FragColor = texture2D(ourTexture, TexCoordOut);
修改成
gl_FragColor = texture2D(ourTexture, TexCoordOut * 3.0 - 1.0);
这样子的话就可以直接让纹理坐标超出`0~1`的范围
######纹理循环模式
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
设置`纹理循环模式`使用到的是这个方法, 上篇文章`渲染纹理`的时候也用到了这个函数, `纹理循环模式`里的第二个参数表示的是坐标轴`S、T、R`, 跟`X、Y、Z`轴对是等价的. 所以说我们可以单独的设置`S、T、R`轴
``GL_REPEAT`` 当超出纹理坐标时, 会重复纹理图像
`GL_MIRRORED_REPEAT` 当超出纹理坐标时, 会重复纹理图像, 但是是镜像显示
`GL_CLAMP_TO_EDGE` 当超出纹理坐标时, 会重复纹理坐标边缘的像素, 像是拉伸的感觉
![](http://upload-images.jianshu.io/upload_images/1366641-97f93a0bf34778cd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
######纹理过滤模式
/* TextureMagFilter */
define GL_NEAREST 0x2600
define GL_LINEAR 0x2601
/* TextureMinFilter /
/ GL_NEAREST /
/ GL_LINEAR */
define GL_NEAREST_MIPMAP_NEAREST 0x2700
define GL_LINEAR_MIPMAP_NEAREST 0x2701
define GL_NEAREST_MIPMAP_LINEAR 0x2702
define GL_LINEAR_MIPMAP_LINEAR 0x2703
在上面的代码中能看到有两种过滤器, 分别是`MagFilter`和`MinFilter` 过滤器
GL_NEAREST_MIPMAP_NEAREST
GL_LINEAR_MIPMAP_NEAREST
GL_NEAREST_MIPMAP_LINEAR
GL_LINEAR_MIPMAP_LINEAR
上面这4个还没玩过~(>_<)~
看下下面那张图,对`GL_NEAREST`和`GL_LINEAR `的解释。
>![](http://upload-images.jianshu.io/upload_images/1366641-9c886ab8516765ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
摘自[LearnOpenGL](https://learnopengl-cn.github.io/01%20Getting%20started/06%20Textures/)
![](http://upload-images.jianshu.io/upload_images/1366641-08aa9a95c73656a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
两种效果如上图, `GL_LINEAR`看起来更平滑一点.
每个人的喜好不一样, 萝卜青菜各有所爱O(∩_∩)O,
#####我把全部搞在一起看下效果
![](http://upload-images.jianshu.io/upload_images/1366641-c26e8a4ff9e904e2.gif?imageMogr2/auto-orient/strip)
>###拓展
在搜索资料的时候不小心看到了这个[算法](http://www.geeks3d.com/20140213/glsl-shader-library-fish-eye-and-dome-and-barrel-distortion-post-processing-filters/), 然后在写篇文章的时候顺便弄上来给大家瞧瞧, 这个鱼眼的效果还挺不错的, 应该有些童鞋能用得上
![](http://upload-images.jianshu.io/upload_images/1366641-3e594f47e04916f3.gif?imageMogr2/auto-orient/strip)
[算法链接](http://www.geeks3d.com/20140213/glsl-shader-library-fish-eye-and-dome-and-barrel-distortion-post-processing-filters/)
####在这里献上[Demo](https://github.com/Justin910/LearnOpenGLES)
#结语
相信进过这两篇纹理的文章以后,大家应该能对纹理有一点点了解了吧.
***
后面如果还看到有好玩的东西就一起搞出来分享给大家
***