OpenGL案例01

作者: 卡布奇诺_95d2 | 来源:发表于2020-08-19 14:35 被阅读0次

OpenGL + OpenGL ES + Metal 系列文章汇
OpenGL案例01
案例06：大球自转+小球公转+移动
OpenGL（九）-- 综合案例（公、自转）
四、 OpenGL ES GLSL图片倒置的翻转解决方案（6种）
案例09：球体世界
案例07：纹理金字塔
了解 OpenGL ES实现自定义编程粒子效果思路
OpenGL ES _ 着色器_ 顶点着色器详解
OpenGL ES _ 入门_01

案例1：绘制甜甜圈自转+小球公转+移动，达到如下效果，这个案例属于OpenGL中比较经典的案例，结合了OpenGL中的大部分知识点。

效果图

从效果图中可以看到，要实现这个效果主要分为四个部分：

地板
甜甜圈
远处静态的小球
绕甜甜圈旋转的小球

接下来我们一步一步来完成。

基本框架

基本框架的搭建跟之前的博客中内容相似，这里就重复讲解。

void RenderScene(void){
    glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
    glutSwapBuffers();
}

void SetupRC(){
    glClearColor(0, 0, 0, 1);
    shaderManager.InitializeStockShaders();
    glEnable(GL_DEPTH_TEST);
}

void SpeacialKeys(int key, int x, int y){
}

void ChangeSize(int w, int h){
    glViewport(0, 0, w, h);
    viewFrustum.SetPerspective(35, float(w)/float(h), 1, 500);
    projectionMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix());
    transformPipeline.SetMatrixStacks(modelViewMatrix, projectionMatrix);
}

int main(int argc, char * argv[]) {
    gltSetWorkingDirectory(argv[0]);
    
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DEPTH | GLUT_RGB | GLUT_DOUBLE);
    glutInitWindowSize(800, 600);
    glutCreateWindow("test");
    
    glutDisplayFunc(RenderScene);
    glutReshapeFunc(ChangeSize);
    glutSpecialFunc(SpeacialKeys);
    
    GLenum error = glewInit();
    if(error != GLEW_OK){
        return 1;
    }
    
    SetupRC();
    glutMainLoop();
    
    return 0;
}

地板

绘制地板相对来说较容易，分为以下2步：

在SetupRC函数里面准备好顶点数据。
在RenderScene函数里面使用平面着色器进行绘制。

void SetupRC(){
    glClearColor(0, 0, 0, 1);
    shaderManager.InitializeStockShaders();
    glEnable(GL_DEPTH_TEST);

    //3. 地板数据(物体坐标系)
    floorBatch.Begin(GL_LINES, 324);
    for(GLfloat x = -20.0; x <= 20.0f; x+= 0.5) {
        floorBatch.Vertex3f(x, -0.55f, 20.0f);
        floorBatch.Vertex3f(x, -0.55f, -20.0f);
        
        floorBatch.Vertex3f(20.0f, -0.55f, x);
        floorBatch.Vertex3f(-20.0f, -0.55f, x);
    }
    floorBatch.End();
}

void RenderScene(void){
    glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
    
    //1. 颜色(地板)
    static GLfloat vFloorColor[] = {0.0f,1.0f,0.0f,1.0f};
    shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vFloorColor);
    floorBatch.Draw();
    glutSwapBuffers();
}

地板绘制效果如下：

地板效果图

甜甜圈

在地板绘制的基础上来绘制甜甜圈，且甜甜圈是有自转功能的。
绘制甜甜圈分为以下3步：

在SetupRC函数里面利用系统模型创建甜甜圈。
在RenderScene函数里面：
- 设置定时器，基于时间的变化，记录当前时间的角度。
- 设置甜甜圈变换（平移、旋转），并绘制甜甜圈。
- 开启定时器，重新提交新的渲染请求，实现定时触发的效果
在SpeacialKeys函数进行键位控制。

void SetupRC(){
    glClearColor(0, 0, 0, 1);
    shaderManager.InitializeStockShaders();
    glEnable(GL_DEPTH_TEST);
    
    //3. 地板数据(物体坐标系)
    floorBatch.Begin(GL_LINES, 324);
    for(GLfloat x = -20.0; x <= 20.0f; x+= 0.5) {
        floorBatch.Vertex3f(x, -0.55f, 20.0f);
        floorBatch.Vertex3f(x, -0.55f, -20.0f);
        
        floorBatch.Vertex3f(20.0f, -0.55f, x);
        floorBatch.Vertex3f(-20.0f, -0.55f, x);
    }
    floorBatch.End();
    
    //4. 设置一个甜甜圈
    gltMakeTorus(torusBatch, 0.4f, 0.2f, 52, 26);
}
void RenderScene(void){
    glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
    
    //1. 颜色(地板,甜甜圈颜色)
    static GLfloat vFloorColor[] = {0.0f,1.0f,0.0f,1.0f};
    static GLfloat vTorusColor[] = {1.0f,0.0f,0.0f,1.0f};
    
    shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vFloorColor);
    floorBatch.Draw();
    
    //2. 动画
    static CStopWatch rotTimer;
    float yRot = rotTimer.GetElapsedSeconds()*60.0f;
    modelViewMatrix.PushMatrix();
    M3DMatrix44f mCamer;
    cameraFrame.GetCameraMatrix(mCamer);
    modelViewMatrix.PushMatrix(mCamer);
    
    //5. 设置点光源位置
    M3DVector4f vLightPos = {0,10,5,1};
    modelViewMatrix.Translate(0.0f, 0.0f, -3.0f);
    //7. 大球
    modelViewMatrix.PushMatrix();
    modelViewMatrix.Rotate(yRot, 0, 1, 0);
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vLightPos, vTorusColor);
    torusBatch.Draw();
    modelViewMatrix.PopMatrix();

    modelViewMatrix.PopMatrix();
    
    glutSwapBuffers();
    glutPostRedisplay();
}
void SpeacialKeys(int key, int x, int y){
    float linear = 0.1f;
    float angular = float(m3dDegToRad(5.0f));
    switch (key) {
        case GLUT_KEY_UP:
            cameraFrame.MoveForward(linear);
            break;
        case GLUT_KEY_DOWN:
            cameraFrame.MoveForward(-linear);
            break;
        case GLUT_KEY_LEFT:
            cameraFrame.RotateWorld(angular, 0, 1, 0);
            break;
        case GLUT_KEY_RIGHT:
            cameraFrame.RotateWorld(-angular, 0, 1, 0);
            break;
        default:
            break;
    }
    glutPostRedisplay();
}

注意点：
甜甜圈只需要平移一次，因此不需要将平移的操作放入堆栈中。因为一旦放入堆栈中，当pop的时候，又将模型视图移至原位。那后续绘制红甜甜圈转动的小球时又需要将视图往里面移动。有点多此一举。
此处也可以不在这里移动视图，可以在SetupRC函数里面将照相帧移动，如：cameraFrame.MoveForward(-3.0f);
另外，由于实现的是甜甜圈自转，所以在绘制完成之后需要重新提交渲染，不然无法触发下一次的绘制。
地板+甜甜圈绘制效果图如下：

地板+小球

静态小球

在绘制甜甜圈和地板的基础上，继续绘制静态小球，步骤为：

在SetupRC函数初始化小球数据。
在RenderScene函数绘制静态小球。

void SetupRC(){
    glClearColor(0, 0, 0, 1);
    shaderManager.InitializeStockShaders();
    glEnable(GL_DEPTH_TEST);
    
    //3. 地板数据(物体坐标系)
    floorBatch.Begin(GL_LINES, 324);
    for(GLfloat x = -20.0; x <= 20.0f; x+= 0.5) {
        floorBatch.Vertex3f(x, -0.55f, 20.0f);
        floorBatch.Vertex3f(x, -0.55f, -20.0f);
        
        floorBatch.Vertex3f(20.0f, -0.55f, x);
        floorBatch.Vertex3f(-20.0f, -0.55f, x);
    }
    floorBatch.End();
    
    //4. 设置一个甜甜圈
    gltMakeTorus(torusBatch, 0.4f, 0.2f, 52, 26);

    //5. 随机位置放置小球球
    for (int i = 0; i < NUM_SPHERES; i++) {

        //y轴不变，X,Z产生随机值
        GLfloat x = ((GLfloat)((rand() % 400) - 200 ) * 0.1f);
        GLfloat z = ((GLfloat)((rand() % 400) - 200 ) * 0.1f);

        //在y方向，将球体设置为0.0的位置，这使得它们看起来是飘浮在眼睛的高度
        //对spheres数组中的每一个顶点，设置顶点数据
        spheres[i].SetOrigin(x, 0.0f, z);
    }
    
    //6. 绘制小球;
    gltMakeSphere(sphereBatch, 0.1f, 13, 26);
}

void RenderScene(void){
    glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
    
    //1. 颜色(地板,甜甜圈颜色,小球颜色)
    static GLfloat vFloorColor[] = {0.0f,1.0f,0.0f,1.0f};
    static GLfloat vTorusColor[] = {1.0f,0.0f,0.0f,1.0f};
    static GLfloat vSpereColor[] = {0.0f,0.0f,1.0f,1.0f};
    
    shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vFloorColor);
    floorBatch.Draw();
    
    //2. 动画
    static CStopWatch rotTimer;
    float yRot = rotTimer.GetElapsedSeconds()*60.0f;
    
    modelViewMatrix.PushMatrix();
    M3DMatrix44f mCamer;
    cameraFrame.GetCameraMatrix(mCamer);
    modelViewMatrix.MultMatrix(mCamer);
    
    //5. 设置点光源位置
    M3DVector4f vLightPos = {0,10,5,1};
    modelViewMatrix.Translate(0.0f, 0.0f, -3.0f);
    //7. 大球
    modelViewMatrix.PushMatrix();
    modelViewMatrix.Rotate(yRot, 0, 1, 0);
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vLightPos, vTorusColor);
    torusBatch.Draw();
    modelViewMatrix.PopMatrix();

    //8. 小球
    for (int i = 0; i < NUM_SPHERES; i++) {
        modelViewMatrix.PushMatrix();
        modelViewMatrix.MultMatrix(spheres[i]);
        shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vLightPos, vSpereColor);
        sphereBatch.Draw();
        modelViewMatrix.PopMatrix();
    }
    modelViewMatrix.PopMatrix();
    
    glutSwapBuffers();
    glutPostRedisplay();
}

注意点：
这里绘制了50个随机小球，那在SetupRC里面通过循环随机的设置了小球的位置，而小球的本身是通过系统模型函数构建的。
由于需要将随机小球移动到设置的位置，这里就涉及到模型视图变换，因此在RenderScene函数里面是通过循环去移动并绘制的，并且，每一次的绘制都需要PushMatrix，在绘制完成之后再PopMatrix 。
地板+甜甜圈自转+随机位置静态小球效果图如下：

Jietu20200819-140920.gif

绘制公转小球

最后绘制公转的小球了，之前在绘制50个随机小球的时候，已经通过系统函数构建了小球模型，此处可以直接使用小球模型，而不需要重新构建小球模型。
公转小球需要绕甜甜圈旋转，在RenderScene函数中主要的操作步骤是：

设置小球绕y轴旋转
设置小球沿x轴平移
绘制小球

void RenderScene(void){
    glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
    
    //1. 颜色(地板,大球颜色,小球颜色)
    static GLfloat vFloorColor[] = {0.0f,1.0f,0.0f,1.0f};
    static GLfloat vTorusColor[] = {1.0f,0.0f,0.0f,1.0f};
    static GLfloat vSpereColor[] = {0.0f,0.0f,1.0f,1.0f};
    
    shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vFloorColor);
    floorBatch.Draw();
    
    //2. 动画
    static CStopWatch rotTimer;
    float yRot = rotTimer.GetElapsedSeconds()*60.0f;
    
    modelViewMatrix.PushMatrix();
    M3DMatrix44f mCamer;
    cameraFrame.GetCameraMatrix(mCamer);
    modelViewMatrix.MultMatrix(mCamer);
    
    //5. 设置点光源位置
    M3DVector4f vLightPos = {0,10,5,1};
    modelViewMatrix.Translate(0.0f, 0.0f, -5.0f);
    //7. 大球
    modelViewMatrix.PushMatrix();
    modelViewMatrix.Rotate(yRot, 0, 1, 0);
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vLightPos, vTorusColor);
    torusBatch.Draw();
    modelViewMatrix.PopMatrix();

    //8. 小球
    for (int i = 0; i < NUM_SPHERES; i++) {
        modelViewMatrix.PushMatrix();
        modelViewMatrix.MultMatrix(spheres[i]);
        shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vLightPos, vSpereColor);
        sphereBatch.Draw();
        modelViewMatrix.PopMatrix();
    }
    
    modelViewMatrix.PushMatrix();
    modelViewMatrix.Rotate(yRot * -2.0f, 0, 1, 0);
    modelViewMatrix.Translate(0.8f, 0.0f, 0.0f);
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(), transformPipeline.GetProjectionMatrix(), vLightPos, vSpereColor);
    sphereBatch.Draw();
    modelViewMatrix.PopMatrix();

    modelViewMatrix.PopMatrix();
    
    glutSwapBuffers();
    glutPostRedisplay();
}

注意点：
在绘制小球的时候一定要先移动到指定位置再进行旋转，这个顺序是固定的，这是因为矩阵相乘不符合交换律。如果先旋转再移动，则得到的结果是，小球不是绕着甜甜圈旋转，而是小球在指定的位置点自转。
最后在绘制公转小球时，仍然将其压入模型视图矩阵堆栈，此处如果不压栈也是没有关系的，因为在这之后没有其它的绘制操作，也就不存在影响其它绘制的可能，但出于代码严谨性，此处仍然加上了PushMatrix ，并在绘制完成后PopMatrix 。
最后一个PopMatrix 则对应了最开始的PushMatrix，所以牢记，一个PushMatrix对应一个PopMatrix。
此处效果跟要求的效果完全一致了。至此，完成了整个项目。

OpenGL + OpenGL ES + Metal 系列文章汇
更多的文章请查看OpenGL、OpenGL案例、OpenGL ES、OpenGL ES案例、Metal等文集基础...
OpenGL案例01
案例1：绘制甜甜圈自转+小球公转+移动，达到如下效果，这个案例属于OpenGL中比较经典的案例，结合了OpenGL...
案例06：大球自转+小球公转+移动
OpenGL + OpenGL ES +Metal 系列文章汇总这个案例是OpenGL中的一个比较经典的综合案例...
OpenGL（九）-- 综合案例（公、自转）
OpenGL（九）-- 综合案例（公、自转）相信学习过OpenGL的同学应该过玩过这个经典案例：总和案例.gif...
四、 OpenGL ES GLSL图片倒置的翻转解决方案（6种）
OpenGL + OpenGL ES +Metal 系列文章汇总在OpenGL ES 案例04：GLSL加载图片...
案例09：球体世界
OpenGL + OpenGL ES +Metal 系列文章汇总本案例是基于案例06：大球自转+小球公转+移动的...
案例07：纹理金字塔
OpenGL + OpenGL ES +Metal 系列文章汇总本次案例的目的在于理解纹理的使用案例整体效果图...
了解 OpenGL ES实现自定义编程粒子效果思路
OpenGL + OpenGL ES +Metal 系列文章汇总本案例旨在于了解OpenGL ES中自定义编程粒...
OpenGL ES _ 着色器_ 顶点着色器详解
OpenGL ES _ 入门_01OpenGL ES _ 入门_02OpenGL ES _ 入门_03OpenGL...
OpenGL ES _ 入门_01
OpenGL ES _ 入门_01OpenGL ES _ 入门_02OpenGL ES _ 入门_03OpenGL...