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引擎的骨骼动画,以及在使用骨骼动画时注意的问题,针对具有高光法线的材质的骨骼动画渲染的处理思路。本章并不能把所有的问题讲解清楚,希望对读者能起到抛砖引玉的效果。








已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页