学习之路系列

OpenGLES学习之路

这两天在看<<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)

#结语

相信进过这两篇纹理的文章以后，大家应该能对纹理有一点点了解了吧. 

***
后面如果还看到有好玩的东西就一起搞出来分享给大家
***

OpenGLES学习之路-纹理(二)