用《捕鱼达人3》讲解Cocos引擎3D技术（一）：加载鱼的模型和播放动画(转) | Imagination中文技术社区用《捕鱼达人3》讲解Cocos引擎3D技术（二）：鱼身上的波光处理
招聘信息：
在上一节的学习中，我们已经掌握了如何使用Cocos2d-x加载鱼的模型和播放鱼的动画，这一节我们来学习一下如何为鱼的模型增加波光处理，以使它看起来像在海水中游动。
在模型的身上加入波光的感觉，是通过纹理动画来实现的，其原理是给模型增加一个纹理，并循环的移动纹理贴图寻址的UV坐标，这样贴在模型表面的纹理就会按照不断变化的UV值来产生出贴图运动的效果。下面我们来实际做一下这个效果。
我们需要用到Shader文件UVAnimation.vsh和UVAnimation.fsh,它们在Resources\3D目录中。UVAnimation.vsh是一个模型骨骼动画的计算Shader，而UV动画的效果在UVAnimation.fsh中进行处理：
uniform&sampler2D&u_texture1;&uniform&sampler2D&u_lightT&&&&uniform&vec4&v_LightC&&&&&&uniform&vec2&v_animL&&&&&&varying&vec2&v_texC&&&&&&&&&void&main(void)&&{&&&&&&&&&&&vec4&lightcolor&=&texture2D(u_lightTexture,&v_texCoord&+&v_animLight.xy)&*&v_LightC&&&&&gl_FragColor&=&texture2D(u_texture1,&v_texCoord)&+&&}&
然后我们需要一张波光图caustics.png，它是黑白图，用于在模型上增加色值操作，这样的话，黑色的区域色值为0，与鱼原来的纹理色值相加不变，而白色区域的值大于0，与鱼原来的纹理色值相加后会有增亮效果。这张图我们放在工程的Resources\3D目录中。
我们在FishLayer中增加一个变化的UV值：
在FishLayer::init函数中，我们将上面所写的vsh,fsh等组合成鱼模型可以使用的Shader并使用它:
&auto&fileUtiles&=&FileUtils::getInstance();&&&&&auto&vertexFilePath&=&fileUtiles->fullPathForFilename("UVAnimation.vsh");&auto&vertSource&=&fileUtiles->getStringFromFile(vertexFilePath);&&&&auto&fragmentFilePath&=&fileUtiles->fullPathForFilename("UVAnimation.fsh");&auto&fragSource&=&fileUtiles->getStringFromFile(fragmentFilePath);&&&&auto&glprogram&=&GLProgram::createWithByteArrays(vertSource.c_str(),&fragSource.c_str());&&auto&glprogramstate&=&GLProgramState::getOrCreateWithGLProgram(glprogram);&&_sprite->setGLProgramState(glprogramstate);&&&&auto&textrue1&=&Director::getInstance()->getTextureCache()->addImage("tortoise.png");&&glprogramstate->setUniformTexture("u_texture1",&textrue1);&&&&auto&textrue2&=&Director::getInstance()->getTextureCache()->addImage("caustics.png");&&&&glprogramstate->setUniformTexture("u_lightTexture",&textrue2);&&&&Texture2D::TexParams&tRepeatP&tRepeatParams.magFilter&=&GL_LINEAR_MIPMAP_LINEAR;&tRepeatParams.minFilter&=&GL_LINEAR;&tRepeatParams.wrapS&=&GL_REPEAT;&tRepeatParams.wrapT&=&GL_REPEAT;&textrue2->setTexParameters(tRepeatParams);&&&&Vec4&&tLightColor(1.0,1.0,1.0,1.0);&glprogramstate->setUniformVec4("v_LightColor",tLightColor);&&&&long&offset&=&0;&auto&attributeCount&=&_sprite->getMesh()->getMeshVertexAttribCount();&for&(auto&k&=&0;&k&<&attributeC&k++)&{&&&&&auto&meshattribute&=&_sprite->getMesh()->getMeshVertexAttribute(k);&&&&&glprogramstate->setVertexAttribPointer(s_attributeNames[meshattribute.vertexAttrib],&&&&&&&&&meshattribute.size,&&&&&&&&&meshattribute.type,&&&&&&&&&GL_FALSE,&&&&&&&&&_sprite->getMesh()->getVertexSizeInBytes(),&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&(GLvoid*)offset);&&&&&&&&&offset&+=&meshattribute.attribSizeB&&&&&}&&&&_lightani.x&=&_lightani.y&=&0;&
之后我们重载一下FishLayer的draw函数,加入UV值的变化处理和设置。
void&FishLayer::draw(Renderer*&renderer,&const&Mat4&&transform,&uint32_t&flags)&{&&&&&if(_sprite)&&&&&{&&&&&&&&&&&&&&&&&&&auto&glprogramstate&=&_sprite->getGLProgramState();&&&&&&&&&if(glprogramstate)&&&&&&&&&{&&&&&&&&&&&&&_lightani.x&+=&0.01;&&&&&&&&&&&&&if(_lightani.x&>&1.0)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&_lightani.x-=&1.0;&&&&&&&&&&&&&}&&&&&&&&&&&&&_lightani.y&+=&0.01;&&&&&&&&&&&&&if(_lightani.y&>&1.0)&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&_lightani.y-=&1.0;&&&&&&&&&&&&&}&&&&&&&&&&&&&glprogramstate->setUniformVec2("v_animLight",_lightani);&&&&&&&&&}&&&&&}&&&&&Node::draw(renderer,transform,flags);&}&
编译运行程序，我们就可以看到，小海龟身上波纹不断的运动，小海龟像在海里游泳一样。
这样，我们就完成了鱼身上的波光处理。
下一节，我们将学习制作捕鱼时的闪电特效，敬请关注。
&本节教程DEMO
有对Cocos引擎3D技术感兴趣的X-Men，欢迎联系官方团队，参与探讨并获取技术支持。技术交流邮箱：lvlong@。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
点击量15926点击量10778点击量5957点击量5368点击量5062点击量5014点击量4965点击量4785点击量4699
&2015 Chukong Technologies,Inc.
京公网安备89当前位置： &
Cocos实战案例高手解析《捕鱼达人3》怎样玩3D
16:19:04 & & &
&&&&在不久前结束的Cocos2015春季开发者大会上，现场演示的由Cocos引擎开发的3D游戏在开发者中获得了不错的反响。目前开始有少部分人尝试使用Cocos进行高阶的操作以实现3D功能，实际上，用Cocos开发3D并非高不可攀，接下来我们就从原理角度进行分析。
&&&&& & 3D成像原理& & &虚拟现实&是用设备模拟/重现人类的各种感觉，包括但不限于视、听、嗅、触、温感等，当中以视觉（偏振式3D成像）最为重要并最有可行性。& & 在脑电波技术突飞猛进之前，要提供&沉浸式&视觉感受的方法就只有两种：把屏幕做大，或者把眼睛与屏幕的距离缩短。很明显虚拟显示眼镜用的是后者，它在把屏幕做大的同时，将外界的光线隔绝，就会产生一种没入另外一个空间的错觉。加上三轴陀螺仪、重力感应器等体位传感器的帮助，画面就可以跟随佩戴者头部的移动而做出相应的反应，产生近似现实的视觉反馈。
&&&&& & 怎样实现3D？& & 偏振式3D成像是根据人眼成像原理发明的，人眼看到的景象呈现立体感，是由于双眼所观察到的景象有略微的差别，因为瞳距（两眼球之间的距离）导致观察的物体的角度不同。& & 所谓偏振成像就是将两幅不同偏振态的图像送到双眼，每只眼睛只允许看到其中一幅，我们用Cocos制作3D游戏，其实就是制作这两幅图像。或者说模拟3D信号。& & 现在的硬件技术能帮我们做什么，我们需要做什么& & 在真3D显示器出现之前，我们要做3D立体游戏一般只能用两台投影仪来实现3D效果，做为游戏的开发者我们就只需要模拟出左右半宽的两副图像就可以了。& & 如何用Cocos引擎模拟出3D图像& & 要模拟出真实的3D立体影像，首先要知道人眼成像原理，因为我们有两只眼睛，并分开一定距离（大约 150px），这样就出现了距离感。我们都知道Cocos中的摄像机是模拟人的眼睛的，一般我们在Cocos中观察场景都是创建一个摄像机，当然就没有立体感了，要模拟人的眼睛，就要创建两个摄像机,并把它们分开一段很小的距离，角度调成一样，注意不是往中间看，而是平视，人的双眼也都是平视向前的，类似于下面这样：
&&&&& & 捕鱼达人3的3D输出效果如下：
&&&&& & 通过以上分析我们可以看出，使用Cocos引擎通过物理成像方式实现3D并非那么神秘，随着用户的硬件水平不断增长，我们能看到3D绝对是手游的未来趋势。但是，一味追求3D而不考虑游戏的整体效果的产品在市场上依旧是没有竞争力的。一款游戏更需要在内容上进行不断地创新，才能在推向市场后走的长远。
用微信扫描二维码分享至好友和朋友圈
精彩高清图推荐：
传统文化首发Cocos实战案例:高手解析《捕鱼达人3》怎样玩3D
在不久前结束的Cocos2015春季开发者大会上，现场演示的由Cocos引擎开发的3D游戏在开发者中获得了不错的反响。目前开始有少部分人尝试使用Cocos进行高阶的操作以实现3D功能，实际上，用Cocos开发3D并非高不可攀，接下来我们就从原理角度进行分析。
3D成像原理
&虚拟现实&是用设备模拟/重现人类的各种感觉，包括但不限于视、听、嗅、触、温感等，当中以视觉（偏振式3D成像）最为重要并最有可行性。
在脑电波技术突飞猛进之前，要提供&沉浸式&视觉感受的方法就只有两种：把屏幕做大，或者把眼睛与屏幕的距离缩短。很明显虚拟显示眼镜用的是后者，它在把屏幕做大的同时，将外界的光线隔绝，就会产生一种没入另外一个空间的错觉。加上三轴陀螺仪、重力感应器等体位传感器的帮助，画面就可以跟随佩戴者头部的移动而做出相应的反应，产生近似现实的视觉反馈。
怎样实现3D？
偏振式3D成像是根据人眼成像原理发明的，人眼看到的景象呈现立体感，是由于双眼所观察到的景象有略微的差别，因为瞳距（两眼球之间的距离）导致观察的物体的角度不同。
所谓偏振成像就是将两幅不同偏振态的图像送到双眼，每只眼睛只允许看到其中一幅，我们用Cocos制作3D游戏，其实就是制作这两幅图像。或者说模拟3D信号。
现在的硬件技术能帮我们做什么，我们需要做什么
在真3D显示器出现之前，我们要做3D立体游戏一般只能用两台投影仪来实现3D效果，做为游戏的开发者我们就只需要模拟出左右半宽的两副图像就可以了。
如何用Cocos引擎模拟出3D图像
要模拟出真实的3D立体影像，首先要知道人眼成像原理，因为我们有两只眼睛，并分开一定距离（大约 150px），这样就出现了距离感。我们都知道Cocos中的摄像机是模拟人的眼睛的，一般我们在Cocos中观察场景都是创建一个摄像机，当然就没有立体感了，要模拟人的眼睛，就要创建两个摄像机,并把它们分开一段很小的距离，角度调成一样，注意不是往中间看，而是平视，人的双眼也都是平视向前的，类似于下面这样：
捕鱼达人3的3D输出效果如下：
视频地址：/page/k/h/o/k0152ufqoho.html
通过以上分析我们可以看出，使用Cocos引擎通过物理成像方式实现3D并非那么神秘，随着用户的硬件水平不断增长，我们能看到3D绝对是手游的未来趋势。但是，一味追求3D而不考虑游戏的整体效果的产品在市场上依旧是没有竞争力的。一款游戏更需要在内容上进行不断地创新，才能在推向市场后走的长远。&}