# Opengl-ES-LoadImage

**Repository Path**: Nealios/Opengl-ES-LoadImage

## Basic Information

- **Project Name**: Opengl-ES-LoadImage
- **Description**: No description available
- **Primary Language**: Objective-C
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 1.新建工程 
![Single-View-App](https://upload-images.jianshu.io/upload_images/11398671-1aba1c2f29668dc8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 2.将Main.storyboard中的view改为GLKView
![GLKView](https://upload-images.jianshu.io/upload_images/11398671-026d101966cdbb69.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 3.导入GLKit框架并使ViewController集成于GLKViewController
![导入GLKit框架](https://upload-images.jianshu.io/upload_images/11398671-73a2ecf6359a458e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 4.开始进行GLKit具体配置

#### 1.导入OpenGLES模块

```
    @import OpenGLES.ES3;
```

#### 2.声明上下文以及渲染器(EAGL提供的批次类)
```
    @property(nonatomic, strong) EAGLContext *context;
    @property(nonatomic, strong) GLKBaseEffect *baseEffect;
```

#### 3.设置顶点信息
```
    // 每一行的前面3个是顶点坐标，后面2个是纹理坐标
    // 纹理坐标系取值范围[0,1];原点是左下角(0,0);
    // 故而(0,0)是纹理图像的左下角, 点(1,1)是右上角.
    GLfloat vertexData[] = {
        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, //左上
        
        0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下
        -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上
        -0.5, -0.5, 0.0f,   0.0f, 0.0f, //左下
    };
```
前三个顶点表示(x,y,z), 后两个点表示纹理坐标

#### 4.基本信息的配置
```
    /// 配置基本信息
/// 包括需要 基本容器、基本的上下文、配置基本颜色格式、深度缓冲区精度
- (void)baseConfig {
    self.context = [[EAGLContext alloc] initWithAPI:(kEAGLRenderingAPIOpenGLES3)];
    
    [EAGLContext setCurrentContext:self.context];
    
    GLKView *glkView = (GLKView *)self.view;
    glkView.delegate = self;
    glkView.context = self.context;
    
    glkView.drawableColorFormat = GLKViewDrawableColorFormatSRGBA8888;
    glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    
    glClearColor(0.64, 0.53, 0.73, 1);
    
}
```

#### 5.顶点信息相关配置
```

/// 配置顶点信息
///
- (void)vertexCofnig {

    
    // 1.生成一个缓冲区
    GLuint bufferId;
    glGenBuffers(1, &bufferId);
    
    // 2.绑定缓冲区
    glBindBuffer(GL_ARRAY_BUFFER, bufferId);
    
    // 3.将顶点信息传递到缓冲区中
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_READ);
    
    // 4.开启顶点通道attribute
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    
    // 5.标记顶点的位置
    /*
    glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
    
     功能: 上传顶点数据到显存的方法（设置合适的方式从buffer里面读取数据）
     参数列表:
         index,指定要修改的顶点属性的索引值,例如
         size, 每次读取数量。（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a）,纹理则是2个.）
         type,指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。
         normalized,指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
         stride,指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
         ptr指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0
    */
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
}
```

#### 6.纹理信息配置
```
/// 配置纹理信息
///
- (void)textureConfig {
    
    // 1.标记纹理地址
    NSString *filePath = [NSBundle.mainBundle pathForResource:@"xuexiaoban" ofType:@"jpg"];
    
    // 2.设置纹理配置
    //
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft:@(1)};
    
    // 3.加载纹理信息
    NSError *error;
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:&error];
    
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.texture2d0.enabled = GL_TRUE;
    self.baseEffect.texture2d0.name = textureInfo.name;
    
    // 开启纹理attribute通道
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    
    // 标记纹理位置
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);
}

```

#### 7.配置投影矩阵和模型矩阵
```
    /// 配置 投影矩阵 和 模型矩阵
- (void)matrixConfig {
    GLfloat aspect = fabs(self.view.bounds.size.width / self.view.bounds.size.height);
    
    /*
     GLKit提供了GLKMatrix4MakePerspective方法便捷的生成透视投影矩阵。
     方法有4个参数float fovyRadians, float aspect, float nearZ, float farZ。
        @param fovyRadians 视角
        @param aspect 宽高比
        @param nearZ 可视范围在Z轴的起点到原点(0,0,0)的距离
        @param farZ 可视范围在Z轴的终点到原点(0,0,0)的距离
     */
    GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0), aspect, 0.1, 100.0);
    self.baseEffect.transform.projectionMatrix = projectionMatrix;
    
    GLKMatrix4 modelviewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0, 0, -4.0);
    self.baseEffect.transform.modelviewMatrix = modelviewMatrix;
    
    
}
```

#### 8.设置代理
```
@interface ViewController () <GLKViewDelegate>

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    
    // 清空颜色缓冲区
    glClear(GL_COLOR_BUFFER_BIT);
    
    // 准备纹理绘制
    [self.baseEffect prepareToDraw];
    
    // 设置绘制方式
    glDrawArrays(GL_TRIANGLES, 0, 6);
}
```

#### 9.运行起来吧
![图片加载结果](https://upload-images.jianshu.io/upload_images/11398671-ba6f4de905f1d305.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)