OpenGL ES实践教程（三）镜子效果

落影

发布于 2018-04-27 16:46:06

1.5K0

发布于 2018-04-27 16:46:06

文章被收录于专栏：落影的专栏落影的专栏

教程

OpenGLES实践教程1-Demo01-AVPlayer

OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染

其他教程请移步OpenGL ES文集，这一篇介绍帧缓存、Eye坐标系、OpenGL ES调试技巧。

核心思路

1、定义两个着色器，mBaseEffect用于渲染四棱锥，包括渲染到屏幕和自定义帧缓存；mMirrorEffect用于渲染镜子。

2、渲染mBaseEffect到自定义帧缓存，设置mMirrorEffect纹理为自定义帧缓存，渲染mMirrorEffect的镜子效果，再绘制mBaseEffect到屏幕的图形。

效果展示

具体细节

1、帧缓存

OpenGL ES的绘制都是输出到帧缓存，GLKView的帧缓存会显示到屏幕。

- (void)extraInitWithWidth:(GLint)width height:(GLint)height;介绍了如何初始化一个帧缓存。

最关键的一个函数

glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, self.mExtraTexture, 0);

表示把之前创建的纹理挂载到帧缓存的颜色输出。

下面是渲染的代码：

1、绑定帧缓存；
2、清理上次绘制的颜色和缓冲区；
3、绘制图形；
4、设置mMirrorEffect的纹理；
- (void)renderFBO {
    glBindTexture(GL_TEXTURE_2D, 0);
    glBindFramebuffer(GL_FRAMEBUFFER, self.mExtraFBO);
    
    //如果视口和主缓存的不同，需要根据当前的大小调整，同时在下面的绘制时需要调整glviewport
    //    glViewport(0, 0, const_length, const_length)
    glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    [self.mEffect prepareToDraw];
    glDrawElements(GL_TRIANGLES, self.mCount, GL_UNSIGNED_INT, 0);
    
    glBindFramebuffer(GL_FRAMEBUFFER, self.mDefaultFBO);
    self.mMirrorEffect.texture2d0.name = self.mExtraTexture;
}

在开始绘制mBaseEffect到屏幕的图形之前，切记添加

[((GLKView *) self.view) bindDrawable];

2、eye坐标系

OpenGL ES的坐标变换

如上图，eye坐标系存在ModelViewTransform到ProjectionTransform过程中，表现在代码就是self.mMirrorEffect.transform.modelviewMatrix的矩阵。

GLKit提供了GLKMatrix4MakeLookAt方法来创建一个modelviewMatrix矩阵。

GLKMatrix4 GLKMatrix4MakeLookAt(
float eyeX, float eyeY, float eyeZ,
float centerX, float centerY, float centerZ,
float upX, float upY, float upZ)

此方法表示eye在（eyeX，eyeY，eyeZ）的坐标，望向（centerX，centerY，centerZ），同时eye坐标系的y轴正方向为（upX，upY，upZ）。

demo中的世界坐标系如下，正方体的长度为1，镜子的长度为2。

正方体的绘制采用普通的平移、旋转的方式，如下

    GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -4.0f);
    modelViewMatrix = GLKMatrix4RotateX(modelViewMatrix, self.mDegreeX);
    modelViewMatrix = GLKMatrix4RotateY(modelViewMatrix, self.mDegreeY);
    modelViewMatrix = GLKMatrix4RotateZ(modelViewMatrix, self.mDegreeZ);
    self.mEffect.transform.modelviewMatrix = modelViewMatrix;

镜子的绘制采用的GLKMatrix4MakeLookAt的方式，如下

    self.mMirrorEffect.transform.modelviewMatrix = GLKMatrix4MakeLookAt(0.0, 3.0, 2.0,
                                                                        0.0, 0.0, -1.0,
                                                                        0, 0, 1);

思考：如何按照eye坐标系来理解正方体的绘制？ By default (with identity matrices) the camera is at (0,0,0) and looks along (0,0,-1) into the screen. 正方体相当于先旋转、再平移(0.0f, 0.0f, -4.0f)，出现在eye在（0，0，0）望向（0，0，-1）的平截体中；镜子相当于在原坐标，出现在 eye在(0.0, 3.0, 2.0)的位置望向(0.0, 0.0, -1.0)的平截体中；