Cocos2d-x 3.x 图形学渲染系列二十六

笔者介绍：姜雪伟，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。

CSDN视频网址：http://edu.csdn.net/lecturer/144

美术制作3D模型动作时，这里面也是有技巧的，首先是Cocos2d-x引擎并不支持morph动作，另外就是制作的动画在加载到程序后，只能用默认的加载方式。不能对其进行高光、法线渲染否则它的动画就失效了，问题的解决方案是将有高光、法线的shader内容要在其skin蒙皮骨骼的shader中加入，否则只能对有动作的模型做默认渲染处理。给读者介绍这些，主要是为了在美术制作规范上避免走弯路。读者有兴趣可以自行测试一下，笔者自己用了一个有动作的模型测试了效果，鹿角的耳朵可以上下浮动，模型材质使用了高光、法线渲染，实现的播放动画如下图：

下面通过具体案例的方式告诉读者如何使用Cocos2d-x的骨骼动画。

模型中的Mesh是挂接在骨骼动画上的，前面章节已经介绍过了，本章节主要是围绕实现骨骼动画的案例讲解，首先介绍需要渲染的模型，先将要实现的模型效果图展示如下图:

模型有三部分组成：拥有高光、法线的头盔、能上下转动的带有环境映射的遮光罩，还有一个是透明的防护罩，这三部分都需要引擎去渲染处理。为了引擎加载方便，将模型分为三部分加载，在引擎中实现的加载代码如下所示：

//加载头盔模型
	auto sprite_Base = Sprite3D::create("astronaut/Base.c3t");
	this->addChild(sprite_Base);
	sprite_Base->setPosition3D(Vec3(0, 0, 0));
	sprite_Base->setRotation3D(Vec3(-90, 0, 0));

	//加载材质文件
	auto mat_Base = Sprite3DMaterial::createWithFilename("astronaut/base.material");
	auto _state_sprite1 = mat_Base->getTechniqueByIndex(0)->getPassByIndex(0)->getGLProgramState();
	sprite_Base->setMaterial(mat_Base);

	// 加载具有动画配置的遮光罩
	auto sprite_Zerkalo = Sprite3D::create("astronaut/Zerkalo.c3t");
	sprite_Base->addChild(sprite_Zerkalo);
	sprite_Zerkalo->setRotation3D(Vec3(90, 0, 0));
	sprite_Zerkalo->setPosition3D(Vec3(0, 0, 0));

	// 获取骨骼动画信息
	auto animation = Animation3D::create("astronaut/Zerkalo.c3t");
	//创建动作
	auto animate = Animate3D::createWithFrames(animation, 0, 20);
	animate->setSpeed(0.5f);
	// 播放动画
	//sprite2->runAction(RepeatForever::create(animate));
	sprite_Zerkalo->runAction(animate);

	// 加载反射Shader文件
	auto glprogram_Zerkalo = GLProgram::createWithFilenames("astronaut/zerkalo.vert", "astronaut/zerkalo.frag");
	auto _state_Zerkalo = GLProgramState::getOrCreateWithGLProgram(glprogram_Zerkalo);
	sprite_Zerkalo->setGLProgramState(_state_Zerkalo);
	//加载反射贴图以及贴图参数设置
	auto textrue_astronaut = Director::getInstance()->getTextureCache()->addImage("astronaut/mars.png");
	Texture2D::TexParams		tRepeatParams2;
	tRepeatParams2.magFilter = GL_LINEAR;
	tRepeatParams2.minFilter = GL_LINEAR;
	tRepeatParams2.wrapS = GL_CLAMP_TO_EDGE;
	tRepeatParams2.wrapT = GL_CLAMP_TO_EDGE;
	textrue_astronaut->setTexParameters(tRepeatParams2);
	_state_Zerkalo->setUniformTexture("sampler_env", textrue_astronaut);

	// 加载外层玻璃模型
	auto sprite_Glass = Sprite3D::create("astronaut/Glass.c3t");
	sprite_Glass->setRotation3D(Vec3(0, 0, 0));
	sprite_Glass->setPosition3D(Vec3(0, 0, 0));
	sprite_Glass->setOpacity(100);
	sprite_Base->addChild(sprite_Glass);
	//加载透明Shader文件
	auto glprogram_glass = 	GLProgram::createWithFilenames("astronaut/glass.vert", "astronaut/glass.frag");
	auto _state = GLProgramState::getOrCreateWithGLProgram(glprogram_glass);
	sprite_Glass->setGLProgramState(_state);

在上述代码段中，有glass.vert对于模型透明的Shader处理，顶点着色器代码完整内容如下所示：

attribute vec4 a_position;

void main(void){
	gl_Position = CC_MVPMatrix * a_position;
}

另外对应顶点着色器的片段着色器glass.frag代码完整内容如下所示：

#ifdef GL_ES
precision mediump float;
#endif

void main(void)
{
	gl_FragColor = vec4(0.5,0.5,0.5,0.3);
}

再将渲染环境映射的片段着色器文件Zerkalo.frag的完整代码展示如下所示：

#ifdef GL_ES
varying mediump vec2 v_texture_coord;
precision mediump float;
#else
varying vec2 v_texture_coord;
#endif

uniform sampler2D sampler_env;

varying vec2 env_mapping_index;

void main(void)
{
	gl_FragColor=vec4((texture2D(sampler_env,vec2(env_mapping_index.x, 1 - env_mapping_index.y))).rgb,1.0);  
}

渲染环境映射的顶点着色器代码Zerkalo.vert，内容展示如下所示：

attribute vec4 a_position;
attribute vec3 a_normal;
varying vec2 env_mapping_index;

void main(void)
{
	vec3 v_normalVector = normalize(CC_NormalMatrix * a_normal);
	
	env_mapping_index.x = v_normalVector.x / 2.0 + 0.5;
	env_mapping_index.y = v_normalVector.y / 2.0 + 0.5;
	
	gl_Position = CC_MVPMatrix * a_position;
}

其中，base.material材质文件内容如下所示：

material base
{
    technique normal
    {
        pass 0
        {
            shader
            {
                vertexShader = astronaut/base_v.vert
                fragmentShader = astronaut/base_f.frag

                sampler DiffuseTextureSampler
                {
                    path = astronaut/Astronaut_Base_Color.png
                }
				
				sampler NormalTextureSampler
                {
                    path = astronaut/Astronaut_Normal_OpenGL.png
                }
				
				sampler RoughnessTextureSampler
                {
                    path = astronaut/Astronaut_Roughness.png
                }
				
				sampler SpecularTextureSampler
                {
                    path = astronaut/BaseLightingMap.png
                }
            }
        }
    }
}

在上述的材质文件中包含调用的高光法线Shader文件，关于高光法线的Shader在前面章节中已经介绍过，这里就不重复了。在Cocos2d-x引擎中实现效果如下:

另外，还需要注意的事情是对于有Alpha通道的图片，在加载时需要将模型的透明度设置成半透明状态，以鹿角模型为例，鹿角没设置之前的效果图如下所示：

设置模型透明度后的效果如下所示：

骨骼动画也是引擎中非常重要的部分，本章是告诉读者如何使用Cocos2d-x引擎的骨骼动画，以及在使用骨骼动画时注意的问题，针对具有高光法线的材质的骨骼动画渲染的处理思路。本章并不能把所有的问题讲解清楚，希望对读者能起到抛砖引玉的效果。