Material类，即材质类，在cocos2d中相当重要，因为它内部管理着OpenGL相关的如着色器program，uniform以及OpenGL的状态和配置。它可以根据material配置文件来完成各种特效渲染，光照或贴图等效果。先看下它的类图：
由图可见，Material内有一个Technique类型的数组，Technique类内有一个Pass类的数组，Pass类内部成员有GLProgramState和VertexAttribBinging，可见，一个Pass对应着一个着色器。具体的如特效，光照的效果实际上就是在着色器中实现的。
下面看下一个具体的例子，cocos2d中的Material_2DEffects的demo，通过material文件创建Material实现2D特效。代码如下：
void Material_2DEffects::onEnter()
{
MaterialSystemBaseTest::onEnter();
//解析2d_effects.material文件，得到properties对象
auto properties = Properties::createNonRefCounted("Materials/2d_effects.material#sample");
// Print the properties of every namespace within this one.
printProperties(properties, 0); //打印
Material *mat1 = Material::createWithProperties(properties); //通过properties创建Material
//第一个是模糊效果
auto spriteBlur = Sprite::create("Images/grossini.png");
spriteBlur->setPositionNormalized(Vec2(0.2f, 0.5f));
this->addChild(spriteBlur);
spriteBlur->setGLProgramState(mat1->getTechniqueByName("blur")->getPassByIndex(0)->getGLProgramState()); //将Material内部的一个GLProgramState对象赋给了sprite的_glProgramState
//第二个是轮廓效果
auto spriteOutline = Sprite::create("Images/grossini.png");
spriteOutline->setPositionNormalized(Vec2(0.4f, 0.5f));
this->addChild(spriteOutline);
spriteOutline->setGLProgramState(mat1->getTechniqueByName("outline")->getPassByIndex(0)->getGLProgramState());
//第三个是噪声效果
auto spriteNoise = Sprite::create("Images/grossini.png");
spriteNoise->setPositionNormalized(Vec2(0.6f, 0.5f));
this->addChild(spriteNoise);
spriteNoise->setGLProgramState(mat1->getTechniqueByName("noise")->getPassByIndex(0)->getGLProgramState());
//第四个是边缘效果
auto spriteEdgeDetect = Sprite::create("Images/grossini.png");
spriteEdgeDetect->setPositionNormalized(Vec2(0.8f, 0.5f));
this->addChild(spriteEdgeDetect);
spriteEdgeDetect->setGLProgramState(mat1->getTechniqueByName("edge_detect")->getPassByIndex(0)->getGLProgramState());
// properties is not a "Ref" object
CC_SAFE_DELETE(properties);
}
材质内容的信息放在2d_effects.material文件中，我们看下它具体的内容是什么：
material sample
{
technique blur
{
pass 0
{
shader
{
defines = THIS_IS_AN_EXAMPLE 1;TOMORROW_IS_HOLIDAY 2
vertexShader = Shaders/example_Simple.vsh
fragmentShader = Shaders/example_Blur.fsh
// Uniforms
blurRadius = 3
sampleNum = 5
resolution = 100,100
}
}
}
technique outline
{
pass 0
{
shader
{
vertexShader = Shaders/example_Simple.vsh
fragmentShader = Shaders/example_Outline.fsh
u_outlineColor = 0.1, 0.2, 0.3
u_radius = 0.01
u_threshold = 1.75
}
}
}
technique noise {
pass 0
{
shader
{
vertexShader = Shaders/example_Simple.vsh
fragmentShader = Shaders/example_Noisy.fsh
resolution = 100,100
}
}
}
technique edge_detect
{
pass 0
{
shader
{
defines =
vertexShader = Shaders/example_Simple.vsh
fragmentShader = Shaders/example_EdgeDetection.fsh
resolution = 100, 100
}
}
}
}
material文件只是普通的文本文件，解析之后的信息放在properties对象中，Properties的类图如下：
由类图可见，Properties内部又有Properties的数组，一个Properties对应着material文件中的一个大括号，如此嵌套下去。Propertie类记录着一对key-value值，对应着最内部的大括号的等式。material文件解析后，对应的Properties类的内容为：
下面看下如何用Properties初始化Material，代码如下：
bool Material::initWithProperties(Properties* materialProperties)
{
return parseProperties(materialProperties);
}
parseProperties函数如下：
bool Material::parseProperties(Properties* materialProperties)
{
setName(materialProperties->getId());
auto space = materialProperties->getNextNamespace();
while (space) //循环解析子空间
{
const char* name = space->getNamespace();
if (strcmp(name, "technique") == 0)
{
parseTechnique(space); //解析technique块
}
else if (strcmp(name, "renderState") == 0)
{
parseRenderState(this, space); //解析renderState块
}
space = materialProperties->getNextNamespace();
}
return true;
}
因本次demo的2d_effects.material文件没有renderState块，我们只看parseTechnique函数
bool Material::parseTechnique(Properties* techniqueProperties)
{
auto technique = Technique::create(this);
_techniques.pushBack(technique);
// first one is the default one
if (!_currentTechnique)
_currentTechnique = technique;
// name
technique->setName(techniqueProperties->getId());
// passes
auto space = techniqueProperties->getNextNamespace();
while (space) //循环解析子空间
{
const char* name = space->getNamespace();
if (strcmp(name, "pass") == 0)
{
parsePass(technique, space); //解析pass块
}
else if (strcmp(name, "renderState") == 0)
{
parseRenderState(this, space);
}
space = techniqueProperties->getNextNamespace();
}
return true;
}
parsePass函数如下：
bool Material::parsePass(Technique* technique, Properties* passProperties)
{
auto pass = Pass::create(technique);
technique->addPass(pass);
// Pass can have 3 different namespaces:
// - one or more "sampler"
// - one "renderState"
// - one "shader"
auto space = passProperties->getNextNamespace();
while (space)
{
const char* name = space->getNamespace();
if (strcmp(name, "shader") == 0)
parseShader(pass, space); //解析shader块，生成OpenGL的program
else if (strcmp(name, "renderState") == 0)
parseRenderState(pass, space);
else {
CCASSERT(false, "Invalid namespace");
return false;
}
space = passProperties->getNextNamespace();
}
return true;
}
由代码看到正在解析shader块，比如blur中的内容，如下：
shader
{
defines = THIS_IS_AN_EXAMPLE 1;TOMORROW_IS_HOLIDAY 2 //这是着色器里的宏定义
vertexShader = Shaders/example_Simple.vsh //顶点着色器名称
fragmentShader = Shaders/example_Blur.fsh //片元着色器名称
// Uniforms
blurRadius = 3 //着色器中的uniform变量
sampleNum = 5
resolution = 100,100
}
parseShader函数内容如下：
bool Material::parseShader(Pass* pass, Properties* shaderProperties)
{
// vertexShader //得到顶点着色器的文件名
const char* vertShader = getOptionalString(shaderProperties, "vertexShader", nullptr);
// fragmentShader //得到片元着色器的文件名
const char* fragShader = getOptionalString(shaderProperties, "fragmentShader", nullptr);
// compileTimeDefines //这个是着色器里的宏定义
const char* compileTimeDefines = getOptionalString(shaderProperties, "defines", "");
if (vertShader && fragShader)
{ //根据vertShader和fragShader的文件名，创建glProgramState
auto glProgramState = GLProgramState::getOrCreateWithShaders(vertShader, fragShader, compileTimeDefines);
pass->setGLProgramState(glProgramState);
// Parse uniforms only if the GLProgramState was created
auto property = shaderProperties->getNextProperty();
while (property) //根据material文件设置program中的uniform变量
{
if (isValidUniform(property)) //是否是有效的uniform，只有"defines"，"vertexShader"和"fragmentShader"不是
{
parseUniform(glProgramState, shaderProperties, property); //保存到glProgramState中的_uniforms
}
property = shaderProperties->getNextProperty();
}
auto space = shaderProperties->getNextNamespace();
while (space)
{
const char* name = space->getNamespace();
if (strcmp(name, "sampler") == 0)
{
parseSampler(glProgramState, space);
}
space = shaderProperties->getNextNamespace();
}
}
return true;
}
分析都在注释里，简而言之就是通过shader块内的着色器文件名及uniform变量设置，来创建
glProgramState并保存到pass中。
网友评论