之前只是用OpenGL ES来渲染出一个很单调的白色三角形, 但生活中却又千千万万种颜色, 还有些东西是由很多颜色组成的, 为了渲染出最逼真的, OpenGL ES提供了一种纹理的图形技术, 用来渲染没一个像素的颜色
-
纹理: 用来保存图像的颜色元素的缓存, 例子中只做2D的缓存
原理大概是OpenGL ES缓存了一张图片上的像素颜色, 在通过我们定义的几何图形一叠加绘制出结果图形. 几何图形多出来的部分, 将不会被着色.如图:
屏幕快照 2017-06-28 下午8.43.06.png -
纹理渲染过程中的一些概念:
1.视口坐标(和屏幕坐标相反要注意):帧缓存中的像素坐标2.片源: 每个元素像素
3.映射:几何图形和纹理叠加,对齐的过程
4.纹理坐标系中的2D轴:S和T轴, 每一条轴的坐标范围(0-1), 从一个像素到64个纹素 .如图:
图片发自简书App
-
效果展示:(一个三角形,用纹理渲染)
纹理图片:
图片发自简书App
最后效果:
图片发自简书App
- 代码
三角形顶点坐标和纹理坐标
//顶点数据 用浮点类型
static const scene point[] = {
0.5, -0.5, 0.0f, 1.0f, 0.0f, //右下
0.5, 0.5, -0.0f, 1.0f, 1.0f, //右上
-0.5, 0.5, 0.0f, 0.0f, 1.0f, //左上
};
纹理
glEnableVertexAttribArray(GLKVertexAttribTexCoord0); //纹理告诉OpenGL纹理的数据在哪里
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(scene) , NULL);
//纹理贴图
CGImageRef imageRef = [[UIImage imageNamed:@"11"] CGImage];
GLKTextureInfo *info = [GLKTextureLoader textureWithCGImage:imageRef options:nil error:NULL];
最终的效果图三角形中的图片是位置是不是原来图片的位置, 这是因为视口坐标和屏幕坐标是相反的, 如要修改可以先将纹理的image先做旋转处理(懒不想搞).
