混在明日方舟里的evolt，随着科技的不断发展，3D技术已经逐渐进入我们的视野，成为各种行业的常用工具，而游戏行业也不例外。在游戏中将2D和3D技术结合使用，不仅可以让游戏画面更加丰富多彩，还能在一些细节上更好地展示游戏内容。而在混在明日方舟里的Evolt这个角色中，也运用了2D和3D技术结合的手法。下面就让我们来探讨一下这种技术的优缺点吧！
明日方舟中3D和2D结合的优缺点分析
200+篇教程总入口，欢迎收藏：
1 为什么是3D+2D
先看一段战斗视频。
《明日方舟》整个画面风格偏向2D，角色、特效、弹道以及敌人都是2D的，并且视角也是固定的。但在场景的方案上选用了3D的模型和偏写实的渲染。整个场景的建模、打光、渲染都是用偏写实化的方式实现的，制作和渲染都是用标准的PBR工作流。
为什么要这么选型呢？
3D写实风格匹配世界观。2D角色避免top-down视角的局限。更好的展现角色魅力。top-down的游戏，尤其是俯视角战斗场景的游戏，角色的绝大部分都被头顶给遮住，所以角色实际上不太能够看到各种细节，大部分都是个大头。为了避免这个问题，决定使用2D Q版小人。
降低风险。初创团队选择较成熟的2D方案，避免去踩相对于团队而言不太成熟的3D人物方案。积累团队3D开发经验。以上的技术选型是基于立项前一张概念图所进行的，实际上最后也很好的实现了这张图所表达的元素。
概念图的元素包括3D场景、2D小人（模糊掉了）、包括摄像机的透视的方向等。
早期的人物设定。
早期的3D场景风格。
2视觉方案
2.1 场景
场景使用PBR工作流。场景包括3D的网格状地图，地图周边的摆件，地图背后的远景，以及一些地图上可交付的或者装饰性的小物件，还包括所有3D的模型。
贴图绘制功能化。做一些风格化的差异。并非是做一个比较常见的日式RPG或者是类似游戏的卡通化的风格，而是希望用更写实的风格做一些差异化。
Shader优化。光照模型是基于Unity Standard Shader修改得到的PBR Shader。主要是优化了性能。场景的视觉方案可以参看下面的三张实际渲染图。
场景的整体视觉方案如下：
Unity PBR渲染模型。微调BRDF2，优化性能，添加可着色阴影，添加高度图，适配场景特殊效果。Lightmap。对Lightmap的编码和解码进行修改，使其在不同平台的效果保持一致（后面细讲）。静态烘焙。烘两张图，一张Lightmap，一张Shadowmap。所以光影和阴影表现较好。一盏混合动态光，给场景动态物体添加必要的视觉效果。滤镜效果。滤镜和特效来点缀场景。2.2 单位
使用Spine制作2D动画。单位包括角色、敌人、第三方单位以及很多可交互的2D物件等。使用Unlit的Shader。出于效果选择而不是技术受限。过多的效果可能会导致辨识度变差，以及玩家的关注点分散。单位的视觉方案如下：
每个角色使用正反两个面。
主要是参考了《纸片马里奥》。
原因是因为单面角色在冲刺、穿刺这样方向性很强的动作时会穿帮。为了避免穿帮只能将技能设计为类似圆弧斩的方式，会限制策划和美术对于技能和武器的创作。但实际上对于不太重要的角色还是单面。
3问题与解决简单介绍下该方案下遇到的比较难处理的问题，因为这些问题都是在融合3D+2D的方案中产生的，所以解决方案也比较少，这里分享一下踩坑经验。
3.1 处理空间关系
空间关系错误是因为摄像机、场景和角色之间的角度差异。实际上角色是斜躺在场景上的。
摄像机并不是垂直于场景，它实际上和场景的X、Y平面呈一个60度夹角。而角色，因为要展现，肯定是对着场景，对着摄像机，它垂直于场景的方向的，所以可以得出场景的X、Y平面和角色的夹角实际上是30度。
所以：
如果地块的模型比较高的话就会导致穿模，如下图左所示。如果将角色调整到和场景垂直，表现效果像纸片，如下图右。如果调整相机到不像纸片人的话，那么游戏又没法操作，如下图中。
3.1.1 错误的解决方案
实际上想要得到的是上图左的表现，同时又不穿模。一个错误的方案是通过关闭test，然后将所有场景中的模型、摆件、角色做深度排序，类似于传统的2D处理方式。问题能够解决，但是带来额外的两个问题。
破坏合批。打破静态batching。整个场景是一个静态的，包括它的光照贴图和阴影贴图，正常在渲染的时候可以用相当低的DrawCall来完成场景绘制（绝大部分场景的DrawCall都在个位数）。如果混排，会打乱角色前、角色后的顺序，会增加非常多的DrawCall。
摆件排序困难。如果一个小摆件，是跨两个格点的（比如树），那么对它进行排序就很难知道它在哪一层。
实际上的解决方式是把深度进行了调整。在Vertex Shader最后把深度变换到垂直于场景的空间，来欺骗深度测试和深度写入。如下，上图是着色空间，下图是深度空间。
到此问题尚未完全解决。因为某些角色的攻击比较特殊，比如杜宾的攻击是向下挥鞭。纵深特别长还是会穿插到模型中。所以这里分两种策略。
高度大于等于0的时候，使用上述方式。高度小于0的时候，让鞭子旋转到平行于这个场景的X、Y平面。
3.2 LightMap表现不一致
调研发现，在Unity2017 LTS上，Lightmap在编辑器，实机，移动平台上最后的结果都不太一样。
主要原因是因为光照贴图存储的并不是颜色，而是一个间接光的，范围是在0和1之外。它原本是一些APBR的信息，无法用一个常规的LDR的贴图格式把它存下来。所以需要对它进行编码，才能呈现为LDR的贴图格式。这个编码的方式在不同平台上是不一样的，这也导致了最后在不同平台上的表现结果不一致。
GBM会将额外的信息存储到第四个通道alpha当中。
WLDR的方式比较暴力，它直接把RGB的原始信息除以2乘下来，所以它丢失的信息比较多。
主要的编码过程跟平台以及Lightmap Quality相关，不同的设置会带来不同的结果。
当Lightmap光照贴图被烘焙出来之后，它的TextureType默认是设置为Lightmap的。那么这时候Unity就会根据当前所选择的平台来编码这个Lightmap，从而影响采样的结果。
如果在PC上把Lightmap Quality成为High的话，它存储的是一个原生的HDR的信息。如果把它设为Normal，它会把HDR信息通过RGBM进行编码，存在一张LDR的贴图里面。
如果是iOS的安卓，也就是移动平台，它会比较暴力地把所有这样的信息都给编码成double LDR的方式。而double LDR的方式下，alpha会直接丢弃。
所以最后的解决方案就是将光照贴图的TextureType从Lightmap改为default。同时把RGBM的alpha通道这个信息从Lightmap当中抽离出来，放入shadowmask的green chanel（因为shadowmask实际上使用了red chanel通道）。
最后，修改GBR的shader，用RGBM来解码这个lightmap，并使用从shadowmask中读取的信息，也就是刚才说的green chanel的信息来辅助这个解码。PC上也是需要相应地修改兼容性，使所有平台上达到一致的效果。
最后就是一个全平台统一的场景效果。
3.3 恰当的融合3D+2D
定义主题tint color。对每个主题的场景定义一套作用于所有单位、所有角色的tint color，使其着色和场景氛围更接近。让美术人员拥有调配氛围和色调的能力。美术人员来调整3D场景、2D角色，包括特效的整体氛围和色调，使它更加融洽。后处理。包括color grading和Bloom等，让美术工作人员能通过他们的专业审美来使整个场景3D和2D更加协调。
4 总结
使用了PBR的渲染和工作流去处理D模型的场景。使用Spine处理2D角色。修改Shader来欺骗管线进行遮挡关系的显示。自定义Lightmap的编码和解码流程。使其在不同平台拥有相同的效果。使用了定制化的tint color和一些后处理选项。让3D场景和2D角色能融合得更好。最后，将所有的选项都开放给美术人员，用艺术家的眼光来调整最终的画面效果。
混在明日方舟里的evolt是一种非常有意思的方式，它通过结合3D和2D动画的元素，为玩家带来了更加真实、生动的游戏世界。尽管存在一些缺点，如怪异的动画和较高的制作成本，但是这种结合方式的优点远大于缺点，为游戏的体验带来了很大的提升。相信随着技术的不断发展，这种混合模式将会越来越成熟，为游戏行业带来更多的机会和挑战。
