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

转载 2017年07月17日 09:26:08

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程序:

复制代码
class CC_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:

复制代码
static GLProgramCache *_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方法:

复制代码
bool GLProgramCache::init()  
{     
    loadDefaultGLPrograms();  
    return true;  
}  
void GLProgramCache::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方法中:

复制代码
void GLProgramCache::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文件:

复制代码
const char* ccPosition_uColor_vert = STRINGIFY(  
    
attribute vec4 a_position;  
uniform vec4 u_color;  
uniform float u_pointSize;  
    
\n#ifdef GL_ES\n  
varying lowp vec4 v_fragmentColor;  
\n#else\n  
varying vec4 v_fragmentColor;  
\n#endif\n  
    
void main()  
{  
    gl_Position = CC_MVPMatrix * a_position;  
    gl_PointSize = u_pointSize;  
    v_fragmentColor = u_color;  
}  
);
复制代码

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

ccShader_Position_uColor.frag文件:

复制代码
const char* ccPosition_uColor_frag = STRINGIFY(  
    
\n#ifdef GL_ES\n  
precision lowp float;  
\n#endif\n  
  
varying vec4 v_fragmentColor;  
    
void main()  
{  
    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

从零开始学习OpenGL ES之二 – 简单绘图概述

还有许多理论知识需要讨论,但与其花许多时间在复杂的数学公式或难以理解的概念上,还不如让我们开始熟悉OpenGL ES的基本绘图功能。 请下载OpenGL Xcode项目模板。我们使用此模板而...
  • eqera
  • eqera
  • 2014年02月05日 12:52
  • 3503

通过opengl es 2.0来实现yuv(NV21)的显示

基本思路参考如下文章,用opengl es2.0 来实现yuv(NV21)的显示。  http://blog.csdn.net/fu_shuwu/article/details/72972312 ...
  • fu_shuwu
  • fu_shuwu
  • 2017年06月10日 14:03
  • 1340

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

在上篇文章中,我给大家介绍了如何在Cocos2d-x里面绘制一个三角形,当时我们使用的是Cocos2d-x引擎自带的shader和一些辅助函数。在本文中,我将演示一下如何编写自己的shader,同时,...
  • czh3642210
  • czh3642210
  • 2017年07月17日 09:21
  • 284

基于OpenGL ES 的深度学习框架编写

本文出自:http://blog.csdn.net/jxt1234and2010/article/details/71056736 基于OpenGL ES的深度学习框架编写 背景与工程...
  • hb707934728
  • hb707934728
  • 2017年05月08日 14:04
  • 1239

【面试必读(编程基础)】OpenGL ES 2.0渲染管线

http://codingnow.cn/opengles/1504.html Opengl es 2.0实现了可编程的图形管线,比起1.x的固定管线要复杂和灵活很多,由两部分规范组成...
  • chrisfxs
  • chrisfxs
  • 2016年11月22日 20:39
  • 877

从零开始学习OpenGL ES之一 – 基本概念

我曾写过一些文章介绍iPhone OpenGL ES编程,但大部分针对的是已经至少懂得一些3D编程知识的人。 作为起点,请下载我的...
  • feifeia007
  • feifeia007
  • 2014年05月04日 16:05
  • 2405

OpenGL ES渲染之Shader准备

转自:http://cn.cocos2d-x.org/tutorial/show?id=1783 Cocos2d-x底层图形绘制是使用OpenGL ES协议的。OpenGL ES是什...
  • azhou_hui
  • azhou_hui
  • 2014年11月07日 17:08
  • 3438

opengl es 2.0 obj导入、光照、混合、雾化

opengl es 2.0 obj导入、光照、混合、雾化 法线 法线是垂直于物体表面的单位长度的向量 在三维空间中垂直于指定平面或垂直于给点曲面上某一点切面的向量,法线向量只表示方向,不表示大小(...
  • keen_zuxwang
  • keen_zuxwang
  • 2017年05月11日 20:48
  • 520

win7下搭建OpenGL ES 2.0开发环境

1. 下载AMD的OpenGL ES2.0的模拟器,下载地址: http://www.opengles-book.com/ESEmulator.2009-04-28-v1.4.APRIL_2009_R...
  • wang15061955806
  • wang15061955806
  • 2016年06月07日 20:35
  • 1258

OpenGL ES2.0教程:编写自己的shader(2)

原文:http://4gamers.cn/blog/2014/06/07/write-your-own-shader/ 在上篇文章中,我给大家介绍了如何在cocos2d-x里面绘制一个三角形,当时我...
  • u013790419
  • u013790419
  • 2014年10月15日 15:32
  • 1414
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之Shader准备(7)
举报原因:
原因补充:

(最多只允许输入30个字)