二十三 OpenGL索引绘图（GLSL实现金字塔纯色填充和纹理+

作者: 王俏 | 来源:发表于2020-09-04 16:40 被阅读0次

二十三 OpenGL索引绘图（GLSL实现金字塔纯色填充和纹理+
OpenGL ES案例04_3-GLSL索引绘图添加纹理颜色混合
OpenGL ES-10-案例06-GLKit索引绘图+颜色纹理
OpenGL ES学习之路(5.0) GLSL实现金字塔案例
OpenGL ES 案例05：GLSL使用索引绘图
OpenGL ES 案例07：GLSL使用索引绘图 + 纹理颜色
GLSL实现渲染立体图形
GLSL实现纹理与颜色混合
十二、OpenGL ES 索引绘图 & 自定义着色器绘制金字塔
OpenGL-ES 学习示例

GLSL实现

效果图

纯色填充

image

纹理+颜色混合填充

image

流程

image

0. 准备工作

头文件引入

#import "GLESMath.h"
#import "GLESUtils.h"
#import <OpenGLES/ES2/gl.h>

扩展属性

@interface HTView()

//CAEAGLLayer
@property(nonatomic,strong)CAEAGLLayer *htEagLayer;

//上下文
@property(nonatomic,strong)EAGLContext *htContext;

//渲染缓冲区id
@property(nonatomic,assign)GLuint htColorRenderBuffer;

//帧缓冲区id
@property(nonatomic,assign)GLuint htColorFrameBuffer;

//着色器程序id
@property(nonatomic,assign)GLuint htProgram;

//顶点缓存区id
@property (nonatomic , assign) GLuint  htVertices;

内部属性

@implementation HTView
{
    //x轴方向的旋转弧度
    float xDegree;

    //y轴方向的旋转弧度
    float yDegree;

    //z轴方向的旋转弧度
    float zDegree;

    //是否围绕x轴旋转
    BOOL bX;

    //是否围绕y轴旋转
    BOOL bY;

    //是否围绕z轴旋转
    BOOL bZ;

    //定时器
    NSTimer* htTimer;
}

流程1-5参考：编译链接自定义的着色器（shader）流程

6.开始绘制 [self renderLayer]

6.1.设置清屏颜色,清除缓冲区

        //1.设置清屏颜色
    glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
        //清除缓冲区
    glClear(GL_COLOR_BUFFER_BIT);

6.2.设置视口大小

GLfloat  scale = [[UIScreen mainScreen] scale];
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);

6.3.读顶点着色器程序和片元着色器程序

NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];

6.4.判断self.htProgram是否存在，存在则清空其文件

//4.判断self.htProgram是否存在，存在则清空其文件
  if(self.htProgram){
        glDeleteProgram(self.htProgram);
        self.htProgram = 0;
    }

6.5.加载程序到htProgram中来

self.htProgram = [self loadShader:vertFile withFrag:fragFile];

6.6.链接

glLinkProgram(self.htProgram);

6.7.获取链接状态

    GLint linkStatus;
    glGetProgramiv(self.htProgram, GL_LINK_STATUS, &linkStatus);
    if(linkStatus == GL_FALSE){
        GLchar message[512];
        glGetProgramInfoLog(self.htProgram, sizeof(message), 0, &message[0]);
        NSString *messageString  = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }

    NSLog(@"Programe Link Success!");

6.8.使用program

glUseProgram(self.htProgram);

6.9.创建顶点数组和索引数组

//(1)顶点数组 前3顶点值（x,y,z），后3位颜色值(RGB)
    GLfloat attrArr[] =
    {
    -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f,      //左上0
    0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f,      //右上1
    0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f,     //右下2
    -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f,     //左下3
    0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f,     //顶点4
    };

// 索引数组
    GLuint indices[] =
    {
    0, 1, 2,
    0, 2, 3,
    0, 4, 1,
    1, 4, 2,
    2, 4, 3,
    3, 4, 0,
    };

6.10.处理顶点数据

 //.判断顶点缓存区是否为空，如果为空则申请一个缓存区标识符
    if (self.htVertices == 0) {
        glGenBuffers(1, &_htVertices);
    }
    glBindBuffer(GL_ARRAY_BUFFER, _htVertices);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

6.11.将顶点数据通过htPrograme传递到顶点着色程序的position

//1).glGetAttribLocation,用来获取vertex attribute的入口的.
    GLuint position = glGetAttribLocation(self.htProgram, "position");
//2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(position);
//3).最后数据是通过glVertexAttribPointer传递过去的。
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*6, NULL);

6.12.处理顶点颜色值

//(1).glGetAttribLocation,用来获取vertex attribute的入口的.
//注意：第二参数字符串必须和shaderv.glsl中的输入变量positionColor保持一致
    GLuint positionColor = glGetAttribLocation(self.htProgram, "positionColor");
//(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(positionColor);
//(3).设置读取方式
    glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*6, NULL);

6.13.找到htProgram中的projectionMatrix和
modelViewMatrix

GLuint projectionMatrixID = glGetUniformLocation(self.htProgram, "projectionMatrix");
GLuint modelViewMatrixID = glGetUniformLocation(self.htProgram, "modelViewMatrix");

6.14.设置投影矩阵

//创建4 * 4投影矩阵
    KSMatrix4 _projectionMatrix
//获取单元矩阵
    ksMatrixLoadIdentity(&_projectionMatrix);
//计算纵横比
    float width = self.frame.size.width;
    float height = self.frame.size.height;
    float aspect = width / height; //长宽比
//获取透视矩阵
    ksPerspective(&_projectionMatrix, 30.0, aspect, 5.0f, 20.0f);
//将投影矩阵传递到顶点着色器
    glUniformMatrix4fv(projectionMatrixID, 1, GL_FALSE, (GLfloat*)&_projectionMatrix.m[0][0]);

6.15. 设置模型视图矩阵

//(1)创建一个4 * 4 矩阵，模型视图矩阵，获取单元矩阵
    KSMatrix4 _modelViewMatrix;
//获取单元矩阵
    ksMatrixLoadIdentity(&_modelViewMatrix);
//(2)平移，z轴负方向平移10
    ksTranslate(&_modelViewMatrix, 0.0, 0.0, -10.0);
//(3)创建一个4 * 4 矩阵，旋转矩阵，初始化为单元矩阵
    KSMatrix4 _rotationMatrix;
//初始化为单元矩阵
    ksMatrixLoadIdentity(&_rotationMatrix);
//(4)旋转
    ksRotate(&_rotationMatrix, xDegree, 1.0, 0.0, 0.0); //绕X轴
    ksRotate(&_rotationMatrix, yDegree, 0.0, 1.0, 0.0); //绕Y轴
    ksRotate(&_rotationMatrix, zDegree, 0.0, 0.0, 1.0);
//(5)把变换矩阵相乘
    ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);
//(6)将模型视图矩阵传递到顶点着色器
    glUniformMatrix4fv(modelViewMatrixID, 1, GL_FALSE, (GLfloat*)&_modelViewMatrix.m[0][0]);

6.16.开启正背面剔除

glEnable(GL_CULL_FACE);

6.17.使用索引绘图

glDrawElements(GL_TRIANGLES, sizeof(indices) / sizeof(indices[0]), GL_UNSIGNED_INT, indices);

6.18.提交渲染到本地窗口系统显示

[self.htContext presentRenderbuffer:GL_RENDERBUFFER];

6.19 shaderv.vsh


attribute vec4 position;
attribute vec4 positionColor;

uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying lowp vec4 varyColor;

void main()
{
    varyColor = positionColor;

    vec4 vPos;

        //4*4 * 4*4 * 4*1
    vPos = projectionMatrix * modelViewMatrix * position;

        //ERROR
        //vPos = position * modelViewMatrix  * projectionMatrix ;
    gl_Position = vPos;
}

6.20 shaderf.fsh

varying lowp vec4 varyColor;
void main()
{
    gl_FragColor = varyColor;
}

点击事件和定时器控制旋转

#pragma mark - XYClick
- (IBAction)XClick:(id)sender {

        //开启定时器
    if (!htTimer) {
        htTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
    }
        //更新的是X还是Y
    bX = !bX;

}
- (IBAction)YClick:(id)sender {

        //开启定时器
    if (!htTimer) {
        htTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
    }
        //更新的是X还是Y
    bY = !bY;
}
- (IBAction)ZClick:(id)sender {

        //开启定时器
    if (!htTimer) {
        htTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
    }
        //更新的是X还是Y
    bZ = !bZ;
}

-(void)reDegree
{
        //如果停止X轴旋转，X = 0则度数就停留在暂停前的度数.
        //更新度数
    xDegree += bX * 5;
    yDegree += bY * 5;
    zDegree += bZ * 5;
        //重新渲染
    [self renderLayer];

}

纹理+颜色混合填充逻辑

在纯色填充上修改shaderf.fsh和shaderv.vsh
->绘制函数中需要增加设置纹理坐标映射+ 载入纹理

image

shaderv.vsh


attribute vec4 position;
attribute vec4 positionColor;
attribute vec2 textCoord;



uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying lowp vec4 varyColor;
varying lowp vec2 varyTextCoord;

void main()
{
    varyColor = positionColor;
    varyTextCoord = textCoord;

    vec4 vPos;

        //4*4 * 4*4 * 4*1
    vPos = projectionMatrix * modelViewMatrix * position;

        //ERROR
        //vPos = position * modelViewMatrix  * projectionMatrix ;
    gl_Position = vPos;
}

shaderf.fsh

precision highp float;

varying lowp vec4 varyColor;
varying lowp vec2 varyTextCoord;

uniform sampler2D colorMap;

void main ()
{
    vec4 weakMask = texture2D(colorMap, varyTextCoord);
    vec4 mask = varyColor;
    float alpha = 0.8;

    vec4 tempColor = mask * (1.0 - alpha) + weakMask * alpha;
    gl_FragColor = tempColor;
}

绘制流程修改

9.创建顶点数组和索引数组 (顶点数组中加入了纹理坐标映射，注意映射的纹理映射的正反面）

    GLfloat attrArr[] =
    {
    -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f,   0.0f, 1.0f,        //左上0
    0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f,   1.0f, 1.0f,        //右上1
    0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f,   1.0f, 0.0f,        //右下2
    -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f,   0.0f, 0.0f,        //左下3
    0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f,   0.5f, 0.5f,        //顶点4
    };

        // 索引数组
    GLuint indices[] =
    {
    0, 1, 2,
    0, 2, 3,
    0, 4, 1,
    1, 4, 2,
    2, 4, 3,
    3, 4, 0,
    };

11.将顶点数据通过htPrograme传递到顶点着色程序的position(坐标读取时两次连续读取之间的间隔改为8）

    //1).glGetAttribLocation,用来获取vertex attribute的入口的.
         GLuint position = glGetAttribLocation(self.htProgram, "position");
    //2).设置合适的格式从buffer里面读取数据
        glEnableVertexAttribArray(position);
    //3).最后数据是通过glVertexAttribPointer传递过去的。
        glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, NULL);

11.2 处理纹理数据

    //1).glGetAttribLocation,用来获取vertex attribute的入口的.
         //注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoord保持一致
    GLuint textCoor = glGetAttribLocation(self.htProgram, "textCoord");
    //2).设置合适的格式从buffer里面读取数据
        glEnableVertexAttribArray(position);
    //3).最后数据是通过glVertexAttribPointer传递过去的。
        glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, NULL);

12.处理顶点颜色值（坐标读取时两次连续读取之间的间隔改为8）

    //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
        //注意：第二参数字符串必须和shaderv.glsl中的输入变量：positionColor保持一致
    GLuint positionColor = glGetAttribLocation(self.htProgram, "positionColor");
    //(2).设置合适的格式从buffer里面读取数据
        glEnableVertexAttribArray(textCoor);

    //(3).设置读取方式
        glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, (float *)NULL + 6);

12.2 加载纹理和设置纹理采样器 sampler2D
- 加载纹理 [self setupTexture:@"stone"];

//加载纹理
-(GLuint )setupTexture:(NSString *)file
{
        //1.将UIImage 转换为CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:file].CGImage;

        //判断图片是否获取成功
    if(!spriteImage){
        NSLog(@"Failed to load image: %@",file);
        exit(1);
    }

        //2、读取图片的大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);

        //3.获取图片字节数 宽*高*4（RGBA） 开辟存储空间
    GLubyte *spriteData = (GLubyte *)calloc(width*height*4,sizeof(GLubyte));

        //4.创建上下文
    /*
     参数1：data,指向要渲染的绘制图像的内存地址
     参数2：width,bitmap的宽度，单位为像素
     参数3：height,bitmap的高度，单位为像素
     参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
     参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
     参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4, CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);

        //5、在CGContextRef上--> 将图片绘制出来
    CGRect rect = CGRectMake(0, 0, width, height);
    CGContextDrawImage(spriteContext, rect, spriteImage);

        //6. 画图完毕就释放上下文
    CGContextRelease(spriteContext);

        //7.绑定纹理到默认的纹理ID
    glBindTexture(GL_TEXTURE_2D, 0);

        //8.设置纹理属性
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

        //9.载入纹理2D数据
    /*
     参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     参数2：加载的层次，一般设置为0
     参数3：纹理的颜色值GL_RGBA
     参数4：宽
     参数5：高
     参数6：border，边界宽度
     参数7：format
     参数8：type
     参数9：纹理数据
     */
    float fw = width, fh = height;
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);

        //10. 释放spriteData
    free(spriteData);
    return 0;
}

* 设置纹理采样器 sampler2D

glUniform1f(glGetAttribLocation(self.htProgram, "colorMap"), 0);

开启混合

glEnable(GL_BLEND);

完整代码实现：

纯色填充

纹理+颜色混合填充

二十三 OpenGL索引绘图（GLSL实现金字塔纯色填充和纹理+
GLSL实现效果图纯色填充纹理+颜色混合填充流程 0. 准备工作头文件引入扩展属性内部属性流程1-...
OpenGL ES案例04_3-GLSL索引绘图添加纹理颜色混合
本案例是在OpenGL ES案例04_1-GLSL使用索引绘图基础上增加纹理颜色混合。最终效果如下：本案例与之前...
OpenGL ES-10-案例06-GLKit索引绘图+颜色纹理
我们上一篇中介绍了GLSL索引绘图+颜色纹理混合，那么今天来看一下GLKit索引绘图+颜色纹理混合。整体来说，比G...
OpenGL ES学习之路(5.0) GLSL实现金字塔案例
GLSL实现金字塔案例索引绘图的图解，下面要用到image.png 效果源码 shaderv.vsh shad...
OpenGL ES 案例05：GLSL使用索引绘图
OpenGL + OpenGL ES +Metal 系列文章汇总本案例的主要目的是理解GLSL中如何索引绘图本...
OpenGL ES 案例07：GLSL使用索引绘图 + 纹理颜色
本案例是在OpenGL ES 案例05：GLSL使用索引绘图[https://www.jianshu.com/p/...
GLSL实现渲染立体图形
通过GLSL实现一个自动旋转的金字塔，并对金字塔进行颜色和纹理的混合。效果如下：整体流程与GLSL实现对Sh...
GLSL实现纹理与颜色混合
OpenGL ES 索引绘图 - 简书上文介绍了使用索引绘图绘制金字塔案例，本文基于金字塔案例的基础上，使用GL...
十二、OpenGL ES 索引绘图 & 自定义着色器绘制金字塔
在GLSL_自定义着色器纹理中，介绍了如果利用自定义着色器绘制纹理的步骤；索引绘图索引绘图是一种由开发者指定顶...
OpenGL-ES 学习示例
OpenGL-ES 学习示例描述：1、GLKit 绘制图片和正方体2、GLSL 绘制金字塔、颜色纹理混合3、GL...

二十三 OpenGL索引绘图（GLSL实现金字塔纯色填充和纹理+

GLSL实现

效果图

纯色填充

纹理+颜色混合填充

流程

0. 准备工作

流程1-5参考：编译链接自定义的着色器（shader）流程

6.开始绘制 [self renderLayer]

点击事件和定时器控制旋转

纹理+颜色混合填充逻辑

shaderv.vsh

shaderf.fsh

绘制流程修改

完整代码实现：

相关文章

二十三 OpenGL索引绘图（GLSL实现金字塔纯色填充和纹理+

OpenGL ES案例04_3-GLSL索引绘图添加纹理颜色混合

OpenGL ES-10-案例06-GLKit索引绘图+颜色纹理

OpenGL ES学习之路(5.0) GLSL实现金字塔案例

OpenGL ES 案例05：GLSL使用索引绘图

OpenGL ES 案例07：GLSL使用索引绘图 + 纹理颜色

GLSL实现渲染立体图形

GLSL实现纹理与颜色混合

十二、OpenGL ES 索引绘图 & 自定义着色器绘制金字塔

OpenGL-ES 学习示例

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS视觉

二十三 OpenGL索引绘图（GLSL实现金字塔纯色填充和纹理+

GLSL实现

效果图

纯色填充

纹理+颜色混合填充

流程

0. 准备工作

流程1-5参考： 编译链接自定义的着色器（shader）流程

6.开始绘制 [self renderLayer]

点击事件和定时器控制旋转

纹理+颜色混合填充逻辑

shaderv.vsh

shaderf.fsh

绘制流程修改

完整代码实现：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

流程1-5参考：编译链接自定义的着色器（shader）流程