Cocos国外大牛分享次世代画质3D案例

从Cocos 2d-x 3.0起我们已经可以在游戏中使用3D元素。Cocos引擎推出3D功能的时间不算太迟，我们已经可以看到越来越多的手机上能流畅地渲染3D游戏，而且这些机型正在成为主流。在最近两年我们可以看到，高端手机游戏从2D转到3D的倾向很明显。许多游戏开发商试图在竞争激烈的红海里占有一席之地，那么选择开发3D游戏或许会是一个强有力的竞争手段。

上面的视频是我的下一款游戏作品《Food of the Gods》。这游戏使用了Cocos 2d-x 3.3，视频是从我iPhone上录制的实际运行效果。在这篇文章里我将要介绍我是如何制作它、如何把它跑在cocos引擎上的。对于熟悉cocos官方提供的3D示例游戏 《Fantasy Warrior》的开发者，将会看到以下一些主要不同点：

1. 光照贴图（Light Mapping）：你将看到每件物体都有被照亮并且投射阴影。光影效果的质量是由你的3D工具软件决定的，用3D软件能烘焙出复杂的光效，包括直接光照，反射光照，以及阴影。

2. 顶点合并（Vertex Blending）：请注意看路、草地和悬崖交接的地方，看不到任何可见的接缝。

3. 透明遮罩（Alpha Masks）：灌木如果没有透明遮罩就跟纸片一样。

4. 滤色叠加的公告板（Billboards）：增加一些光束和其他环境的效果。

所有的模型都是用一个叫Modo的3D 软件建模制作的，贴图则是使用Photoshop。关于3D模型的制作和贴图的绘制在此就不再赘述，网上已经有很多教程，在此主要介绍下跟Cocos 2d-x有关的部分。

模型网格和贴图（Meshes and Textures）

如下图所示，每个模型的贴图都是由几个256 x 256或者更小的贴图组成的。同时你也会注意到我把所有的小图片都合在了一张贴图上，这是减少GPU绘制次数（draw call）最简单的方法之一。贴图是从http://www.cgtextures.com或者网上找的。

为了把这些图片拼接起来，我使用的是Photoshop的补偿滤镜（offset filter）然后在接缝的地方用修复画笔来做一些自然的过渡。为了获得一种油画的视觉效果我会先使用cutout滤镜（注意：cutout滤镜也会使得png格式图片的压缩效果更好），然后在需要的地方绘制一些高光和阴影的效果。我发现如果直接拿照片当贴图的话，当你把它尺寸缩小的时候会出现图像噪点。

另一种方案是为每一个模型网格制作一整张独立的贴图。当网格比较小或者摄像机不是很靠近网格的时候这种方法是可行的。如果你的photoshop技术过硬的话，出来的效果会更好。附带的好处是，因为只使用一张贴图因此只有一次GPU绘制调用。但我不建议采用这种方法来制作第一人称射击游戏（FPS）中的建筑，因为当你走得很靠近建筑物的时候，贴图分辨率过低的问题就会显露出来。我不喜欢用这种整张贴图方法，因为这实在太费时耗力了。这个场景的制作花了我足足四天时间。

光照贴图（Light Maps）

当你做好模型和贴图之后，现在就可以来烘焙光照贴图了。Cocos 2d-x目前还不像Unreal或Unity一样在官方编辑器里提供烘焙光照贴图的功能，但是别失望，大部分的制作3D模型的软件都可以烘焙光照贴图，并且效果比市面上任何游戏引擎的效果还好。首先，在你的3D工具软件里，先给场景打好灯光，照亮场景，然后为每份网格制作第二张UV map。每份网格的表面都必须被映射在0到1范围内的UV 平面上。这听起来好像很复杂且耗时，但在Modo里这是非常简单的。我先后使用 "Atlas map"的UV 工具和"Pack UV"工具，这两个工具会自动将网格展开成一个相当不错的排布图。

这些都完成之后，设置3D工具软件的渲染器为"只渲染烘焙的光照"，然后开始渲染。当然了，如果你想做一些环境光遮罩的效果也是可以的。

你也可以使用一些分辨率较低的光照贴图。有时候这样的效果反而会看起来更好，因为相互混叠的模糊像素会让阴影看起来更柔和。上面的这些建筑都映射到一张512 x 512的光照贴图上。整个场景总共使用了4 张512 x 512的光照贴图。请确保每个小图块之间有一定的空隙，且让你的渲染范围比这些图块的边界多出几个像素。这样可以防止当较低的mip-maps（一种纹理采样）起作用时黑边出现在网格周围的角落里。最后一点听起来像是3D技术的行话。如果是对Texture Packer熟悉的话，那么其中的"Extrude"值起到的作用就是刚刚我所描述的。对贴图的边缘接缝做一些涂抹处理，这样在精灵之间就不会有那些烦人的缝隙了，那些缝隙在这里会变成多边形边缘的黑边。

如果你想牺牲内存和包大小来提高性能的话，你可以把颜色和光照信息都烘焙到一张贴图上并避免共同使用一张光照贴图。但是这样做的话，同样的像素密度，贴图的大小至少得翻一倍。这完全取决于你个人、以及你游戏的要求。

接下来，添加顶点颜色。我在地形上提供了顶点颜色，这可以让着色器在合成悬崖顶上的草地贴图时，不会有任何可见的接缝。下图中涂成白色的顶点部分可以合成你指定的贴图。在这个例子里实际上我只使用红色通道，当然了根据实际需要你可以使用4个通道（RGBA）去合成不同的贴图。

 

最后，我把整个场景分成了很多独立的网格（mesh）：每个建筑都有自己独立的网格，地形独立一个网格，水也是独立一个。带透明遮罩的贴图也会有一个网格--比如视频中看到的植物叶子和小旗子。我这样做有两个原因，首先，让地形、建筑、水和带透明遮罩的贴图各自使用不同的着色器。其次，我们打算通过不渲染摄像机范围外的对象来减少性能开支。很重要的一点是摄像机会根据网格的包围盒来决定对象是否可见，因此尽量把网格弄成小块，这样包围盒会比较小。

导出

完成了模型和贴图之后，我们需要把每个mesh导出为一个.fbx文件。幸运的是，大多数的3D建模软件都支持这个功能。Autodesk为此格式提供了一个免费SDK。但不幸的是，Modo 701在导出fbx格式时会出现相当多的错误。因此我必须自己写一些脚本来保证第二组贴图坐标和顶点颜色的正确导出。你可以从我个人网站上的"Modo Scripts"部分下载这个导出脚本。搞定fbx之后，你将需要用到Cocos 2d-x自带的fbx-conv.exe命令行工具，它位于Cocos 2d-x根目录的/tools下。

fbx-conv.exe -a your_mesh_name_here.fbx

使用"-a"参数后，工具会同时导出mesh的二进制文件(.c3b)和文本格式文件(.c3t)。文本格式的文件非常的有用，你可以利用它来查看所有的东西是否被正确导出，但千万不要把它放到resource目录下。如果所有的都被正确地导出的话，你将在c3t文件的开头看到以下的内容：

"attributes": [{"size":   3,"type": "GL_FLOAT","attribute": "VERTEX_ATTRIB_POSITION"}, {"size":   3,"type": "GL_FLOAT","attribute": "VERTEX_ATTRIB_NORMAL"}, {"size":   2,"type": "GL_FLOAT","attribute": "VERTEX_ATTRIB_TEX_COORD"}, {"size":   2,"type": "GL_FLOAT","attribute": "VERTEX_ATTRIB_TEX_COORD1"}]

注意VERTEX_ATTRIB_TEX_COORD1这个属性。如果没有它光照贴图将无法显示。如果你导出了一张带顶点颜色的mesh，你也应该要看到一个类似的属性才行。还有一点很重要，贴图的坐标也必须按正确的顺序才行。我通常采用的是第一个tex_coord是瓦片贴图，最后一个tex_coord是光照贴图。使用Modo的话，uv maps会按照字母顺序排列。

着色器（Shaders）

我花了很长的一段时间来搞懂GLSL和着色器，但正如编程中经常遇到的，有时候一个点通了，其他的就都好理解了。一旦理解了其中的原理，你便会发现着色器真的很简单。如果你不只是想用Cocos 2d-x来把贴图套到模型网格上的话，你需要学会如何写着色器。目前Cocos 2d-x没有Unreal那样好用的着色器可视化编辑器（visual shader editor），所以我们只能自己动手焊代码。

本节我将讲解我为视频中的游戏场景所写的着色器，并说明我做了什么、为什么这样做。如果你对着色器已经非常熟悉了，那么可以快速跳过本节。

首先，先来看一下如何将着色器应用到模型网格上。

https://gist.github.com/Rahnem/5b642b55910071a7d5b4

这段代码摘自Cocos 2d-x的测试集cpp-tests工程。如果你用不同的着色器来加载大量的meshes，那么最好根据功能来进行，这样可以避免冗余。那么现在我们只关心如下的代码段，来看下这个着色器。

GLProgram* shader =GLProgram::createWithFilenames("shaders/lightmap1.vert","shaders/lightmap2.frag");GLProgramState* state = GLProgramState::create(shader);mesh->setGLProgramState(state);Texture2D* lightmap =Director::getInstance()->getTextureCache()->addImage("lightmap.png");state->setUniformTexture("lightmap",lightmap);

https://gist.github.com/Rahnem/412fbba9492624872601

"lightmap1.vert"是顶点着色器（vertex shader）。如果将其应用到网格上，那么每个顶点的每一帧都将执行这个操作。而"lightmap2.frag"是片段着色器（fragment shader），网格上贴图的每个像素的每一帧都将执行这个操作。我不太确定为什么将其命名为"片段着色器"，我一直认为应叫做"像素"着色器（pixel shader）。从这段描述，我们可以很容易理解为什么大量着色器指令会降低帧率，尤其是你用片段着色器的话。

接下来我们详细地分解顶点着色器：

attribute vec4 a_position;attribute vec2 a_texCoord;attribute vec2 a_texCoord1;

这些属性是由渲染器提供的。"a_position"是顶点的位置。"a_texCoord" 和 "a_texCoord1"对应你那两个UV坐标。还记得在.cbt文本格式文件中开头部分的"VERTEX_ATTRIB_TEX_COORD"么？这些值与属性对应起来了。你可以在渲染器中获取更多其他的属性，包括顶点法线（vertexnormal）和顶点颜色（vertex color）。请在cocos引擎的CCGLProgram.cpp中查看完整属性列表。

varying vec2 v_texture_coord;varying vec2 v_texture_coord1;

"varying"值将被传到片段着色器中（fragment shader）。片段着色器所需要的任何变量前都需要添加"varying"限定符。这个例子中，我们仅需要知道这两个贴图的坐标。

void main(void){     gl_Position = CC_MVPMatrix * a_position;     v_texture_coord.x = a_texCoord.x;     v_texture_coord.y = (1.0 - a_texCoord.y);     v_texture_coord1.x = a_texCoord1.x;     v_texture_coord1.y = (1.0 - a_texCoord1.y);}

设置顶点位置，拷贝贴图的坐标给varying values，这样片段着色器就可以使用这些值。现在我们一起来分解片段着色器。

#ifdef GL_ESvarying mediump vec2 v_texture_coord;varying mediump vec2 v_texture_coord1;#elsevarying vec2 v_texture_coord;varying vec2 v_texture_coord1;#endif

声明从顶点着色器传递过来的"varying" 值

uniform sampler2D lightmap

还记得在将着色器应用到网格时所使用的 state->setUniformTexture("lightmap",light map); 语句么？这个值就是对应语句中的那个贴图。

void main(void){     gl_FragColor = texture2D(CC_Texture0, v_texture_coord) *(texture2D(lightmap, v_texture_coord1) * 2.0);}

这个语句设置像素颜色。首先你会注意到从未声明过的 CC_Texture0变量。Cocos 2d-x中有大量可在着色器中使用的默认统一变量。再次强调，可在CCGLProgram.cpp中查看完整属性列表。这个例子中，CC_Texture0对应在3D模型中所应用到网格中的贴图。texture2D命令会在给定的贴图坐标中去查找贴图的像素颜色和透明度。它会返回一个包含了那个像素的RGBA值的vec4值 。所以这里我会在UV1中查找到瓦片贴图的颜色值，然后在UV2中查到光照贴图的颜色值，最后把两个值相乘。

你应该注意到了我先是把光照贴图的颜色值两两相乘了。因为贴图颜色值范围为0.0-1.0，所以很显然，如果用白色值vec4(1.0, 1.0, 1.0, 1.0)去乘中间灰值vec4( 0.5, 0.5, 0.5,1.0 )，那么你仍是得到一个中间灰值vec4( 0.5, 0.5, 0.5,1.0 )。将两个值相乘可以使贴图更亮，同时也可以使贴图更暗，这将使你获得一个很好的可变的亮度范围。

以上是对着色器的简单介绍。更多关于着色器的信息，我建议你阅读：https://www.khronos.org/opengles/sdk/docs/reference_cards/OpenGL-ES-2_0-Reference-card.pdf

接下来，我要向大家展示一下我的游戏场景中所应用的其他着色器的示例：

• 示例一：

https://gist.github.com/Rahnem/93e2efa4b4e5cf2ec1de

这个片段着色器使用相同的顶点着色器，做同样的光照贴图计算，但会把所有alpha值小于0.5的像素都剔除掉。如果你尝试不使用这个着色器，而是添加一个透明遮罩的贴图时，那将会产生很多排序问题。我的场景中的所有植物、旗子和叶子都使用了这个着色器。

• 示例二：

https://gist.github.com/Rahnem/5305bca63de43599c10a

这个着色器我用来做顶点混合，我用它将草的贴图混合在悬崖顶上。你会注意到顶点着色器中的a_color属性，这和我们的顶点颜色是一一对应的。这里我用混合指令来合成悬崖和草的贴图，使用顶点颜色里的红色通道作为混合参数。

你也可以使用另外一张混合遮罩贴图来实现相同的效果。但是，使用顶点颜色混合的方法可减少内存的使用，产生更平滑的渐变效果，并且当修改网格时会更加方便。

• 示例三：

https://gist.github.com/Rahnem/c7abb7b79062aade0cf2

目前这个场景有点过于静态没有活力。我们给这些旗子和树木添加一些动作，比如树木在微风中摆动。但令人蛋疼的是，在网上很容易找到一个有上千行代码的着色器来实现波动效果，但是却很难找到一个只有十行代码的着色器，所以我自己编写了一个。为了实现这个效果，你需要把u_time值传递给每一帧。

float time = 0.0f;mesh->schedule([mesh, time](float dt) mutable {   time += dt * 0.2f;   float intpart;   time = modff(time,&intpart);   mesh->getGLProgramState()->setUniformFloat("u_time",time);}, "wave");

这个波动效果是基于网格每个顶点的Y轴位置来实现的，着色器将网格中每个顶点、及其相关联的顶点法线都传递给这个着色器。简单来说，它赋予了网格一个波动效果，使其在不用任何复杂物理计算的情况下就可以随风摆动。

很简单吧？使用着色器可以实现各种效果，并且现在我已经脑洞大开，非常兴奋可以尝试做各种不同的效果。

公告板（Billboards）

现在我已经制作了所有网格和贴图，写完了各种着色器，所有资源都已经导入并运行。那么现在是时候给场景加点料了。使用公告板和粒子，你可以添加很多空气效果，比如光线、灰尘、阳光闪烁、阴霾、地面雾等等。在上文视频中，你可以看到光线倾泻在场景中。其实这些光线只是用了一个很大的公告板，用滤色叠加的方式混合。那些火焰也是用的公告板，加上我在modo中制作的贴图动画。

解决问题

目前为止，我们好像一切进展顺利。但是不掉坑那是几乎不可能的，特别是在将网格导入引擎中，并使其渲染出来100%正确。我前面说过，modo导出fbx的功能有bug所以我自己写了一个脚本来导出，结果是我遇到的多数渲染不正确问题，都是到.c3t网格文件里面检查哪些属性没有被正确导出，或者导出顺序不正确来解决的。因为.c3t文件中的每组属性部分都对应顶点部分的值，通过这个你将很容易去确认uvmaps导出顺序是否错乱。

光照贴图的值总是0到1之间的某个值，而瓦片贴图可以为任意值。

"attributes": [{"size":   3, "type": "GL_FLOAT", "attribute": "VERTEX_ATTRIB_POSITION"}, {"size":   3, "type": "GL_FLOAT", "attribute": "VERTEX_ATTRIB_NORMAL"}, {"size":   2, "type": "GL_FLOAT", "attribute": "VERTEX_ATTRIB_TEX_COORD"}, {"size":   2, "type": "GL_FLOAT", "attribute": "VERTEX_ATTRIB_TEX_COORD1"}], "vertices": [/* VERTEX_ATTRIB_POSITION->*/   -1498.306274,  616.000000, -731.379639,/* VERTEX_ATTRIB_NORMAL-> */    -0.211326, -0.577351,  0.788674,/* VERTEX_ATTRIB_TEX_COORD-> */  0.468751,  1.468750,  /* VERTEX_ATTRIB_TEX_COORD1-> */ 0.720491,  0.640915,

如果你看到的是一个红色贴图代替了你本来的那个纹理，这意味着Cocos 2d-x没能找到你所指定的贴图。请检查.c3t文件的底部，那里有所有材质的路径，并确保这些路径都指向正确的位置。如果你完全看不到网格，请确保网格在摄像机视野范围内，并且相机的远裁剪面（farplane）大到足以看到这个网格。

可视化编辑

几天之后，我发现手动添加新的东西到场景中、在着色器里设置属性、以及放置公告板等工作变得极其乏味。写一个脚本把网格从Modo里面导出成fbx，再转成c3b文件是挺简单的，但是在目前Cocos还没有3D编辑器的情况下，在场景中添加物品是件麻烦事，因为你无法可视化编辑3D物体的位置。我是这样解决的：为Modo写一个脚本，它将从Modo中导出场景中的所有网格，同时生成一个.plist文件以记录场景里的所有数据。Python里已经有一个生成plist文件的库叫"plistlib"，使用起来很方便。然后我在Cocos2d-x读取.plist这个文件来建立场景。我使用Modo里的locators来标记公告板的位置，然后用customs channels来传递变量，比如用什么着色器、用什么光照贴图等。虽然这算不上高明但也够满足我的需求了。

（译者注：Cocos的3D场景编辑器已经在4月初推出。本文作者用Cocos 2d-x v3.3的时候，还没有cocos官方的3D编辑器可用。）

关于作者

Peter Respondek以设计师及3D美术的身份活跃在AAA游戏行业已经十年了。他曾在很多著名的公司工作过，其中包括ID Software（Rage）和Epic Games（Unreal Tournament 2004）。最近他开始编程并用Cocos 2d-x独立开发手机游戏。《Clear ForAction》是他独立开发的第一款游戏，你可以在App Store和Google Play商店里下载。Perter的个人主页：http://www.prespondek.com

原文地址：http://cn.cocos2d-x.org/tutorial/show?id=2801