学习之路系列
OpenGLES学习之路
这两天在看<纹理过滤模式
和纹理循环模式
的时候,给出了一个例子,感觉挺好的在这里给大家讲一下
本篇主要内容
纹理过滤模式
纹理循环模式
效果图
纹理循环模式
该模式用于指定纹理坐标超出[0 ~ 1]
范围时所处理的方式.
/* TextureWrapMode */
define GL_REPEAT 0x2901
define GL_CLAMP_TO_EDGE 0x812F
define GL_MIRRORED_REPEAT 0x8370
系统给定了这三种模式, 默认是使用`GL_REPEAT `模式

我们先渲染下这张图片, 还不会纹理渲染的小伙伴可以参考[上一篇](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` 当超出纹理坐标时, 会重复纹理坐标边缘的像素, 像是拉伸的感觉

######纹理过滤模式
/* 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 `的解释。
>
摘自[LearnOpenGL](https://learnopengl-cn.github.io/01%20Getting%20started/06%20Textures/)

两种效果如上图, `GL_LINEAR`看起来更平滑一点.
每个人的喜好不一样, 萝卜青菜各有所爱O(∩_∩)O,
#####我把全部搞在一起看下效果

>###拓展
在搜索资料的时候不小心看到了这个[算法](http://www.geeks3d.com/20140213/glsl-shader-library-fish-eye-and-dome-and-barrel-distortion-post-processing-filters/), 然后在写篇文章的时候顺便弄上来给大家瞧瞧, 这个鱼眼的效果还挺不错的, 应该有些童鞋能用得上

[算法链接](http://www.geeks3d.com/20140213/glsl-shader-library-fish-eye-and-dome-and-barrel-distortion-post-processing-filters/)
####在这里献上[Demo](https://github.com/Justin910/LearnOpenGLES)
#结语
相信进过这两篇纹理的文章以后,大家应该能对纹理有一点点了解了吧.
***
后面如果还看到有好玩的东西就一起搞出来分享给大家
***