OpenGL-ES 学习(6)---- 立方体绘制

立方体绘制基本原理

一个立方体是由8个顶点组成,共6个面,所以绘制立方体本质上就是绘制这6个面共12个三角形
Cube

顶点的坐标体系如下图所示,三维坐标的中心原点位于立方体的中心,但是要特别注意的是,前后方向表示的是Z轴,上下方向表示的是Y轴
CubeCoord

立方体的顶点坐标和绘制顺序

立方体坐标定义如下:

static GLfloat vertices[] = {
        // 位置           // 颜色
        -0.5f, -0.5f, -0.5f,  1.0f, 0.0f, 0.0f,  // 左下后 红色
        0.5f, -0.5f, -0.5f,  0.0f, 1.0f, 0.0f,  // 右下后 绿色
        0.5f,  0.5f, -0.5f,  0.0f, 0.0f, 1.0f,  // 右上后 蓝色
        -0.5f,  0.5f, -0.5f,  1.0f, 1.0f, 0.0f,  // 左上后 黄色
        -0.5f, -0.5f,  0.5f,  0.0f, 1.0f, 1.0f,  // 左下前 青色
        0.5f, -0.5f,  0.5f,  1.0f, 0.0f, 1.0f,  // 右下前 品红
        0.5f,  0.5f,  0.5f,  0.5f, 0.5f, 0.5f,  // 右上前 灰色
        -0.5f,  0.5f,  0.5f,  1.0f, 1.0f, 1.0f   // 左上前 白色
};

// 立方体索引数据
static GLuint indices[] = {
        // 后面
        0, 1, 2,
        2, 3, 0,
        // 前面
        4, 5, 6,
        6, 7, 4,
        // 左面
        0, 4, 7,
        7, 3, 0,
        // 右面
        1, 5, 6,
        6, 2, 1,
        // 底面
        0, 1, 5,
        5, 4, 0,
        // 顶面
        3, 2, 6,
        6, 7, 3
};

在这里vertices定义不同的顶点,indices数组中表示不同顶点的绘制顺序,每三个顶点构成一个三角形,最后由 glDrawElements(GL_TRIANGLES,36,GL_UNSIGNED_INT,0);每三个顶点为一组绘制共12个三角形,不同的面和顶点的绑定关系如下:
Front
Back
Bottom
Top
Left
Right

立方体颜色和着色器

这里为立方体的每个顶点定义不同的颜色,同时在VertexShader中将颜色传递给FragmentShader,这样 FragmentShader会得到经过插值后的每个片元的颜色,并将这个颜色设置为最终的显示,实现的是一个渐变色的效果,shader 程序如下:

static const char* vertexShaderSource =
        "#version 300 es                            \n"
        "precision mediump float;\n"
        "uniform mat4 u_mvpMatrix;                   \n"
        "layout(location = 0) in vec3 a_position;   \n"
        "layout(location = 1) in vec3 a_color;      \n"
        "out vec3 v_color;                          \n"
        "void main() {\n"
        "    gl_Position = u_mvpMatrix*vec4(a_position,1.0);\n"
        "    v_color = a_color;                     \n"
        "}\n";

// Fragment Shader source code
static const char* fragmentShaderSource =
        "#version 300 es                            \n"
        "precision mediump float;\n"
        "layout(location = 0) out vec4 outColor;             \n"
        "in vec3 v_color;           \n"
        "void main() {\n"
        "   outColor = vec4(v_color, 1.0);\n"
        "}\n";
实现效果和参考代码

最终实现效果:
CubeEffectct01
CubeEffect02

参考代码如下:

Note: 这里还使用了ModeViewProject Matrix实现了旋转的效果,同时使用VAO,VBO,EBO实现了对顶点内容和顶点Index的缓冲

typedef struct {
    GLuint programObject;
    GLuint vboIds[2];
    GLuint vaoId;
    uint64_t timeInMiliSeconds;
    GLint   mvpLoc;
    GLfloat   angle;
    GLint  deltaTime;
    ESMatrix  mvpMatrix;
} UserData;

static GLfloat vertices[] = {
        // 位置           // 颜色
        -0.5f, -0.5f, -0.5f,  1.0f, 0.0f, 0.0f,  // 左下后 红色
        0.5f, -0.5f, -0.5f,  0.0f, 1.0f, 0.0f,  // 右下后 绿色
        0.5f,  0.5f, -0.5f,  0.0f, 0.0f, 1.0f,  // 右上后 蓝色
        -0.5f,  0.5f, -0.5f,  1.0f, 1.0f, 0.0f,  // 左上后 黄色
        -0.5f, -0.5f,  0.5f,  0.0f, 1.0f, 1.0f,  // 左下前 青色
        0.5f, -0.5f,  0.5f,  1.0f, 0.0f, 1.0f,  // 右下前 品红
        0.5f,  0.5f,  0.5f,  0.5f, 0.5f, 0.5f,  // 右上前 灰色
        -0.5f,  0.5f,  0.5f,  1.0f, 1.0f, 1.0f   // 左上前 白色
};

// 立方体索引数据
static GLuint indices[] = {
        // 后面
        0, 1, 2,
        2, 3, 0,
        // 前面
        4, 5, 6,
        6, 7, 4,
        // 左面
        0, 4, 7,
        7, 3, 0,
        // 右面
        1, 5, 6,
        6, 2, 1,
        // 底面
        0, 1, 5,
        5, 4, 0,
        // 顶面
        3, 2, 6,
        6, 7, 3
};

static const char* vertexShaderSource =
        "#version 300 es                            \n"
        "precision mediump float;\n"
        "uniform mat4 u_mvpMatrix;                   \n"
        "layout(location = 0) in vec3 a_position;   \n"
        "layout(location = 1) in vec3 a_color;      \n"
        "out vec3 v_color;                          \n"
        "void main() {\n"
        "    gl_Position = u_mvpMatrix*vec4(a_position,1.0);\n"
        "    v_color = a_color;                     \n"
        "}\n";

// Fragment Shader source code
static const char* fragmentShaderSource =
        "#version 300 es                            \n"
        "precision mediump float;\n"
        "layout(location = 0) out vec4 outColor;             \n"
        "in vec3 v_color;           \n"
        "void main() {\n"
        "   outColor = vec4(v_color, 1.0);\n"
        "}\n";

static int initInternal(ESContext* esContext) {
    UserData *userData = esContext->userData;
    // Vertex Shader source code
    GLuint programObject = esLoadProgram(vertexShaderSource, fragmentShaderSource);
    if (programObject == 0) {
        return GL_FALSE;
    }

    // turn on depth test
    glEnable(GL_DEPTH_TEST);
    glDepthFunc(GL_LESS);
    glClearColor(0.0, 0.0, 0.0, 1.0);
    // Store the program object
    userData->programObject = programObject;
    userData->vboIds[0] =  userData->vboIds[1] = 0;
    userData->mvpLoc = glGetUniformLocation(userData->programObject, "u_mvpMatrix");
    userData->angle = 0.0f;

    return GL_TRUE;
}

static void uMVPMatrixUpdateRotate(ESContext *esContext, GLuint deltaTime)
{
    UserData *userData = esContext->userData;
    ESMatrix perspective;
    ESMatrix modelview;
    float    aspect;

    userData->angle +=  1.0f;
    if (userData->angle >= 360.0f) {
        userData->angle -= 360.0f;
    }

    aspect = (GLfloat) esContext->width / (GLfloat) esContext->height;
    esMatrixLoadIdentity(&perspective);
    esMatrixLoadIdentity(&modelview);

    esPerspective(&perspective, 45.0f, aspect, 1.0f, 10.0f);
    esTranslate(&modelview, 0.0, 0.0, -4.0);
    esRotate(&modelview, userData->angle, 0.0, 1.0, 0.0);
    esMatrixMultiply(&userData->mvpMatrix, &modelview, &perspective);
}

static void DrawPrimitiveWithVBOs(ESContext *esContext)
{
    UserData *userData = esContext->userData;
    GLuint   offset = 0;

    // vboIds[0] - used to store vertex attribute data
    // vboIds[l] - used to store element indices
    if (userData->vboIds[0] == 0 && userData->vboIds[1] == 0) {
        // Only allocate on the first draw
        glGenBuffers(2, userData->vboIds);
        glGenVertexArrays(1, &userData->vaoId);
        printf("gen vbo id:%d %d vao id:%d.\n",userData->vboIds[0],userData->vboIds[1],userData->vaoId);

        glBindVertexArray(userData->vaoId);

        glBindBuffer(GL_ARRAY_BUFFER, userData->vboIds[0]);
        glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
        glVertexAttribPointer(0, 3,GL_FLOAT, GL_FALSE, 6*sizeof(GLfloat) , NULL);
        glEnableVertexAttribArray(0);
        glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6*sizeof(GLfloat) ,(void*)(3*sizeof(GLfloat)));
        glEnableVertexAttribArray(1);

        // notice using GL_ARRAY_BUFFER
        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->vboIds[1]);
        glBufferData(GL_ELEMENT_ARRAY_BUFFER,sizeof(indices), indices, GL_STATIC_DRAW);

        glBindVertexArray(0);
    }

    glBindVertexArray(userData->vaoId);
    glUniformMatrix4fv(userData->mvpLoc, 1, GL_FALSE, (GLfloat *)&userData->mvpMatrix.m[0][0]);
    glDrawElements(GL_TRIANGLES,36,GL_UNSIGNED_INT,0);


    glBindVertexArray(0);
}

static int drawLoopInternal(ESContext* esContext) {
    UserData *userData = esContext->userData;
    struct timespec currentts;
    clock_gettime(CLOCK_REALTIME, &currentts);
    uint64_t milliseconds = currentts.tv_sec * 1000LL + currentts.tv_nsec / 1000000;
    int periodInMs = milliseconds - userData->timeInMiliSeconds;
    userData->timeInMiliSeconds = milliseconds;
    userData->deltaTime++;
    //printf("current time in milliseconds %lld period:%d\n",milliseconds, (periodInMs > 0 ? periodInMs: -1));

    // Set the viewport
    glViewport(0, 0, 640, 480);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glUseProgram(userData->programObject);

    uMVPMatrixUpdateRotate(esContext,userData->deltaTime);
    DrawPrimitiveWithVBOs(esContext);
    // Swap buffers
    eglSwapBuffers(esContext->eglDisplay, esContext->eglSurface);
}

static int cleanupInternal(ESContext* esContext) {
    printf("%s enter!.\n",__FUNCTION__);
    UserData *userData = esContext->userData;
    glDeleteProgram(userData->programObject);
    eglDestroySurface(esContext->eglDisplay, esContext->eglSurface);
    eglDestroyContext(esContext->eglDisplay, esContext->eglContext);
    eglTerminate(esContext->eglDisplay);
    XDestroyWindow(esContext->x_display, esContext->win);
    XCloseDisplay(esContext->x_display);
    return GL_TRUE;
}


int testbasicDrawCube(ESContext* esContext) {
    printf("%s enter!.\n", __FUNCTION__);
    esContext->userData = (UserData*)malloc(sizeof(UserData));
    esCreateWindow(esContext, esContext->testcaseName,640, 480, ES_WINDOW_DEPTH);
    initInternal(esContext);
    while (1) {
        XEvent xev;
        while (XPending(esContext->x_display)) {
            XNextEvent(esContext->x_display, &xev);
            if (xev.type == KeyPress) {
                cleanupInternal(esContext);
            }
        }
        drawLoopInternal(esContext);
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值