基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之Shader准备（7）

Cocos2d-x底层图形绘制是使用OpenGL ES协议的。OpenGL ES是什么呢?

OpenGL ES(OpenGl for Embedded System)是OpenGL三维图形API的子集，针对手机、Pad和游戏主机等嵌入式设备而设计。该API由Khronos集团定义推广，Khronos是一个图形软硬件行业协会，该协会主要关注图形和多媒体方面的开放标准。OpenGL ES是OpenGL三维图形API的子集，针对手机、Pad和游戏主机等嵌入式设备而设计。Cocos2d-x底层图形渲染使用OpenGL ES2.x新特性可编程着色器(Shader)，本文就详细介绍shader的使用流程以及shader程序的保存方式等

OpenGL ES是从OpenGL剪裁或定制过来了，去除了glBegin/glEnd,四边形(GL_QUADS)，多边形(GL_POLYGON)等复杂图元等许多非必要的特性。经过多年发展，现在主要有两个版本,OpenGLES1.x针对固定管线硬件，OpenGL ES2.x针对可编程管线硬件。OpenGL ES1.0是以OpenGL1.3规范为基础的，OpenGL ES1.1是以OpenGL1.5为基础的，他们分别又支持common和commonlite两种profile。OpenGL ES2.0是参照OpenGL2.0规范定义的。

从Cocos2d-x 2.x版本开始，Cocos2d-x底层图形渲染使用OpenGL ES2.x新特性可编程着色器(Shader)，下面首先介绍Shader的使用流程：

xxxxx… //Shader程序

1、创建着色器对象：glCreateShader

2、着色器对象关联着色器代码：glShaderSource

3、把着色器源代码编译成目标代码：glCompileShader

4、验证着色器是否已经变异通过：glGetShaderiv、glGetShaderInfoLog

5、创建一个着色器程序：glCreatePragram

6、把着色器链接到着色器程序中：glAttachShader

7、链接着色器程序：glLinkProgram

8、验证着色器程序是否链接成功：glGetProgramiv、glGetProgramInfoLog

9、使用着色器程序进行定点或片段处理：glUseProgram

在Cocos2d-x引擎中GLProgramCache类扮演着一个重要的角色，初始化并且保存Shader程序；并且为需要渲染的元素提供需要的Shader程序：

classCC_DLL GLProgramCache : public Ref
{
public:
    /**
     * @构造函数
     */
    GLProgramCache();
    /**
     * @析构函数
     */
    ~GLProgramCache();  

    /** 单例方法 */
    static GLProgramCache* getInstance();  

    /**清除单例*/
    static void destroyInstance();  

    /**加载Shader程序*/
    void loadDefaultGLPrograms();
    CC_DEPRECATED_ATTRIBUTE void loadDefaultShaders(){ loadDefaultGLPrograms(); }  

    /**重新加载Shader程序 */
    void reloadDefaultGLPrograms();
    CC_DEPRECATED_ATTRIBUTE void reloadDefaultShaders(){ reloadDefaultGLPrograms(); }  

    /** 使用Key获取Shader程序
     */
    GLProgram * getGLProgram(const std::string &key);
    CC_DEPRECATED_ATTRIBUTE GLProgram * getProgram(conststd::string &key) { return getGLProgram(key); }
    CC_DEPRECATED_ATTRIBUTE GLProgram * programForKey(conststd::string &key){ return getGLProgram(key); }  

    /** 将Shader程序加入GLProgramCache单例中 */
    void addGLProgram(GLProgram* program, conststd::string &key);
    CC_DEPRECATED_ATTRIBUTE void addProgram(GLProgram*program, const std::string &key) { addGLProgram(program, key); }  

private:
    bool init();
    void loadDefaultGLProgram(GLProgram *program,int type);  

//使用字典programs保存所有的Shader程序
    std::unordered_map<std::string, GLProgram*>_programs;
};

下面为单例方法getInstance：

staticGLProgramCache *_sharedGLProgramCache = 0;
GLProgramCache*GLProgramCache::getInstance()
{
    if (!_sharedGLProgramCache) {
        _sharedGLProgramCache = new GLProgramCache();
        if (!_sharedGLProgramCache->init())
        {
            CC_SAFE_DELETE(_sharedGLProgramCache);
        }
    }
    return _sharedGLProgramCache;
}

1、  第一次调用GLProgramCache::getInstance()方法时会new一个GLProgramCache实例方法

2、  初始化GLProgramCache实例方法

3、  方法单例_sharedGLProgramCache

下面为GLProgramCache的init方法：

boolGLProgramCache::init()
{
    loadDefaultGLPrograms();
    return true;
}
voidGLProgramCache::loadDefaultGLPrograms()
{
    GLProgram *p = new GLProgram();
    loadDefaultGLProgram(p, kShaderType_PositionTextureColor);_programs.insert( std::make_pair( GLProgram::SHADER_NAME_POSITION_TEXTURE_COLOR,p ) );
    ……
}

1、在GLProgramCache::init中会调用加载Shader方法loadDefaultGLPrograms

2、在loadDefaultGLPrograms方法中首先会创建一个GLProgram对象

3、将对应名称的Shader加载到GLProgram对象中

4、将GLProgram对象插入到字典_programs中

在loadDefaultGLProgram方法中：

voidGLProgramCache::loadDefaultGLProgram(GLProgram *p, int type)
{
    switch (type) {
        case kShaderType_PositionTextureColor:
            p->initWithByteArrays(ccPositionTextureColor_vert,ccPositionTextureColor_frag);
            break;
        ………
        default:
            CCLOG("cocos2d: %s:%d, errorshader type", __FUNCTION__, __LINE__);
            return;
    }  

    p->link();
    p->updateUniforms();  

    CHECK_GL_ERROR_DEBUG();
}

1、 根据GLProgram类型使用对应的shader程序初始化GLProgram；在initWithByteArrays中，会将上述Shader使用流程中1-6不走执行

2、 链接Program

3、 获取该Program中的一些Uniform变量，工后续使用

下面看一下Cocos2d-x中Shader程序的保存方式

在cocos2d\cocos\renderer\ccShaders.cpp中:

#include"ccShader_Position_uColor.frag"
#include"ccShader_Position_uColor.vert"
……

ccShader_Position_uColor.vert文件：

constchar* ccPosition_uColor_vert = STRINGIFY(  

attributevec4 a_position;
uniformvec4 u_color;
uniformfloat u_pointSize;  

\n#ifdefGL_ES\n
varyinglowp vec4 v_fragmentColor;
\n#else\n
varyingvec4 v_fragmentColor;
\n#endif\n  

voidmain()
{
    gl_Position = CC_MVPMatrix * a_position;
    gl_PointSize = u_pointSize;
    v_fragmentColor = u_color;
}
);

这里定义了ccPosition_uColor_vert变量，该顶点着色器的功能室使用矩阵计算OpenGL中顶点的位置；

ccShader_Position_uColor.frag文件：

constchar* ccPosition_uColor_frag = STRINGIFY(  

\n#ifdefGL_ES\n
precisionlowp float;
\n#endif\n  

varyingvec4 v_fragmentColor;  

voidmain()
{
    gl_FragColor = v_fragmentColor;
}
);

这里定义了ccPosition_uColor_frag变量，该片段Shader的功能就是设置顶点的颜色；

上面两段Shader程序会字符串的形式传入initWithByteArrays方法中，下面为initWithByteArrays方法：

boolGLProgram::initWithByteArrays(const GLchar* vShaderByteArray, const GLchar* fShaderByteArray)
{
    ……//Windows平台单独设定
    _program = glCreateProgram();
    CHECK_GL_ERROR_DEBUG();  

    _vertShader = _fragShader = 0;  

    if (vShaderByteArray)
    {
        if (!compileShader(&_vertShader, GL_VERTEX_SHADER,vShaderByteArray))
        {
            CCLOG("cocos2d: ERROR: Failedto compile vertex shader");
            return false;
       }
    }  

    // Create and compile fragment shader
    if (fShaderByteArray)
    {
        if (!compileShader(&_fragShader, GL_FRAGMENT_SHADER,fShaderByteArray))
        {
            CCLOG("cocos2d: ERROR: Failedto compile fragment shader");
            return false;
        }
    }  

    if (_vertShader)
    {
        glAttachShader(_program, _vertShader);
    }
    CHECK_GL_ERROR_DEBUG();  

    if (_fragShader)
    {
        glAttachShader(_program, _fragShader);
    }
    _hashForUniforms = nullptr;  

    CHECK_GL_ERROR_DEBUG();
    ……//Windows平台单独设定
    return true;
}

1、如果顶点Shader不为空，编译顶点Shader

2、如果片段Shader不为空，编译片段Shader

3、将program和顶点Shader绑定

4、将program和片段Shader绑定

在compileShader方法中：

boolGLProgram::compileShader(GLuint * shader, GLenum type, const GLchar* source)
{
    GLint status;
    if (!source)  return false;
const GLchar *sources[] = {
   ……//特殊平台需要的Uniform变量
        "uniform mat4 CC_PMatrix;\n"
        "uniform mat4 CC_MVMatrix;\n"
        "uniform mat4CC_MVPMatrix;\n"
        "uniform vec4 CC_Time;\n"
        "uniform vec4 CC_SinTime;\n"
        "uniform vec4 CC_CosTime;\n"
        "uniform vec4 CC_Random01;\n"
        "uniform sampler2DCC_Texture0;\n"
        "uniform sampler2DCC_Texture1;\n"
        "uniform sampler2DCC_Texture2;\n"
        "uniform sampler2DCC_Texture3;\n"
        "//CC INCLUDES END\n\n",
        source,
    };  

    *shader = glCreateShader(type);
    glShaderSource(*shader, sizeof(sources)/sizeof(*sources),sources, nullptr);
    glCompileShader(*shader);  

    glGetShaderiv(*shader, GL_COMPILE_STATUS, &status);
    if (! status) {
        GLsizei length;
        glGetShaderiv(*shader, GL_SHADER_SOURCE_LENGTH,&length);
        GLchar* src = (GLchar *)malloc(sizeof(GLchar)* length);  

        glGetShaderSource(*shader, length, nullptr,src);
        CCLOG("cocos2d: ERROR: Failed tocompile shader:\n%s", src);  

        if (type == GL_VERTEX_SHADER)
            CCLOG("cocos2d: %s", getVertexShaderLog().c_str());
        else
            CCLOG("cocos2d: %s", getFragmentShaderLog().c_str());
        free(src);
        return false;;
    }
    return (status == GL_TRUE);
}

1、在Shader程序字符串之前加入Shader执行时可能需要的Uniform变量，形成新的字符串

2、执行上述Shader使用流程中步骤1-3

3、验证该Shader有没有编译成功

此时Cocos2d-x中需要使用到的Shader程序都已经准备好了，如何使用后面会继续讲述；对OpenGL Shader（GLSL）不是很了解的同学可以查询一下这方面的资料。

来源网址：http://blog.csdn.net/xinchuantao/article/details/40108753

时间： 2024-10-12 11:02:25

基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之Shader准备（7）的相关文章

基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之LayerColor（8）

在前面文章中讲述了Cocos2d-x引擎OpenGL渲染准备Shader方面,本文主要讲解使用LayerColor来讲述OpenGL的渲染过程. 1.LayerColor对象创建 添加LayerColor元素到游戏中: autolayerColor = LayerColor::create(Color4B(255, 0, 0, 255), 100, 100); layerColor->setPosition(100,100); 下面是LayerColor::create方法: LayerColo

对用OpenGL ES 2.0实现OpenGL ES 1.1的顶点着色器的研究

对用OpenGL ES 2.0实现OpenGL ES 1.1的顶点着色器的研究 想要彻底研究OpenGL ES 2.0与前一代OpenGL的区别,还是要费很大一番精力的.最近在仔细研读<OpenGL ES 2.0 Programming Guide>,虽然这本书最早出版日期是2008年,距今已经7年了,而著作的日期或许还要早上半年到1年,但是目前OpenGL ES 2.0是主流三维开发框架,因此这本书的知识直到现在,依然受用. OpenGL ES 2.0是桌面版OpenGL 2.0的一个子集,

基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个三角形（1）

[本系列转自]http://cn.cocos2d-x.org/tutorial/lists?id=79 前言 在本系列教程中,我会以当下最流行的2D引擎Cocos2d-x为基础,介绍OpenGL ES 2.0的一些基本用法.本系列教程的宗旨是OpenGL扫盲,让大家在使用Cocos2d-x过程中,知其然,更知其所以然.本系列教程不会涉及非常底层的数学原理,同时也不会过多地提及OpenGL本身的一些细节知识.但是我会在每篇文章的最后给出一些参考链接,大家可以顺藤摸瓜,一举Get OpenGL这个新

基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引（4）

在上一篇文章中,我们介绍了uniform和模型-视图-投影变换,相信大家对于OpenGL ES 2.0应该有一点感觉了.在这篇文章中,我们不再画三角形了,改为画四边形.下篇教程,我们就可以画立方体了,到时候就是真3D了. 为什么三角形在OpenGL教程里面这么受欢迎呢?因为在OpenGL的世界里面,所有的几何体都可以用三角形组合出来.我们的四边形也一样,它可以用两个三角形组合出来. 你的第一个四边形 首先,因为OpenGL里面没有直接绘制四边形的命令的,所以我们需要画两个三角形来拼成一个四边形.

基于Cocos2d-x学习OpenGL ES 2.0系列——编写自己的shader（2）

在上篇文章中,我给大家介绍了如何在Cocos2d-x里面绘制一个三角形,当时我们使用的是Cocos2d-x引擎自带的shader和一些辅助函数.在本文中,我将演示一下如何编写自己的shader,同时,我们还会介绍VBO(顶点缓冲区对象)和VAO(顶点数组对象)的基本用法. 在编写自己的shader之前,我觉得有必要提一下OpenGL渲染管线. 理解OpenGL渲染管线,对于学习OpenGL非常重要.下面是OpenGL渲染管线的示意图:(图中淡蓝色区域是可以编程的阶段) 此图是从wiki中拿过来的

基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个立方体（5）

在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率. 本教程将带领大家一起走进3D--绘制一个立方体.其实画立方体本质上和画三角形没什么区别,所有的模型最终都要转换为三角形. 同时,本文还会介绍如何通过修改MVP矩阵来让此立方体不停地旋转.另外,大家还可以动手去修改本教程的示例代码,借此我们可以更加深入地理解OpenGL的normalized device space. 准备立方体数据 在开始真正的绘制代码之前,我们先要准备好数据.首先,我们需

基于Cocos2d-x学习OpenGL ES 2.0系列——初识MVP（3）

在上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix.它其实是一个uniform,每一个Cocos2d-x预定义的shader都包含有这个uniform,但是如果你在shader里面不使用这个变量的话,OpenGL底层会把它优化掉. 但是,CC_MVPMatrix是在什么时候设置进来的呢?我在shader里面明明没有看到它,它从哪儿来的?别急,请继续往下读. 初识Uniform 在回答上面几个问题之前,让我们先来介绍一下什么是uniform.简单来说,un

基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图（6）

在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-Projection)变换. 本文将在教程4的基础之上,添加纹理贴图支持.最后,本文会把纹理贴图扩展至3D立方体上面. 基本方法 当我们把一张图片加载到内存里面之后,它是不能直接被GPU绘制出来的,纹理贴图过程如下: 首先,我们为之前的顶点添加纹理坐标属性并传到vertex shader里面去: 然后

Chapter 1 : OpenGLES 3.0 简介 （2）—— OpenGL ES 3.0

管道 如前所属,本书讲解的API版本是OpenGL ES 3.0.本书的目标是,深入讲解OpenGL ES 3.0的技术细节,给出具体的例子来说明如何使用某个特性,并且讨论了各种性能优化技术.当您读完这本书,您应该可以对OpenGL ES 3.0API有一个很好的把握.您将可以轻松的写出让人新服的OpenGL ES 3.0的应用程序,并且您不必通过阅读多种OpenGL ES的规范来搞懂某个特性是如何工作的. OpenGL ES 3.0实现了可编程着色图形管道.OpenGL ES 3.0规范包含两