OpenGL / OpenGL ESの開始：OpenGL ESのレンダリング画像

シリーズ推奨読書：
解決するためのグラフィックスAPIと専門用語：OpenGLの/ OpenGL ESのは開始を取得する
のOpenGL / OpenGL ESのエントリ：レンダリングプロセスおよび固定記憶シェーダ
のOpenGL / OpenGL ESのはじめに：イメージは、実装をレンダリングし、問題のレンダリング
のOpenGL / OpenGL ESの入門：基本的な転換を-知人ベクトル/行列
のOpenGL / OpenGL ESのエントリ：プローブテクスチャ-分析共通のAPI
のOpenGL / OpenGL ESのエントリー：テクスチャ-事例分析及びテクスチャ座標（ピラミッド）
のOpenGL / OpenGL ESのエントリ：頂点シェーダ及びフラグメントシェーダ（OpenGLのトランジションESのOpenGL）
のOpenGL / OpenGL ESのエントリ：GLKitとAPIの紹介へ
のOpenGL / OpenGL ESのエントリ：GLKitとユースケース

OpenGL ESのレンダリング画像

前回の記事では、我々は使用しOpenGL、GLKit画像をレンダリングするなど、この記事では、我々は、使用しOpenGL ESた画像表示をレンダリングします。

フレームバッファオブジェクト（FRAMEBUFFER）

OpenGLオブジェクトの所望の状態を描画するフレームバッファは、フレームバッファは、目標（なり、カプセル化されているFBO）。フレームバッファは、「緩衝地帯」という言葉の名前が含まれていますが、実際にそれがバッファではありませんが。実際には、フレーム・バッファ・オブジェクトの実メモリ記憶空間とが関連しています。フレームバッファオブジェクトが他のオブジェクトは、メモリ記憶装置を持たないと、このような描画バッファ（として、レンダリングすることができる保持できる容器であるRBO）、及びテクスチャバッファ（TBO）。このように、フレーム・バッファ・オブジェクトは、に格納することができるOpenGL出力線を一緒に結合するために必要な状態および表面。

使用FBOに描画するために画像を追加する必要がFBO。いったんFBOは、設定を作成して結合されます。ほとんどのOpenGL実行としてのウィンドウへのレンダリングなどの操作が、出力はにバインド保存されますFBOの画像。

一つだけFBOが描くに結合することができ、かつ唯一のそれらのFBOを読むに結合することができます。

新しいFBOを作成します。

GLuint buffer;
glGenFramebuffers(1, &buffer);
// 然后在绑定一个新的FBO来修改和使用
glBindFramebuffer(GL_FRAMEBUFFER, buffer);
// 将渲染缓存区RenderBuffer通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, buffer);
复制代码

フレームバッファを生成した後、する必要があるrenderbuffer従っframebuffer結合、呼び出しglFramebufferRenderbuffer後者の作用を描画するために、対応するアタッチメントポイントにバインドする機能を

バインドするにはGL_FRAMEBUFFER、ターゲットは、すべての読み取りおよび書き込み操作は、現在バインドされているフレームバッファにフレームバッファに影響します。また使用された、読んで標的に結合または書き込むために、フレームバッファから分離することができGL_READ_FRAMEBUFFER、またはGL_DRAW_FRAMEBUFFERそれを行うには。バインドされている場合GL_READ_FRAMEBUFFERのように、すべての読み取り操作を行うことができ、glReadPixelsこの機能を使用しています。にバインドされGL_DRAW_FRAMEBUFFER、レンダリング、空や他の書き込み操作を可能にします。あなたがすることによって分離する必要はありませんほとんどの時間は、通常2つが結合しているGL_FRAMEBUFFERライン。

FBOは、破壊された使用を終了してFBOを、またはそれらが終了する前にクリアされると、削除したいです。

glDeleteFramebuffers(1, &buffer);
复制代码

バッファ・オブジェクトをレンダリング（レンダ、RBO）

renderbufferオブジェクトは、アプリケーションによって割り当てられた2D画像バッファです。renderbuffer分配及び貯蔵は、色、デプス、ステンシル、または値を使用することができます。一つは、それはまたすることができframebuffer、取付カラー、深さ、ステンシルとして使用することができます。Aは、renderbuffer描画面を提供し、あなたが与えられてもよいウインドウスクリーンシステムと類似しているFBO所望の任意選択RBOの組み合わせを。

そして、FBO類似し、RBO修正するためにバインドする必要があります。あなただけの正当な宛先バッファをレンダリングするときにバインドしますGL_RENDERBUFFER。

gluint buffer;
glGenRenderbuffers(1, &buffer);
glBindRenderbuffer(GL_RENDERBUFFER, buffer);
复制代码

OpenGL ESのレンダリング画像のコード例

ケースの目標

• EAGLレンダリング表面作成画面
• 頂点/フラグメントシェーダのロード
• プログラム・オブジェクトを作成し、リンク頂点/フラグメントシェーダおよびプログラム・オブジェクトをリンク
• ビューポートを設定します。
• カラーバッファをクリア
• シンプルなプリミティブの描画
• でカラーバッファの内容をEAGLレンダリングするウィンドウのパフォーマンス

実装するためのプロセスのレンダリング画像

特定のコードの実装

シェーダファイルを作成します。

ではXcode、次のように、新しい空白の文書を作成します

そして、名前

彼らは簡単に定義することができ、ファイル、および独自のサフィックスの名前でも簡単に文字列として定義することができ、頂点シェーダは名前の例として、ため、関連付けることが最善のことができるだろう vsh 。

頂点シェーダコード

// 顶点坐标
attribute vec4 position;
// 纹理坐标
attribute vec2 textCoordinate;
// 纹理坐标
varying lowp vec2 varyTextCoord;
void main() {
    varyTextCoord = textCoordinate;
    gl_Position = position;
}
复制代码

ここで不可解なエラーが発生する可能性があり、書面による意見を提出しないことをお勧めです。そしてこのコードの精度を確保する必要がある、何のコードヒントはありません。

でmain関数、varying修飾varyTextCoordフラグメントシェーダテクスチャ座標に送信されます。最後に、組み込み変数にgl_Position割り当て、それ以外のすべての操作が無駄にされ、このステップを忘れないように覚えています。

コードフラグメントシェーダ

// 纹理坐标
varying lowp vec2 varyTextCoord;
// 纹理采样器(获取对应的纹理ID)
uniform sampler2D colorMap;
void main() {
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}
复制代码

texture2D(纹理采样器，纹理坐标)画素に対応するテクスチャ座標を取得し、gl_FragColorだけでなく、組み込み変数、このステップは書くのを忘れないことができます。

集合層

    // 创建特殊图层
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    // 设置scale
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];
    // 设置属性
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
复制代码

CAEAGLLayer提供するように設計されてOpenGL書き換えられるために、さらに必要に応じて、独占的に使用される特殊な層をlayerClass層は、CALayer置き換えCAEAGLLayer。

+ (Class)layerClass {
    return [CAEAGLLayer class];
}
复制代码

あなたが書いていない場合は、次のエラーメッセージが表示されます。

次に説明プロパティを設定し、kEAGLDrawablePropertyRetainedBackingそしてkEAGLDrawablePropertyColorFormat。

kEAGLDrawablePropertyRetainedBacking表示面を示す図と、その内容を保持するかどうか。
kEAGLDrawablePropertyColorFormat図面は、このカラーバッファフォーマットの内部表面を表すkey値に対応するNSStringオブジェクトを指定された特定のカラーバッファ。デフォルトkEAGLColorFormatRGBA8。

kEAGLColorFormatRGBA8：32ビットRGBA色、4×8 = 32ビット
kEAGLColorFormatRGB565：16ビットRGB色
kEAGLColorFormatSRGBA8：sRGBの色再現における標準、赤、緑、青すなわち、CRTディスプレイ、LCDディスプレイ、プロジェクタ、プリンタ、およびその他のデバイスを表します三つの基本的な顔料を使用します。独立した色座標に基づいて、sRGB色空間は、異なる色座標を有するこれらのデバイスのそれぞれの影響を受けることなく、座標系の色で同一の伝送装置に対応する異なる色を利用することができます。

コンテキストを設定します

    // 指定OpenGL ES 渲染API版本，我们使用3.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES3;
    // 创建图形上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
    // 判断是否创建成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    // 设置图形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    // 将局部context，变成全局的
    self.myContext = context;
复制代码

キャッシュを空に

    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
复制代码

buffer分割framebufferとrenderbuffer。どちらframebufferと等価であるrenderbufferマネージャー。frame buffer objectそれが呼び出されますFBO。renderbuffer彼らは三つに分けることができますcolorBuffer：種類depthBuffer、stencilBuffer。

レンダを設定します。

    GLuint buffer;
    glGenRenderbuffers(1, &buffer);
    self.myColorRenderBuffer = buffer;
    
    // 将标识符绑定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    // 将可绘制对象drawable object's  CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
复制代码

設定するフレームバッファ

    GLuint buffer;
    glGenRenderbuffers(1, &buffer);
    self.myColorFrameBuffer = buffer;
    
    // 将标识符绑定到GL_FRAMEBUFFER
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    // 将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
复制代码

フレームバッファを生成した後、する必要があるrenderbuffer従っframebuffer結合、呼び出しglFramebufferRenderbuffer後者の作用を描画するために、対応するアタッチメントポイントにバインドする機能を

描きます

ルーチンのステップ描画：

• 、画面がクリアされ、ビューポートのサイズを鮮明なカラー画面を設定します

    // 设置清屏颜色
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
    // 清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    // 设置视口大小
    CGFloat 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);
复制代码

• 頂点シェーダ、フラグメントシェーダを読み取ります

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

• ロードシェーダ

- (GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag {
    // 定义2个临时着色器对象
    GLuint verShader, fragShader;
    // 创建program
    GLint program = glCreateProgram();
    
    // 编译顶点着色程序、片元着色器程序
    //参数1：编译完存储的底层地址
    //参数2：编译的类型，GL_VERTEX_SHADER（顶点）、GL_FRAGMENT_SHADER(片元)
    //参数3：文件路径
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    // 创建最终的程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    // 释放不需要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    return program;
}
复制代码

• コンパイルされたシェーダ

- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
    // 读取文件路径字符串
    NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar* source = (GLchar *)[content UTF8String];
    
    // 创建一个shader（根据type类型）
    *shader = glCreateShader(type);
    
    // 将着色器源码附加到着色器对象上。
    //参数1：shader,要编译的着色器对象 *shader
    //参数2：numOfStrings,传递的源码字符串数量 1个
    //参数3：strings,着色器程序的源码（真正的着色器程序源码）
    //参数4：lenOfStrings,长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
    glShaderSource(*shader, 1, &source,NULL);
    
    // 把着色器源代码编译成目标代码
    glCompileShader(*shader);
}
复制代码

• リンク、使用glLinkProgram

    // 链接（这里的self.myPrograme就是在上面加载得到的）
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    // 获取链接状态
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
    if (linkStatus == GL_FALSE) {
        // 打印报错信息
        GLchar message[512];
        glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }
    
    NSLog(@"Program Link Success!");
    // 使用program
    glUseProgram(self.myPrograme);
复制代码

• 提供頂点、テクスチャ座標、および処理

    // 前3个是顶点坐标，后2个是纹理坐标
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };
    
    
    // -----处理顶点数据--------
    // 1.顶点缓存区
    GLuint attrBuffer;
    // 2.申请一个缓存区标识符
    glGenBuffers(1, &attrBuffer);
    // 3.将attrBuffer绑定到GL_ARRAY_BUFFER标识符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    // 4.把顶点数据从CPU内存复制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    // 将顶点数据通过myPrograme中的传递到顶点着色程序的position
    // 1.glGetAttribLocation,用来获取vertex attribute的入口的.
    // 2.告诉OpenGL ES,通过glEnableVertexAttribArray，
    // 3.最后数据是通过glVertexAttribPointer传递过去的。
    
    // 注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    // 设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(position);
    
    // 设置读取方式
    //参数1：index,顶点数据的索引
    //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
    //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
    //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
    //参数5：stride,连续顶点属性之间的偏移量，默认为0；
    //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
    
    // ----处理纹理数据-------
    // glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    // 设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(textCoor);
    
    // 设置读取方式
    //参数1：index,顶点数据的索引
    //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
    //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
    //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
    //参数5：stride,连续顶点属性之间的偏移量，默认为0；
    //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
复制代码

コードのこの部分は、前の章で詳しく説明されているので、私はここでは説明しませんが、コード内のコメントに焦点を当て、それはあなたがあまりにもよく理解することができます。

• ロードテクスチャ

    // 将 UIImage 转换为 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判断图片是否获取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    // 读取图片的大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    // 获取图片字节数 宽*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    // 创建上下文
    /*
     参数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);
    

    // 在CGContextRef上--> 将图片绘制出来
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
     CGContextDrawImage 
     参数1：绘图上下文
     参数2：rect坐标
     参数3：绘制的图片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    // 使用默认方式绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);
   
    // 画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    // 绑定纹理到默认的纹理ID（
    glBindTexture(GL_TEXTURE_2D, 0);
    
    // 设置纹理属性
    /*
     参数1：纹理维度
     参数2：线性过滤、为s,t坐标设置模式
     参数3：wrapMode,环绕模式
     */
    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);
    
    float fw = width, fh = height;
    
    // 载入纹理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：纹理数据
     */
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.释放spriteData
    free(spriteData);   
复制代码

上記のコードは、画像から引き出されるコード内のコメントがあるので、逆さまでCGContextDrawImage使用してCore Graphicsフレームワークは、座標系とUIKit同じではありません。UIKit画面の左上隅のフレームの起源、Core Graphics起源のスクリーン枠の左下隅。

画像のフリップは、問題を解決します

以下のコードでは、この問題を修正することができます

    CGRect rect = CGRectMake(0, 0, width, height);
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);
复制代码

理由を説明：
最初のステップ：
CGContextTranslateCTM(spriteContext, 0, rect.size.height);Y軸方向に移動するrect.size.height距離

ステップ：
CGContextScaleCTM(spriteContext, 1.0, -1.0);このコードは、次の図に、y軸方向を回転させる示し

上記の二つのステップの後、グラフィックスがひっくり返さすることができます。

テクスチャサンプラは、画面描画バッファにディスプレイから、図面に設けられています。

    // 设置纹理采样器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    // 从渲染缓冲区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
复制代码

最終レンダリング：

あらゆる手段：

バックフリップ：

ます。https：//juejin.im/post/5cfa680b6fb9a07ef63fced8で再現