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 = ;
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 = ; 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

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

  1. 基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之LayerColor(8)

    在前面文章中讲述了Cocos2d-x引擎OpenGL渲染准备Shader方面,本文主要讲解使用LayerColor来讲述OpenGL的渲染过程. 1.LayerColor对象创建 添加LayerCol ...

  2. 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)

    在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...

  3. 基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引(4)

    在上一篇文章中,我们介绍了uniform和模型-视图-投影变换,相信大家对于OpenGL ES 2.0应该有一点感觉了.在这篇文章中,我们不再画三角形了,改为画四边形.下篇教程,我们就可以画立方体了, ...

  4. 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个三角形(1)

    前言 在本系列教程中,我会以当下最流行的2D引擎Cocos2d-x为基础,介绍OpenGL ES 2.0的一些基本用法.本系列教程的宗旨是OpenGL扫盲,让大家在使用Cocos2d-x过程中,知其然 ...

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

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

  6. 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个立方体(5)

    在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率. 本教程将带领大家一起走进3D--绘制一个立方体.其实画立方体本质上和画三角形没什么区别,所有的 ...

  7. 基于Cocos2d-x学习OpenGL ES 2.0系列——初识MVP(3)

    在上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix.它其实是一个uniform,每一个Cocos2d-x预定义的shader都包含有这个uniform,但是如 ...

  8. OpenGL ES 3.0顶点着色器(一)

    OpenGL ES 3.0流程图 1.Vertex Shader(顶点着色器) 顶点着色实现了一种通用的可编程方法操作顶点. 顶点着色器的输入包括以下几个: • Shader program.程序的顶 ...

  9. Beginning OpenGL ES 2.0 with GLKit Part 1

    Update 10/24/12: If you’d like a new version of this tutorial fully updated for iOS 6 and Xcode 4.5, ...

随机推荐

  1. iOS文件和目录操作,iOS文件操作,NSFileManager使用文件操作:

    NSFileManager常用的文件方法: -(NSData*)contentsAtPath:path 从一个文件中读取数据 -(BOLL)createFileAtPath:path contents ...

  2. 【WPF】动态设置Binding的ConverterParameter转换器参数

    问题:XAML中,想要在一个Bingding语句中再次Bingding. Source="{Binding Path=Image,Converter={StaticResource UMat ...

  3. 【WPF】ListBox使用UserContrl作为子控件,引入UserContrl界面

    <ListBox x:Name="housePlansLB" Margin="0" ItemsSource="{Binding HousePla ...

  4. SpringMVC 之类型转换Converter详解转载

    SpringMVC之类型转换Converter详解 本文转载 http://www.tuicool.com/articles/uUjaum 1.1     目录 1.1      目录 1.2     ...

  5. Jquery解析json数组字符串

    最近在工作中用到了Jquery来解析json字符串,网上解析jquery解析json单个对象的实例不少,但是jquery解析json数组的实例却是不多,下面我举一个简单的例子来跟大家分享与一下,本人水 ...

  6. MDL---Material Design Lite框架推荐

    INTRO material design相比不会陌生, 现在的移动端基本遵循了这个设计规范, 微软退出过一个残次品universal design(花了半个月时间赶出来的规范)也是借鉴了MD的思想, ...

  7. java- 控制double输出的小数点位数

    像C语言直接  printf("%f.02",float); 非常简单,还可以控制输出的缩距,很是方便. Java就不一样了,但是java也有它的方便之处 下面用列子来解释,用到的 ...

  8. Understand:高效代码静态分析神器详解(一)

    Understand:高效代码静态分析神器详解(一) Understand   之前用Windows系统,一直用source insight查看代码非常方便,但是年前换到mac下面,虽说很多东西都方便 ...

  9. thinkphp 操作mssql2008

    配置文件 <?php return array( //'配置项'=>'配置值' //'USERNAME'=>'admin', //赋值 //数据库配置信息 'DB_TYPE' =&g ...

  10. Semi-Supervised Classification with Graph Convolutional Networks

    Kipf, Thomas N., and Max Welling. "Semi-supervised classification with graph convolutional netw ...