1. OpenGL ES实现

1.1 颜色填充

4、OpenGL ES 颜色纹理混合金字塔 - 图1

1.1.1 着色器

  • 顶点着色器
  1. attribute vec4 position;
  2. attribute vec4 positionColor;
  4. uniform mat4 projectionMatrix;
  5. uniform mat4 modelViewMatrix;
  7. varying lowp vec4 varyColor;
  9. void main() {
  10.     varyColor = positionColor;
  11.     vec4 vPos = projectionMatrix * modelViewMatrix * position;
  12.     gl_Position = vPos;
  13. }
  • 片元着色器
  1. varying lowp vec4 varyColor;
  2. void main() {
  3.     gl_FragColor = varyColor;
  4. }

1.1.2 绘制过程

  1. - (void)drawPyramid
  2. {
  3.     //1.设置图层
  4.     [self setupLayer];
  5.     //2.设置上下文
  6.     [self setupContext];
  7.     //3.清空缓存区
  8.     [self deletBuffer];
  9.     //4.设置renderBuffer
  10.     [self setupRenderBuffer];
  11.     //5.设置frameBuffer
  12.     [self setupFrameBuffer];
  13.     //6.绘制
  14.     [self render];
  15. }
  • 设置图层
  1. - (void)setupLayer {
  2.     self.myEagLayer = (CAEAGLLayer *)self.layer;
  3.     [self setContentScaleFactor:[[UIScreen mainScreen]scale]];
  4.     self.myEagLayer.opaque = YES;
  5.     self.myEagLayer.drawableProperties = @{
  6.         kEAGLDrawablePropertyRetainedBacking : @NO,
  7.         kEAGLDrawablePropertyColorFormat : kEAGLColorFormatRGBA8
  8.     };
  9. }
  • 设置上下文
  1. - (void)setupContext {
  2.     EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
  3.     EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
  4.     if (!context) {
  5.         NSLog(@"Create Context Failed");
  6.         return;
  7.     }
  8.     if (![EAGLContext setCurrentContext:context]) {
  9.         NSLog(@"Set Current Context Failed");
  10.         return;
  11.     }
  12.     self.myContext = context;
  13. }
  • 清空缓存区
  1. - (void)deletBuffer {
  2.     glDeleteBuffers(1, &_myColorRenderBuffer);
  3.     _myColorRenderBuffer = 0;
  4.     glDeleteBuffers(1, &_myColorFrameBuffer);
  5.     _myColorFrameBuffer = 0;
  6. }
  • 设置renderBuffer
  1. - (void)setupRenderBuffer {
  2.     //1.定义一个缓存区
  3.     GLuint buffer;
  4.     //2.申请一个缓存区标志
  5.     glGenRenderbuffers(1, &buffer);
  6.     //3.
  7.     self.myColorRenderBuffer = buffer;
  8.     //4.将标识符绑定到GL_RENDERBUFFER
  9.     glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
  10.     [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
  11. }
  • 设置frameBuffer
  1. - (void)setupFrameBuffer {
  2.     //1.定义一个缓存区
  3.     GLuint buffer;
  4.     //2.申请一个缓存区标志
  5.     glGenFramebuffers(1, &buffer);
  6.     //3.
  7.     self.myColorFrameBuffer = buffer;
  8.     //4.设置当前的framebuffer
  9.     glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
  10.     //5.将_myColorRenderBuffer 装配到GL_COLOR_ATTACHMENT0 附着点上
  11.     glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
  12. }
  • 绘制
  1. - (void)render {
  2.     //1.清屏颜色
  3.     glClearColor(0, 0.0, 0, 1.0);
  4.     glClear(GL_COLOR_BUFFER_BIT);
  6.     CGFloat scale = [[UIScreen mainScreen] scale];
  7.     //2.设置视口
  8.     glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
  10.     //3.获取顶点着色程序、片元着色器程序文件位置
  11.     NSString* vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"glsl"];
  12.     NSString* fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"glsl"];
  14.     //4.判断self.myProgram是否存在，存在则清空其文件
  15.     if (self.myProgram) {
  17.         glDeleteProgram(self.myProgram);
  18.         self.myProgram = 0;
  19.     }
  21.     //5.加载程序到myProgram中来。
  22.     self.myProgram = [self loadShader:vertFile frag:fragFile];
  24.     //6.链接
  25.     glLinkProgram(self.myProgram);
  26.     GLint linkSuccess;
  28.     //7.获取链接状态
  29.     glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkSuccess);
  30.     if (linkSuccess == GL_FALSE) {
  31.         GLchar messages[256];
  32.         glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
  33.         NSString *messageString = [NSString stringWithUTF8String:messages];
  34.         NSLog(@"error%@", messageString);
  36.         return ;
  37.     }else {
  38.         glUseProgram(self.myProgram);
  39.     }
  41.     //8.创建顶点数组 & 索引数组
  42.     //(1)顶点数组 前3顶点值（x,y,z），后3位颜色值(RGB)
  43.     GLfloat attrArr[] = {
  44.         -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f, //左上0
  45.         0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f, //右上1
  46.         -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f, //左下2
  48.         0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f, //右下3
  49.         0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f, //顶点4
  50.     };
  52.     //(2).索引数组
  53.     GLuint indices[] = {
  54.         0, 3, 2,
  55.         0, 1, 3,
  56.         0, 2, 4,
  57.         0, 4, 1,
  58.         2, 3, 4,
  59.         1, 4, 3,
  60.     };
  62.     //(3).判断顶点缓存区是否为空，如果为空则申请一个缓存区标识符
  63.     if (self.myVertices == 0) {
  64.         glGenBuffers(1, &_myVertices);
  65.     }
  67.     //9.-----处理顶点数据-------
  68.     //(1).将_myVertices绑定到GL_ARRAY_BUFFER标识符上
  69.     glBindBuffer(GL_ARRAY_BUFFER, _myVertices);
  70.     //(2).把顶点数据从CPU内存复制到GPU上
  71.     glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
  73.     //(3).将顶点数据通过myPrograme中的传递到顶点着色程序的position
  74.     //1.glGetAttribLocation,用来获取vertex attribute的入口的.
  75.     //2.告诉OpenGL ES,通过glEnableVertexAttribArray，
  76.     //3.最后数据是通过glVertexAttribPointer传递过去的。
  77.     //注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
  78.     GLuint position = glGetAttribLocation(self.myProgram, "position");
  80.     //(4).打开position
  81.     glEnableVertexAttribArray(position);
  83.     //(5).设置读取方式
  84.     //参数1：index,顶点数据的索引
  85.     //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
  86.     //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
  87.     //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
  88.     //参数5：stride,连续顶点属性之间的偏移量，默认为0；
  89.     //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
  90.     glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, NULL);
  92.     //10.--------处理顶点颜色值-------
  93.     //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
  94.     //注意：第二参数字符串必须和shaderv.glsl中的输入变量：positionColor保持一致
  95.     GLuint positionColor = glGetAttribLocation(self.myProgram, "positionColor");
  97.     //(2).设置合适的格式从buffer里面读取数据
  98.     glEnableVertexAttribArray(positionColor);
  100.     //(3).设置读取方式
  101.     //参数1：index,顶点数据的索引
  102.     //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
  103.     //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
  104.     //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
  105.     //参数5：stride,连续顶点属性之间的偏移量，默认为0；
  106.     //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
  107.     glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, (float *)NULL + 3);
  109.     //11.找到myProgram中的projectionMatrix、modelViewMatrix 2个矩阵的地址。如果找到则返回地址，否则返回-1，表示没有找到2个对象。
  110.     GLuint projectionMatrixSlot = glGetUniformLocation(self.myProgram, "projectionMatrix");
  111.     GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");
  113.     float width = self.frame.size.width;
  114.     float height = self.frame.size.height;
  116.     //12.创建4 * 4投影矩阵
  117.     KSMatrix4 _projectionMatrix;
  118.     //(1)获取单元矩阵
  119.     ksMatrixLoadIdentity(&_projectionMatrix);
  120.     //(2)计算纵横比例 = 长/宽
  121.     float aspect = width / height; //长宽比
  122.     //(3)获取透视矩阵
  123.     /*
  124.      参数1：矩阵
  125.      参数2：视角，度数为单位
  126.      参数3：纵横比
  127.      参数4：近平面距离
  128.      参数5：远平面距离
  129.      参考PPT
  130.      */
  131.     ksPerspective(&_projectionMatrix, 30.0, aspect, 5.0f, 20.0f); //透视变换，视角30°
  132.     //(4)将投影矩阵传递到顶点着色器
  133.     /*
  134.      void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
  135.      参数列表：
  136.      location:指要更改的uniform变量的位置
  137.      count:更改矩阵的个数
  138.      transpose:是否要转置矩阵，并将它作为uniform变量的值。必须为GL_FALSE
  139.      value:执行count个元素的指针，用来更新指定uniform变量
  140.      */
  141.     glUniformMatrix4fv(projectionMatrixSlot, 1, GL_FALSE, (GLfloat*)&_projectionMatrix.m[0][0]);
  143.     //13.创建一个4 * 4 矩阵，模型视图矩阵
  144.     KSMatrix4 _modelViewMatrix;
  145.     //(1)获取单元矩阵
  146.     ksMatrixLoadIdentity(&_modelViewMatrix);
  147.     //(2)平移，z轴平移-10
  148.     ksTranslate(&_modelViewMatrix, 0.0, 0.0, -10.0);
  149.     //(3)创建一个4 * 4 矩阵，旋转矩阵
  150.     KSMatrix4 _rotationMatrix;
  151.     //(4)初始化为单元矩阵
  152.     ksMatrixLoadIdentity(&_rotationMatrix);
  153.     //(5)旋转
  154.     ksRotate(&_rotationMatrix, xDegree, 1.0, 0.0, 0.0); //绕X轴
  155.     ksRotate(&_rotationMatrix, yDegree, 0.0, 1.0, 0.0); //绕Y轴
  156.     ksRotate(&_rotationMatrix, zDegree, 0.0, 0.0, 1.0); //绕Z轴
  157.     //(6)把变换矩阵相乘.将_modelViewMatrix矩阵与_rotationMatrix矩阵相乘，结合到模型视图
  158.      ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);
  159.     //(7)将模型视图矩阵传递到顶点着色器
  160.     /*
  161.      void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
  162.      参数列表：
  163.      location:指要更改的uniform变量的位置
  164.      count:更改矩阵的个数
  165.      transpose:是否要转置矩阵，并将它作为uniform变量的值。必须为GL_FALSE
  166.      value:执行count个元素的指针，用来更新指定uniform变量
  167.      */
  168.     glUniformMatrix4fv(modelViewMatrixSlot, 1, GL_FALSE, (GLfloat*)&_modelViewMatrix.m[0][0]);
  170.     //14.开启剔除操作效果
  171.     glEnable(GL_CULL_FACE);
  173.     //15.使用索引绘图
  174.     /*
  175.      void glDrawElements(GLenum mode,GLsizei count,GLenum type,const GLvoid * indices);
  176.      参数列表：
  177.      mode:要呈现的画图的模型 
  178.                 GL_POINTS
  179.                 GL_LINES
  180.                 GL_LINE_LOOP
  181.                 GL_LINE_STRIP
  182.                 GL_TRIANGLES
  183.                 GL_TRIANGLE_STRIP
  184.                 GL_TRIANGLE_FAN
  185.      count:绘图个数
  186.      type:类型
  187.              GL_BYTE
  188.              GL_UNSIGNED_BYTE
  189.              GL_SHORT
  190.              GL_UNSIGNED_SHORT
  191.              GL_INT
  192.              GL_UNSIGNED_INT
  193.      indices：绘制索引数组
  195.      */
  196.     glDrawElements(GL_TRIANGLES, sizeof(indices) / sizeof(indices[0]), GL_UNSIGNED_INT, indices);
  198.     //16.要求本地窗口系统显示OpenGL ES渲染<目标>
  199.     [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
  200. }
  202. #pragma mark -- Shader
  203. -(GLuint)loadShader:(NSString *)vert frag:(NSString *)frag {
  204.     //创建2个临时的变量，verShader,fragShader
  205.     GLuint verShader,fragShader;
  206.     //创建一个Program
  207.     GLuint program = glCreateProgram();
  209.     //编译文件
  210.     //编译顶点着色程序、片元着色器程序
  211.     //参数1：编译完存储的底层地址
  212.     //参数2：编译的类型，GL_VERTEX_SHADER（顶点）、GL_FRAGMENT_SHADER(片元)
  213.     //参数3：文件路径
  214.     [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
  215.     [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
  217.     //创建最终的程序
  218.     glAttachShader(program, verShader);
  219.     glAttachShader(program, fragShader);
  221.     //释放不需要的shader
  222.     glDeleteShader(verShader);
  223.     glDeleteShader(fragShader);
  225.     return program;
  226. }
  228. //链接shader
  229. - (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
  230.      //读取文件路径字符串
  231.     NSString *content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
  232.     //获取文件路径字符串，C语言字符串
  233.     const GLchar *source = (GLchar *)[content UTF8String];
  235.     //创建一个shader（根据type类型）
  236.     *shader = glCreateShader(type);
  238.     //将顶点着色器源码附加到着色器对象上。
  239.     //参数1：shader,要编译的着色器对象 *shader
  240.     //参数2：numOfStrings,传递的源码字符串数量 1个
  241.     //参数3：strings,着色器程序的源码（真正的着色器程序源码）
  242.     //参数4：lenOfStrings,长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
  243.     glShaderSource(*shader, 1, &source, NULL);
  245.     //把着色器源代码编译成目标代码
  246.     glCompileShader(*shader);
  247. }
  249. #pragma mark - XYClick
  250. - (IBAction)XClick:(id)sender {
  251.     //开启定时器
  252.     [self myTimer];
  253.     //更新的是X还是Y
  254.     bX = !bX;
  256. }
  257. - (IBAction)YClick:(id)sender {
  258.     //开启定时器
  259.     [self myTimer];
  260.     //更新的是X还是Y
  261.     bY = !bY;
  262. }
  264. - (IBAction)ZClick:(id)sender {
  265.     //开启定时器
  266.     [self myTimer];
  267.     //更新的是X还是Y
  268.     bZ = !bZ;
  269. }
  271. - (NSTimer *)myTimer {
  272.     if (!_myTimer) {
  273.         _myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
  274.     }
  275.     return _myTimer;
  276. }
  278. - (void)reDegree {
  279.     //如果停止X轴旋转，X = 0则度数就停留在暂停前的度数.
  280.     //更新度数
  281.     xDegree += bX * 5;
  282.     yDegree += bY * 5;
  283.     zDegree += bZ * 5;
  284.     //重新渲染
  285.     [self render];
  286. }

1.2 纹理填充

4、OpenGL ES 颜色纹理混合金字塔 - 图2

1.2.1 着色器

  • 顶点着色器
  1. attribute vec4 position;
  2. attribute vec2 textCoordinate;
  4. uniform mat4 projectionMatrix;
  5. uniform mat4 modelViewMatrix;
  7. varying lowp vec2 varyTextCoord;
  9. void main() {
  10.     varyTextCoord = textCoordinate;
  11.     vec4 vPos = projectionMatrix * modelViewMatrix * position;
  12.     gl_Position = vPos;
  13. }
  • 片元着色器
  1. precision highp float;
  2. varying lowp vec2 varyTextCoord;
  3. uniform sampler2D colorMap;
  5. void main() {
  6.     gl_FragColor = texture2D(colorMap, varyTextCoord);
  7. }

1.2.2 绘制过程

这里写了需要修改的部分。

  1. GLfloat attrArr[] = {
  2.     -0.5f, 0.5f, 0.0f,      0.0f, 1.0f,//左上
  3.     0.5f, 0.5f, 0.0f,       1.0f, 1.0f,//右上
  4.     -0.5f, -0.5f, 0.0f,     0.0f, 0.0f,//左下
  6.     0.5f, -0.5f, 0.0f,      1.0f, 0.0f,//右下
  7.     0.0f, 0.0f, 1.0f,       0.5f, 0.5f,//顶点
  8. };
  10. // 设置顶点坐标
  11. GLuint position = glGetAttribLocation(self.myProgram, "position");
  12. glEnableVertexAttribArray(position);
  13. glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
  14. // 设置纹理坐标
  15. GLuint textCoordinate = glGetAttribLocation(self.myProgram, "textCoordinate");
  16. glEnableVertexAttribArray(textCoordinate);
  17. glVertexAttribPointer(textCoordinate, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (float *)NULL + 3);
  18. // 设置纹理
  19. [self setupTexture:@"qiyu"];
  20. glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
  • 加载纹理
  1. //从图片中加载纹理
  2. - (GLuint)setupTexture:(NSString *)fileName {
  3.     //1、将 UIImage 转换为 CGImageRef
  4.     CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
  6.     //判断图片是否获取成功
  7.     if (!spriteImage) {
  8.         NSLog(@"Failed to load image %@", fileName);
  9.         exit(1);
  10.     }
  12.     //2、读取图片的大小，宽和高
  13.     size_t width = CGImageGetWidth(spriteImage);
  14.     size_t height = CGImageGetHeight(spriteImage);
  16.     //3.获取图片字节数 宽*高*4（RGBA）
  17.     GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
  19.     //4.创建上下文
  20.     /*
  21.      参数1：data,指向要渲染的绘制图像的内存地址
  22.      参数2：width,bitmap的宽度，单位为像素
  23.      参数3：height,bitmap的高度，单位为像素
  24.      参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
  25.      参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
  26.      参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
  27.      */
  28.     CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
  30.     //5、在CGContextRef上--> 将图片绘制出来
  31.     /*
  32.      CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
  33.      CGContextDrawImage 
  34.      参数1：绘图上下文
  35.      参数2：rect坐标
  36.      参数3：绘制的图片
  37.      */
  38.     CGRect rect = CGRectMake(0, 0, width, height);
  40.     //6.使用默认方式绘制
  41.     CGContextDrawImage(spriteContext, rect, spriteImage);
  43.     //7、画图完毕就释放上下文
  44.     CGContextRelease(spriteContext);
  46.     //8、绑定纹理到默认的纹理ID（
  47.     glBindTexture(GL_TEXTURE_2D, 0);
  49.     //9.设置纹理属性
  50.     /*
  51.      参数1：纹理维度
  52.      参数2：线性过滤、为s,t坐标设置模式
  53.      参数3：wrapMode,环绕模式
  54.      */
  55.     glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
  56.     glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
  57.     glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  58.     glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
  60.     float fw = width, fh = height;
  62.     //10.载入纹理2D数据
  63.     /*
  64.      参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
  65.      参数2：加载的层次，一般设置为0
  66.      参数3：纹理的颜色值GL_RGBA
  67.      参数4：宽
  68.      参数5：高
  69.      参数6：border，边界宽度
  70.      参数7：format
  71.      参数8：type
  72.      参数9：纹理数据
  73.      */
  74.     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
  76.     //11.释放spriteData
  77.     free(spriteData);
  79.     return 0;
  80. }

1.3 纹理颜色混合

颜色混合逻辑主要在片元着色器中。
4、OpenGL ES 颜色纹理混合金字塔 - 图3

1.3.1 着色器

  • 顶点着色器
  1. attribute vec4 position;
  2. attribute vec4 positionColor;
  3. attribute vec2 textCoordinate;
  5. uniform mat4 projectionMatrix;
  6. uniform mat4 modelViewMatrix;
  8. varying lowp vec4 varyColor;
  9. varying lowp vec2 varyTextCoord;
  11. void main() {
  12.     varyTextCoord = textCoordinate;
  13.     varyColor = positionColor;
  14.     vec4 vPos = projectionMatrix * modelViewMatrix * position;
  15.     gl_Position = vPos;
  16. }
  • 片元着色器 (核心逻辑)
  1. precision highp float;
  2. varying lowp vec4 varyColor;
  3. varying lowp vec2 varyTextCoord;
  5. uniform sampler2D colorMap;
  7. void main() {
  8.     vec4 textureColor = texture2D(colorMap, varyTextCoord);
  9.     float alpha = 0.3;
  10.     gl_FragColor = varyColor * (1.0 - alpha) + textureColor * alpha;
  11. }

1.3.2 绘制过程

这里写了需要修改的部分。

  1. GLfloat attrArr[] = {
  2.     -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f,       0.0f, 1.0f,//左上
  3.     0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f,       1.0f, 1.0f,//右上
  4.     -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f,       0.0f, 0.0f,//左下
  6.     0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f,       1.0f, 0.0f,//右下
  7.     0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f,       0.5f, 0.5f,//顶点
  8. };
  9. // 设置顶点数据
  10. glEnableVertexAttribArray(GLKVertexAttribPosition);
  11. glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, NULL);
  12. // 设置颜色数据
  13. glEnableVertexAttribArray(GLKVertexAttribColor);
  14. glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 3);
  15. // 设置颜色数据
  16. glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
  17. glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 6);

2. GLKit实现

GLKit实现会少很多代码，这里一次性给出代码。

2.1 纹理颜色混合

4、OpenGL ES 颜色纹理混合金字塔 - 图4

  1. -(void)viewDidLoad {
  2.     [super viewDidLoad];
  3.     //1.新建图层
  4.     [self setupContext];
  5.     //2.渲染图形
  6.     [self render];
  7. }
  9. //2.渲染图形
  10. -(void)render {
  11.     //1.顶点数据
  12.     //前3个元素，是顶点数据；中间3个元素，是顶点颜色值，最后2个是纹理坐标
  13.     GLfloat attrArr[] = {
  14.         -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f,       0.0f, 1.0f,//左上
  15.         0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f,       1.0f, 1.0f,//右上
  16.         -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f,       0.0f, 0.0f,//左下
  18.         0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f,       1.0f, 0.0f,//右下
  19.         0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f,       0.5f, 0.5f,//顶点
  20.     };
  22.     //2.绘图索引
  23.     GLuint indices[] = {
  24.         0, 3, 2,
  25.         0, 1, 3,
  26.         0, 2, 4,
  27.         0, 4, 1,
  28.         2, 3, 4,
  29.         1, 4, 3,
  30.     };
  32.     //顶点个数
  33.     self.count = sizeof(indices) /sizeof(GLuint);
  35.     //将顶点数组放入数组缓冲区中 GL_ARRAY_BUFFER
  36.     GLuint buffer;
  37.     glGenBuffers(1, &buffer);
  38.     glBindBuffer(GL_ARRAY_BUFFER, buffer);
  39.     glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_STATIC_DRAW);
  41.     //将索引数组存储到索引缓冲区 GL_ELEMENT_ARRAY_BUFFER
  42.     GLuint index;
  43.     glGenBuffers(1, &index);
  44.     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index);
  45.     glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
  47.     //使用顶点数据
  48.     glEnableVertexAttribArray(GLKVertexAttribPosition);
  49.     glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, NULL);
  51.     //使用颜色数据
  52.     glEnableVertexAttribArray(GLKVertexAttribColor);
  53.     glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 3);
  55.     //使用纹理数据
  56.     glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
  57.     glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 6);
  59.     //着色器
  60.     self.mEffect = [[GLKBaseEffect alloc]init];
  62.     //加载纹理
  63.     NSString *filePath = [[NSBundle mainBundle]pathForResource:@"qiyu" ofType:@"jpg"];
  64.     NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft : @(YES)};
  65.     GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
  66.     self.mEffect.texture2d0.enabled = YES;
  67.     self.mEffect.texture2d0.name = textureInfo.name;
  68.     self.mEffect.texture2d0.target = textureInfo.target;
  70.     //投影视图
  71.     CGSize size = self.view.bounds.size;
  72.     float aspect = fabs(size.width / size.height);
  73.     GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90.0), aspect, 0.1f, 100.0);
  74.     projectionMatrix = GLKMatrix4Scale(projectionMatrix, 1.0f, 1.0f, 1.0f);
  75.     self.mEffect.transform.projectionMatrix = projectionMatrix;
  77.     //模型视图
  78.     GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
  79.     self.mEffect.transform.modelviewMatrix = modelViewMatrix;
  81.     //定时器
  82.     double seconds = 0.1;
  83.     timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue());
  84.     dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, seconds * NSEC_PER_SEC, 0.0);
  85.     dispatch_source_set_event_handler(timer, ^{
  86.         self.XDegree += 0.1f * self.XB;
  87.         self.YDegree += 0.1f * self.YB;
  88.         self.ZDegree += 0.1f * self.ZB ;
  89.     });
  90.     dispatch_resume(timer);
  91. }
  93. //场景数据变化
  94. - (void)update {
  95.     GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.5);
  96.     modelViewMatrix = GLKMatrix4RotateX(modelViewMatrix, self.XDegree);
  97.     modelViewMatrix = GLKMatrix4RotateY(modelViewMatrix, self.YDegree);
  98.     modelViewMatrix = GLKMatrix4RotateZ(modelViewMatrix, self.ZDegree);
  99.     self.mEffect.transform.modelviewMatrix = modelViewMatrix;
  100. }
  102. - (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
  103.     glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
  104.     glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  105.     [self.mEffect prepareToDraw];
  106.     glDrawElements(GL_TRIANGLES, self.count, GL_UNSIGNED_INT, 0);
  107. }
  109. //1.新建图层
  110. - (void)setupContext
  111. {
  112.     //1.新建OpenGL ES上下文
  113.     self.mContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
  114.     [EAGLContext setCurrentContext:self.mContext];
  115.     glEnable(GL_DEPTH_TEST);
  117.     GLKView *view = (GLKView *)self.view;
  118.     view.context = self.mContext;
  119.     view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
  120.     view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
  121. }
  123. #pragma mark -XYZClick
  124. - (IBAction)XClick:(id)sender {
  125.     _XB = !_XB;
  126. }
  127. - (IBAction)YClick:(id)sender {
  128.     _YB = !_YB;
  129. }
  130. - (IBAction)ZClick:(id)sender {
  131.     _ZB = !_ZB;
  132. }