博客详情

  2. 首页菜单

OpenGL ES渲染之Shader准备介绍

2015年03月24日 10:24 0 点赞 0 评论 更新于 2025-11-21 13:31

Cocos2d-x底层图形绘制采用OpenGL ES协议。那么，OpenGL ES究竟是什么呢？

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

一、OpenGL ES概述

OpenGL ES是从OpenGL剪裁或定制而来，去除了glBegin/glEnd、四边形（GL_QUADS）、多边形（GL_POLYGON）等复杂图元以及许多非必要的特性。经过多年发展，目前主要有两个版本：

  • OpenGL ES1.x：针对固定管线硬件。OpenGL ES1.0以OpenGL1.3规范为基础，OpenGL ES1.1以OpenGL1.5为基础，它们分别支持common和commonlite两种profile。
  • OpenGL ES2.x：针对可编程管线硬件，OpenGL ES2.0是参照OpenGL2.0规范定义的。

从Cocos2d-x 2.x版本开始，Cocos2d-x底层图形渲染开始使用OpenGL ES2.x的可编程着色器（Shader）。接下来，我们先介绍Shader的使用流程。

二、Shader的使用流程

以下是Shader的使用步骤：

  1. 创建着色器对象：使用glCreateShader函数创建着色器对象。
  2. 着色器对象关联着色器代码：通过glShaderSource函数将着色器代码与着色器对象关联起来。
  3. 编译着色器源代码：调用glCompileShader函数把着色器源代码编译成目标代码。
  4. 验证着色器编译结果：使用glGetShaderiv和glGetShaderInfoLog函数验证着色器是否已经编译通过。
  5. 创建着色器程序：利用glCreateProgram函数创建一个着色器程序。
  6. 将着色器链接到着色器程序：使用glAttachShader函数把着色器链接到着色器程序中。
  7. 链接着色器程序：调用glLinkProgram函数链接着色器程序。
  8. 验证着色器程序链接结果：通过glGetProgramiv和glGetProgramInfoLog函数验证着色器程序是否链接成功。
  9. 使用着色器程序：使用glUseProgram函数使用着色器程序进行顶点或片段处理。

三、Cocos2d-x中的GLProgramCache类

在Cocos2d-x引擎中，GLProgramCache类起着重要的作用，它负责初始化并保存Shader程序，同时为需要渲染的元素提供所需的Shader程序。以下是GLProgramCache类的定义：

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(const std::string &key) { return getGLProgram(key); }
CC_DEPRECATED_ATTRIBUTE GLProgram * programForKey(const std::string &key) { return getGLProgram(key); }

/** 将Shader程序加入GLProgramCache单例中 */
void addGLProgram(GLProgram* program, const std::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()方法时，会创建一个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 ) );
// 其他类型的Shader加载...
}

init方法的执行步骤如下：

  1. 在GLProgramCache::init中调用loadDefaultGLPrograms方法加载Shader程序。
  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;
// 其他类型的Shader处理...
default:
CCLOG("cocos2d: %s:%d, error shader 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文件中，包含了多个Shader程序文件：

#include "ccShader_Position_uColor.frag"
#include "ccShader_Position_uColor.vert"
// 其他Shader文件包含...

ccShader_Position_uColor.vert文件

const char* ccPosition_uColor_vert = STRINGIFY(
attribute vec4 a_position;
uniform vec4 u_color;
uniform float u_pointSize;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
#else
varying vec4 v_fragmentColor;
#endif

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

该顶点着色器的功能是使用矩阵计算OpenGL中顶点的位置。

ccShader_Position_uColor.frag文件

const char* ccPosition_uColor_frag = STRINGIFY(
#ifdef GL_ES
precision lowp float;
#endif
varying vec4 v_fragmentColor;

void main()
{
gl_FragColor = v_fragmentColor;
}
);

该片段Shader的功能是设置顶点的颜色。

上述两段Shader程序会以字符串的形式传入initWithByteArrays方法中：

bool GLProgram::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: Failed to compile vertex shader");
return false;
}
}

// 创建并编译片段着色器
if (fShaderByteArray) {
if (!compileShader(&_fragShader, GL_FRAGMENT_SHADER, fShaderByteArray)) {
CCLOG("cocos2d: ERROR: Failed to 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;
}

initWithByteArrays方法的执行步骤如下：

  1. 如果顶点Shader不为空，编译顶点Shader。
  2. 如果片段Shader不为空，编译片段Shader。
  3. 将program和顶点Shader绑定。
  4. 将program和片段Shader绑定。

compileShader方法

bool GLProgram::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 mat4 CC_MVPMatrix;\n",
"uniform vec4 CC_Time;\n",
"uniform vec4 CC_SinTime;\n",
"uniform vec4 CC_CosTime;\n",
"uniform vec4 CC_Random01;\n",
"uniform sampler2D CC_Texture0;\n",
"uniform sampler2D CC_Texture1;\n",
"uniform sampler2D CC_Texture2;\n",
"uniform sampler2D CC_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 to compile 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是否编译成功。

综上所述，本文详细介绍了OpenGL ES中Shader的使用流程以及Cocos2d-x中Shader程序的保存和管理方式，希望对开发者有所帮助。

相关文章

AppMobi发布HTML 5开发工具XDK

03-26 11:55

jqGrid的重要选项详解

03-26 11:52

解说HTML 5 语义化

03-26 11:50

HTML/CSS一些需要注意的基础知识

03-26 11:47

分享10个web前端简单实用的jQuery代码片段

03-26 11:42

作者信息

menghao

menghao

共发布了 3994 篇文章

查看更多文章