我图网-专注正版设计作品交易
买家用户ID
卖家用户ID
您是否在找 :
我图网共为您找到 45893 个原创高质量名片背景图片素材供您在线下载，所有作品均是高清原创正版授权。您还可以找
400-600-8526
还没账号？
其它登录方式&figure&&img src=&https://pic4.zhimg.com/v2-24cddf6c9590_b.jpg& data-rawwidth=&1042& data-rawheight=&580& class=&origin_image zh-lightbox-thumb& width=&1042& data-original=&https://pic4.zhimg.com/v2-24cddf6c9590_r.jpg&&&/figure&&p&欢迎来到《游戏开发入门指南》，我们是一个专注于传授游戏开发知识和技术的专栏，大部分内容偏向初学者，内容尽可能有趣又能吸收到游戏开发的知识。&/p&&p&专栏自开辟以来，不光我们自己产出，也非常荣幸地吸纳到了不少外来作者的文章。当然也因此，专栏的排列稍显杂乱。&/p&&p&基于此情况，这里特地整理了一篇目录并置顶，目的是为了方便大家查阅和浏览。&/p&&p&感谢大家的支持，同时也随时欢迎大家提出批评和建议。&/p&&p&&br&&b&精品Unity游戏教程：&/b&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Yukine：Unity程序猿勇闯茶杯之魂（一）&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Yukine：Unity程序猿勇闯茶杯之魂（二）&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Meta42：300行代码实现Minecraft(我的世界)大地图生成&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Minecraft大地图生成续集——小锄头挖起来&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&是男人就下100层—Unity实现欢乐球球(1)Mesh生成&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&繁华如梦：炫酷跑酷教程（1）——简单的动态地图生成与人物动作&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&炫酷跑酷教程（2）——多样化的道路生成与简单UI&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&炫酷跑酷教程（完）——人物控制&/a&&/p&&p&&br&&/p&&p&&b&Unity进阶：&/b&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Unity3D新版NavMesh系统功能初步探索&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】TimeLine系列教程——编排剧情！&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】TimeLine&Cinemachine系列教程——动作特写！&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】TimeLine&Cinemachine系列教程——动态赋值，我要打十个！&/a&&/p&&p&&br&&b&皮皮关学生作品展示：&/b&&/p&&p&控制台类：&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&控制台游戏专题又来了，这次是你们没有见过的船新版本&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&我们的同学新出炉了一批控制台小游戏&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&皮皮关：学习编程的好方法——控制台游戏&/a&&/p&&p&Unity类：&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&咱们同学的Unity小项目也出炉了&/a&&/p&&p&&br&&/p&&p&&b&UGUI界面系列教程：&/b&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】UGUI系列教程————UGUI基础！界面拼接！&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】UGUI系列教程——监听事件！完成解谜！&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】UGUI系列教程——OSU！动态界面制作！&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】UGUI系列教程——OSU！Battle！&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】UGUI系列教程——OSU！Video！&/a&&/p&&p&&br&&/p&&p&&b&给猫看的AI系列教程：&/b&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&给猫看的游戏AI实战（一）Unity俯视角游戏初步&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&给猫看的游戏AI实战（二）视觉感知初步&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&给猫看的游戏AI实战（三）基于状态机的AI系统&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&给猫看的游戏AI实战（四）眼见为实——让AI的思考过程可视化&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&给猫看的游戏AI实战（五）忙碌的搬运工与AI协作&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&给猫看的游戏AI实战（六）行为树和Behavior Designer插件（上篇）&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&给猫看的游戏AI实战（七）行为树和Behavior Designer插件（下篇）&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【高级AI】用Unity实现一群鸟&/a&&/p&&p&&br&&/p&&p&&b&游戏开发工具与工作流：&/b&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】工具类系列教程——配置化和规范流程&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】工具类系列教程——对象池！&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】工具类系列教程—— 代码自动化生成！&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity2D】关卡编辑好帮手——TileMap&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&让道具添加随心所欲——70行代码实现表格转换工具&/a&&/p&&p&&br&&/p&&p&&b&趣味游戏教程：&/b&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&在Unity中复刻《超级马里奥》&/a&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&用Unity去释放自己的恶意——我们来实现一下《掘地求升》&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Unity快速上手系列之番外篇：《2D横版跑酷》&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&四五二十：Unity快速上手系列之2：2D物理弹球&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Unity快速上手系列之1：拉方块&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&连连看游戏教程——后宫大作战&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Unity快速入门小游戏----消消乐&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Unity中实现坦克大战——90版经典游戏复刻&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&一场车祸男子却用Unity做出这款游戏&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Unity 换个galgame的姿势实现《扫雷》&/a&&/p&&p&&br&&/p&&p&&b&游戏服务器通识：&/b&&/p&&p&
&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&游戏服务器架构通识&/a&&/p&&p&&br&&b&H5游戏系列：&/b&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&H Qin：Egret白鹭引擎实战旅行青蛙(一)&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&Egret白鹭引擎实战旅行青蛙(二)&/a&&/p&&p&&/p&
欢迎来到《游戏开发入门指南》，我们是一个专注于传授游戏开发知识和技术的专栏，大部分内容偏向初学者，内容尽可能有趣又能吸收到游戏开发的知识。专栏自开辟以来，不光我们自己产出，也非常荣幸地吸纳到了不少外来作者的文章。当然也因此，专栏的排列稍显…
&figure&&img src=&https://pic3.zhimg.com/v2-ae0cfa2a5a33651e9cdc6e8_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic3.zhimg.com/v2-ae0cfa2a5a33651e9cdc6e8_r.jpg&&&/figure&&p&&b&因为一桩蓄意诋毁，腾讯要起诉头条了。&/b&&/p&&p&&br&&/p&&p&老实说，在这个近乎于畸形的中国游戏界，乃至互联网界，腾讯向来是毫无疑问的第一主T。&/p&&p&或许是因为多年“抄袭”的“积重难返”，又或者是背靠两大流量源的肆无忌惮，尽管腾讯几次强调对口碑的重视，可这些年来他们展示出的公关印象一直是软绵绵的，舆论导向也从未爬出过下水道。&/p&&p&然而这一次，对于对手的诋毁，腾讯的反应不可谓不迅速。&/p&&p&6月1日，距离5月30日头条“改帜喷鹅”仅两天，腾讯宣布起诉北京字节跳动科技有限公司、北京微播视界科技有限公司，索赔1元，并要求其公开道歉。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-677e17ddc34c7a8bf97ca6a58f549f09_b.jpg& data-size=&normal& data-rawwidth=&691& data-rawheight=&789& class=&origin_image zh-lightbox-thumb& width=&691& data-original=&https://pic3.zhimg.com/v2-677e17ddc34c7a8bf97ca6a58f549f09_r.jpg&&&figcaption&最后一段几乎等于腾讯系与头条系全面开战的冲锋号了&/figcaption&&/figure&&p&你看，看上去这就是头条在腾讯帝国围追堵截下，一次气急败坏、漏洞百出的泼妇骂街而已，一向温吞的腾讯竟然以雷霆之势把架拉到法庭上去打，是不是有些过了？&/p&&p&——不，要知道，腾讯与头条的战争，几乎可以称作双方赌上命运的一战了。&/p&&p&&br&&/p&&p&&b&一、腾讯从未想过以这种形式失去江山&/b&&/p&&p&&br&&/p&&p&「流量变现」，这四个字几乎能概括98%中国互联网行业的经营手段。&/p&&p&而背倚QQ、微信两大主要流量源的腾讯，毫无疑问地称霸了中国手游市场。&/p&&p&在游戏市场上，除了玩家们调侃的“买断入股微创新”之外，腾讯还贯彻着在战略上蔑视敌人的宗旨。&/p&&p&对于某些挑战和攻击，腾讯一向是听之任之的，你看隔壁猪场这么些年来一直站在腾讯的虚拟对立面，并以此为基础立场，鼓吹对游戏的“创新”和“热爱”，以至于几乎每一部产品都离不开铺天盖地，却又润如无声的“口碑营销”。&/p&&p&可就算网易一顿骚操作，换来的那点玩家口口相传的导入量，腾讯游戏部门只要给微信爸爸端碗茶分块肉，就能轻松到手——游戏市场上的春风得意，手游利润的逐年增长，似乎让腾讯奏起了「没人能打败我」的BGM。&/p&&p&然而在BGM之外，短视频的火爆，却让腾讯以一种出乎意料的形式，失去了半壁江山。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-d70f30cee97dece6a4c4b2_b.jpg& data-size=&normal& data-rawwidth=&500& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic3.zhimg.com/v2-d70f30cee97dece6a4c4b2_r.jpg&&&figcaption&大家意识中上不了头条的汪峰，实际上是买“上不了头条”的汪峰——流量世界&/figcaption&&/figure&&p&毫无疑问，腾讯没有赶上短视频的第一趟车，这让他们很窝火。&/p&&p&当然，如果只是不相干的流量——比如微博——那拿不到就算了，反正你们再八卦，还是要刷微信和玩游戏的。&/p&&p&可是现如今，事情正向深渊滑坡：腾讯突然发现，随着短视频的崛起，自家游戏用户的活跃度开始下降——有了「有毒」的短视频，玩家们甚至不想玩手游了。&/p&&p&这一切让腾讯很震惊，他们庞大的调研团队经过日夜深研， 得出了一个早八百年就应该用屁股得出的结论：在用户总娱乐时间有限的前提下，在新鲜又有趣的短视频面前，他们的游戏开始缺乏竞争力了。&/p&&p&这一切也让腾讯开始怀疑鹅生：从什么时候开始，游戏还他妈要跟短视频竞争了？&/p&&p&没错， 在一些腾讯用户眼中，腾讯游戏带来的娱乐体验在逐渐瓦解，这和厂商自身脱不开干系：在近乎固化的评级体系下，腾讯运营的同类型的游戏往往被套上同样的模子，全靠IP和消费优化带来体验区分。&/p&&p&然而IP和情怀是有限的，KPI和付费坑则是无限的，经历了同质化的轰炸，玩家开始对固化的游戏形式感到疲劳和厌烦。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-219764ffa52edf6f086ab30_b.jpg& data-size=&normal& data-rawwidth=&4096& data-rawheight=&2304& class=&origin_image zh-lightbox-thumb& width=&4096& data-original=&https://pic1.zhimg.com/v2-219764ffa52edf6f086ab30_r.jpg&&&figcaption&没错，我就是疯起来连自家游戏都黑——你来告诉我这些游戏UI有什么区别！说啊！&/figcaption&&/figure&&p&而腾讯主打的大DAU竞技游戏，核心依靠的是游戏带来的社交体验——说白了，所有竞技游戏都是对同一游戏性的反复咀嚼，区别只是在每一局中玩家自生成的内容不同。&/p&&p&从王者荣耀到刺激战场，腾讯一直在复刻PC端上成功的竞技游戏，也一直在从机制和操作上，为游戏的简化和普及化作出努力，以便适应自己的目标用户。&/p&&p&然而，碎片化、社交、快节奏刺激、内容自生成、丰富的趣味性——当这一切甚至不再需要登陆账号进入游戏，只需要随手一划屏即可享受的时候，玩家便不再需要这样的游戏了。&/p&&p&在我看来，这一切不啻一场诅咒：在游戏商人们不遗余力地把游戏的复杂程度和可玩性削减再削减，削到玩和看差不多的时候，却猛然发现用户开始被不需要玩，只需要看的短视频给抢走了。&/p&&p&这不能怨别人，腾讯游戏做了这么多年，以一家“游戏开发商”来说，商业成绩做得的确不错；可若以一个“游戏开发者”来评判，则完全可以称得上不合格。&/p&&p&为了拿流量刷钱，求快求稳，每年UP都在消费IP，拿出同质化的“娱乐剩饭”来收情怀税，没有自己原创的IP资源；在KPI和美誉度之间从来选择前者，从不将游戏当可持续发展的虚拟世界来“运营”，以至于路人缘差到顶点，缺乏“真爱脑残粉”，以至于很多玩家都在因为社交绑架而捏着鼻子玩游戏；缺乏创新——哪怕是网易式的“创新”——不敢尝试更多类型，更多题材的游戏，对潮流的模仿仅限于大流量的竞技游戏，玩家群体的口味单一，反馈单一，审美疲劳。&/p&&p&我可以负责任地说，短视频抢不走游戏的流量——只要是把游戏真正当做游戏来做——能抢走的只有制式化、流水线的轻娱乐产品和快反馈，自生成的社交娱乐产品。&/p&&p&这条路是腾讯游戏自己走出来的，是他“成功”的关键，也必然导致了他如今面临短视频竞争的尴尬情况。&/p&&p&未来的腾讯，要么尝试把游戏从轻度快消的娱乐产品定位中剥离开来，去做一些真正的“游戏”；要么转型布局微视，继续靠惯用流量背景用手段挤走竞争者，抢夺市场，直到下一个互联网热点的来临。&/p&&p&后者他们已经开始在做了，但我由衷希望腾讯帝国能在前者进行一些改变：从近乎固化的立项、评级、KPI制度入手，给鹅厂有志青年们一些创作空间，去做一些真正有趣、特别的游戏——照比马化腾在“毒品论”面前空口无凭的抗辩，这些才是对游戏之神真正的侍奉。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-bfb281bb7d1a624ba46147beb57a9792_b.jpg& data-size=&normal& data-rawwidth=&500& data-rawheight=&240& data-thumbnail=&https://pic3.zhimg.com/v2-bfb281bb7d1a624ba46147beb57a9792_b.jpg& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic3.zhimg.com/v2-bfb281bb7d1a624ba46147beb57a9792_r.jpg&&&figcaption&凡人皆有一死，凡人皆需侍奉。&/figcaption&&/figure&&p&至于头条，我们理解你们经历和即将经历的一切，在中国互联网行业，腾讯是一个绕不过去的坎，但这一切不是你们两面三刀乱放地图炮的借口。&/p&&p&一边做着进入游戏行业的布局，一边卖着游戏的广告，一边痛斥着游戏的罪孽，多么压抑和分裂的价值观才能做出这样的怪胎行为？&/p&&p&最让人无法忍受的，是你们援引的文章中，再一次，再一次使用孩子当做挡箭牌，把游戏放到与教育对立的立场上，这一切不禁让我想要问一句——&/p&&p&&br&&/p&&p&&b&二、孩子血的头条好吃吗？&/b&&/p&&p&&br&&/p&&p&头条转载的这一篇檄文，明显是在针对腾讯。&/p&&p&但是这篇文章却不光惹恼了腾讯，也惹恼了所有游戏制作者和热爱游戏的玩家们。&/p&&p&“主流媒体”吃孩子的人血馒头来指责游戏也不是一次两次了：从电子鸦片到网络毒品，他们总有办法把游戏写作洪水猛兽，去掩盖客观存在的真实问题。&/p&&p&诚然，这其中有游戏自己的原因——一些大热的游戏，自身的确不够硬，经不起质疑——但是把炮火开向整个游戏产业，甚至整个游戏形式，只能说蠢坏二字，各占一半罢。&/p&&p&在中国，大部分人不会把孩子的教育当做一件严肃的事情去做，以至于孩子更像是父母的私有财产，而不是一个独立人格。&/p&&p&毕竟教育孩子没有教程，当父母也不需要考证，生孩子只需要会做爱，上帝不会编写程序对傻子能不能生孩子做预处理，一切只能靠自然的演化和社会的筛选。&/p&&p&因此无论是否真正优秀的人们，都只会惯性地相信自己是优秀的，因此自己的孩子也是优秀的，一切影响孩子成长的因素都是外因——再次重申，上帝不会对傻子能不能生孩子做预处理。&/p&&p&当然，在大众舆论上，孩子依旧是重要的，是需要被保护的，这就导致了一个有趣的现象：在打架的时候，孩子可以被绑在胸口，当作大义的护心镜；在实施偷窃的时候，孩子可以被放在车里，任由父亲在外面光着膀子舞舞喳喳，必要的时候，再被拿出来充当挡箭牌。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-5adc1dbff06_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&393& data-rawheight=&216& class=&content_image& width=&393&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-325bd0076f4ffa88ee25780c_b.jpg& data-size=&normal& data-rawwidth=&337& data-rawheight=&366& class=&content_image& width=&337&&&figcaption&“我车里有孩子！”&/figcaption&&/figure&&p&对游戏的战争也是如此，孩子被一次又一次地被当做旗帜高高举起：在主流媒体的口中，孩子被是受毒品蛊惑的受害者，家长是苦口婆心却无能为力的伤心者，游戏是毒品，媒体是天使，政府是上帝。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-00ae12d68bed358a48a4a569c690d568_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&450& data-rawheight=&701& class=&origin_image zh-lightbox-thumb& width=&450& data-original=&https://pic3.zhimg.com/v2-00ae12d68bed358a48a4a569c690d568_r.jpg&&&/figure&&p&可没人真正想过的是：孩子在接受着怎样的教育？家长给孩子提供了怎样的环境和关注？游戏产业应该提供怎样的游戏？媒体应该有怎样的引导作用？以及政府应该给出怎样的制度和法规去规范管理？&/p&&p&没有人管这些，为什么？太费脑子了啊——有想这么多事情的时间，用来赚钱买房好不好？&/p&&p&于是孩子的陪伴需求，家长的教育缺陷，游戏的商业导向，媒体的流量需求，政府的懒政借口，统统可以指向游戏；即使游戏中蕴含着巨大的宝藏、无限的世界和丰富的幻想，他们依旧愿意因利益相关，把游戏当做一些矛盾的始发地和终点站，对其攻讦不休。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-60f84abbfd1e4f6fae6e6b0d_b.jpg& data-size=&normal& data-rawwidth=&725& data-rawheight=&418& class=&origin_image zh-lightbox-thumb& width=&725& data-original=&https://pic1.zhimg.com/v2-60f84abbfd1e4f6fae6e6b0d_r.jpg&&&figcaption&游戏究竟能带给玩家什么？&/figcaption&&/figure&&p&所以，就这样吧！干掉游戏吧！&/p&&p&把北上广打作金三角吧！尽管里面充斥着一些为了实现游戏梦而跋涉千里，远离家乡和亲人，透支着生命和热情，支援当地租房事业的吸霾蠢货。&/p&&p&把游戏从业者打作涉毒人员吧！尽管为了做出一款游戏，他们要学习程序、数学、美术、艺术、历史、心理、文学、设计……这些远比一场天性的交媾更枯燥却更具创造力的东西。&/p&&p&把游戏当做毒品吧！尽管他们在枯燥和残酷的现实生活中为人们插上幻想的翅膀，尽管他们给人们带来奇妙的世界和规则，让人们惊讶于幻想的美妙和生命的美丽。&/p&&p&所以就这样做吧。&/p&&p&以孩子的名义，以民意的名义。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-71cb2d100422aebe2a564_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1025& data-rawheight=&578& class=&origin_image zh-lightbox-thumb& width=&1025& data-original=&https://pic3.zhimg.com/v2-71cb2d100422aebe2a564_r.jpg&&&/figure&&p&——开什么玩笑？&/p&&p&消灭了游戏，世界就和谐了？&/p&&p&要知道，电子游戏的诞生不过几十年，在更长久的历史长河中，人类从未间断过地因自身的愚昧和无知，一次次地毁灭自己和他人原本美好的生活。&/p&&p&在我小的时候，人们总是说，游戏是西方侵略者带来的精神鸦片，也正因为这个，国产单机游戏在黄金的年代失去了生存的机会，纷纷转向网游，去为挖掘付费耗尽心血。&/p&&p&但是人们从不说，鸦片并不是清政府羸弱和懦弱的原因——羸弱和懦弱本身才是。&/p&&p&而就算是在中国手游已经从商业上实现了ios畅销排行榜的前十全国产化的今天，我们依然阻挡不了他们对游戏的恶意诋毁——只不过主体从「西方社会」，变成了「腾讯们」，若不是感同身受，倒真有一种赛博朋克的戏剧感。&/p&&p&丑陋的人不喜欢看镜子，因为他们害怕刺痛；丑陋的人也可忽视刺痛，因为他们已经习惯了丑陋。&/p&&p&那些抱怨着小孩玩起游戏来不认识爹妈的爹妈，是否真正知道该如何正确地成为爹妈，我十分怀疑这一点。&/p&&p&孩子沉迷网游，一方面是对赏罚机制的沉迷，更主要的原因，是对关注的渴求：如果孩子的父母“沉迷于”赚钱，忽略孩子的精神建设，吝啬于对孩子的陪伴，不愿意关注孩子的心理、思想状况，那么孩子通过其他途径满足自己的受关注欲，是完全可以预料的。&/p&&p&而父母为何“沉迷”于赚钱，更是一个链接社会各方面因素的巨大问题：在匮乏的精神文明建设与沉重的生活负担的共同作用下，请问，&b&究竟是游戏害了一个年代的孩子，还是年代害了一个年代的孩子呢？&/b&&/p&&p&同时，那些习惯于为游戏编织罪名，以为孩子好的名义，帮忙掩盖从政策到环境，种种社会问题的媒体们，请问，&b&孩子血的头条好吃吗？&/b&&/p&&p&&br&&/p&&p&&b&三、分级是不可能分级的，自由量裁权怎么能说放就放？&/b&&/p&&p&&br&&/p&&p&&i&本段内容因特定原因无法显示。&/i&&/p&&p&&br&&/p&&p&&b&四、游戏鉴赏了解一下？&/b&&/p&&p&&br&&/p&&p&在知乎关于游戏与儿童教育的相关话题中，有非常多有价值的回答，能够向家长解释&a href=&https://www.zhihu.com/question/& class=&internal&&如何引导孩子有选择地玩最值得玩的游戏？&/a&&/p&&p&在我看来，如果家长没本事用其他“正经喜好”剔除孩子对游戏的兴趣，或者说家长需要游戏代替自己陪伴孩子，那么完全可以抽出一些用于研究如何抢优惠券省钱的时间，阅读和学习一下如何正确引导孩子进行游戏。&/p&&p&因为在我看来，无论无良媒体怎样消费游戏，无论无能和教育缺席的家长怎样怪罪游戏，游戏作为依旧在快速成长的朝阳行业，一定会迎来更大的发展。&/p&&p&在不远的未来，除了商业游戏，竞技游戏外，功能性游戏，教育游戏，模拟游戏，艺术游戏，叙事游戏，创意游戏——甚至广大玩家期待的3A级游戏，都会逐渐确立起自己的存在意义，并在累积中逐渐出现在人们的视野中。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-e986fdc484f86e5e6cf686e56b7a9188_b.jpg& data-size=&normal& data-rawwidth=&489& data-rawheight=&287& class=&origin_image zh-lightbox-thumb& width=&489& data-original=&https://pic2.zhimg.com/v2-e986fdc484f86e5e6cf686e56b7a9188_r.jpg&&&figcaption&腾讯-Death Coming&/figcaption&&/figure&&p&很遗憾，正如同鸦片战争一百多年过去了，我们这些不吸烟的人依然要忍受在厕所里吸取混合着屎味的二手烟一样，游戏也将继续存在，区别是游戏将通过发展和创造逐步证明自己。&/p&&p&所以与其期盼着不存在的救赎，不如尝试着手改变一些事？&/p&&p&比如以一个成年人的角度，去探寻和鉴赏游戏的美好，再通过言传身教，把美好的一面传递给孩子——无论是游戏还是其他东西，这种传递都是为人父母的重要责任不是吗？&/p&&p&所以，学一学游戏鉴赏吧！&/p&&p&把你们的视界从尔虞我诈，争强斗狠的竞技游戏以及讲求奖赏回馈，无限养成的商业游戏中解脱出来，去看看其他游戏：温馨的，静谧的，欢乐的，振奋的，相互帮助的，传递美德的，美丽的，充满创造性的，构建了一个世界的，讲述了一个故事的，描述了一段关系的——真正的游戏。&/p&&p&要知道，之所以有人愿意把游戏放在“艺术”的位置上，就是因为他和文学、绘画、音乐乃至于电影的八种艺术一样，从不会给人一种固定的印象，而是能够融入人类的创造性，产生近乎于无限的可能性。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-552fb74b10e9e25bea9b7c_b.jpg& data-size=&normal& data-rawwidth=&640& data-rawheight=&436& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic4.zhimg.com/v2-552fb74b10e9e25bea9b7c_r.jpg&&&figcaption&图片来源于触乐&/figcaption&&/figure&&p&同样是创作，文学有低俗小说，色情小说，绘画有猎奇本子，音乐有摇头音乐，嗑药说唱，更别说情色甚至成人影片——大家都知道辩证地看待每一种创作形式，大家也都知道每一种创作类型有他应该归属的位置，怎么到了游戏就妄图用一句“精神鸦片”来一刀切了呢？&/p&&p&前些日子，北大开了一门“电子游戏通论”的选修课，被各大媒体炒作了一番之后，人们集体性地忽略了一些棘手的事情：那就是与其他创作形式一样，游戏是否也需要一个成熟鉴赏体系，帮助玩家们去建立正确的“游戏观”呢？&/p&&p&答案在我看来是毋庸置疑的：成熟的鉴赏体系能够量产成熟的玩家，成熟的玩家能够推动成熟的市场；同时他们也能变作成熟的父母，正确地引导和教育孩子，传递游戏中的善和美。&/p&&p&与性一样，娱乐也是生命的一种本能需求，同时也是基因放置在宿体上的陷阱，快感和好奇能让人享受快乐，也能让人走向堕落——我们已经看到了对性教育的漠视所产生的后果，为何要在娱乐教育上犯下同样的错误？&/p&&p&同时，这一切也给游戏从业者敲响了警钟：在满嘴付费、大R、ARPU值的同时，我们是不是也应该在游戏中传递一些善良和美好的东西？&/p&&p&你们是否忘记了入行时的梦想，和面对好游戏时的赞叹和感动呢？&/p&&p&须知我们负罪前行，是为了更好的明天。&/p&&p&共勉。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ddd02fc23f3_b.jpg& data-size=&normal& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic3.zhimg.com/v2-ddd02fc23f3_r.jpg&&&figcaption&对于一些游戏行业从业者来说，这或许是一个保护与救赎故事。&/figcaption&&/figure&&p&&br&&/p&&p&&br&&/p&&p&2018年的儿童节，在一片乱象中结束了。&/p&&p&我不想怀念它。&/p&&p&&/p&
因为一桩蓄意诋毁，腾讯要起诉头条了。 老实说，在这个近乎于畸形的中国游戏界，乃至互联网界，腾讯向来是毫无疑问的第一主T。或许是因为多年“抄袭”的“积重难返”，又或者是背靠两大流量源的肆无忌惮，尽管腾讯几次强调对口碑的重视，可这些年来他们展示…
&figure&&img src=&https://pic3.zhimg.com/v2-14b29d5f41e2c8c1b5557_b.jpg& data-rawwidth=&1040& data-rawheight=&641& class=&origin_image zh-lightbox-thumb& width=&1040& data-original=&https://pic3.zhimg.com/v2-14b29d5f41e2c8c1b5557_r.jpg&&&/figure&&p&《崩坏3》的成功业内有目共睹，这款产品不仅在二次元领域收到诸多玩家的热衷，在手游产品技术上，它也实现了诸多突破，比如在手游的高品质卡通渲染领域，《崩坏3》的确做到了国内顶尖水准。&/p&&p&在去年的Unite开发者大会中，米哈游技术总监贺甲分享了他们在PC端用Unity引擎探索高品质即时卡通渲染的实现方案。而在今年的Unite 2018开发者大会中，贺甲进一步分享了他们&b&在移动端的具体实现方案&/b&。&/p&&p&两者很大的不同在于，PC端对技术的探索更多会追求极致的表现，因此不会过多在意性能消耗方面的情况，而这项技术实际运用到移动端的《崩坏3》之后，需要考虑更多优化、适配，以及某些情况下更加便捷的实现方案。&/p&&p&会后，贺甲也接受了媒体群访。在他看来，国内团队想要涉足卡通渲染领域，并做出一定的成效，&b&首先必须搭建对卡通渲染感兴趣的技术团队&/b&，以保证准确抓住玩家的需求点。&b&其次要提升整个项目的管理能力&/b&，来保证产品的有效输出，而非停留在Demo实现阶段。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-63d60adccfc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1183& data-rawheight=&784& class=&origin_image zh-lightbox-thumb& width=&1183& data-original=&https://pic1.zhimg.com/v2-63d60adccfc_r.jpg&&&/figure&&p&以下演讲及采访内容经游戏葡萄整理：&/p&&p&大家好，欢迎来到Unite2018参加这次演讲，我叫贺甲，目前在miHoYo担任技术总监。我和我的团队主要关注PBR（基于物理的渲染技术）和NPR（非真实渲染技术）方面的实时渲染，以及用于动画CG和游戏过场动画的交互式物理研究。&/p&&p&目前，我们的一部分工作是利用Unity实现高品质的卡通渲染。这次演讲的主题是在Unity上实现高品质卡通渲染的效果，以及这些方法针对各个平台特性进行的优化方案，涵盖了从移动端，到高性能PC等不同等级的平台。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-8cdfc3bac7_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&964& data-rawheight=&617& class=&origin_image zh-lightbox-thumb& width=&964& data-original=&https://pic4.zhimg.com/v2-8cdfc3bac7_r.jpg&&&/figure&&p&本次演讲涉及到的主要方面：&/p&&p&首先我会介绍一些应用在移动端有关崩坏3的渲染特性。&/p&&p&然后我会谈谈动画风格CG渲染中使用的一些技术，比如插画风格的角色渲染，特殊材质的渲染，特效的渲染及与卡通渲染适配的后期处理等。&/p&&p&最后一部分是关于对今后的展望。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-6aafa5511d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1040& data-rawheight=&641& class=&origin_image zh-lightbox-thumb& width=&1040& data-original=&https://pic2.zhimg.com/v2-6aafa5511d_r.jpg&&&/figure&&p&我们来看看在《崩坏3》的场景中使用的一些渲染特性。&/p&&p&从图中我们可以看出，场景中使用了不少特效来提升表现力，比如bloom后处理效果、动态粒子、平面反射、屏幕扭曲特效等，下面我们将会逐一对这些效果进行解析。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-d4abdd7aabacb1de6f05f9de_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1151& data-rawheight=&679& class=&origin_image zh-lightbox-thumb& width=&1151& data-original=&https://pic3.zhimg.com/v2-d4abdd7aabacb1de6f05f9de_r.jpg&&&/figure&&p&首先我们来看一下&b&如何实现高品质的反射效果&/b&。&/p&&p&在移动端实现高品质的反射，平面反射是一个综合了效果和性能因素较好的办法。通常做法是以地面为对称平面，将摄像机放置在对称位置后渲染场景得到反射结果。&/p&&p&为了能表现出地面的金属质感，首先我们对反射结果应用六边形采样模糊，然后使用金属纹理细节法线贴图来扰动反射结果，除此之外我们还使用了镜面反射贴图和菲涅尔效果来进一步增强反射质感。&/p&&p&在一些远离地面高度或非水平的次要反射表面上，平面反射就不在适用，为此我们使用环境贴图反射作为替代方案。为了尽量减少渲染反射场景所占用的开销，我们将反射分辨率限制在1/3以下，由于反射贴图会经过模糊处理，即使降低了较多的分辨率也并不能明显看出区别，并且我们在渲染反射的过程中还使用简化版的材质，并忽略一些不是很重要的小物体。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a17efcf3e3cd7af5cab84_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&890& data-rawheight=&528& class=&origin_image zh-lightbox-thumb& width=&890& data-original=&https://pic1.zhimg.com/v2-a17efcf3e3cd7af5cab84_r.jpg&&&/figure&&p&接下来让我们看看另一个效果：&b&全屏扭曲特效的应用&/b&。&/p&&p&我们在《崩坏3》的场景中较多的使用了屏幕扭曲效果，比如刀剑的拖尾特效，时空断裂效果，水流瀑布及其他场景效果。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-cce04ca28f6b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic1.zhimg.com/v2-cce04ca28f6b_b.jpg& class=&content_image& width=&370&&&/figure&&p&在渲染扭曲效果的过程中，我们使用3个通道来存储扭曲的渲染结果，两个用于存储uv偏移，另一个用于存储扭曲强度mask，扭曲强度mask用于执行深度剪裁和基于距离的强度控制。&/p&&p&使用单独的pass渲染扭曲结果到帧缓冲纹理对于移动平台来说开销较大，所以我们在最终的后处理中整合应用了扭曲效果，相比前者要快很多。&/p&&p&但这种方法也可能导致靠前面的物体由于没有分层处理而混入后面扭曲材质的问题，不过考虑到移动平台的性能限制，相对于整体效果而言这种妥协是值得的。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-ddfba17f22595ac39fdb6349ade2f36c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&915& data-rawheight=&525& class=&origin_image zh-lightbox-thumb& width=&915& data-original=&https://pic1.zhimg.com/v2-ddfba17f22595ac39fdb6349ade2f36c_r.jpg&&&/figure&&p&让我们再看看&b&bloom的实现&/b&。&/p&&p&整个场景如果开启HDR会使用fp16格式的render target，然后下采样到原始大小的1/4，以便之后的后处理流程使用。&/p&&p&首先，我们需要指定一个亮度阈值来提取图像中的高亮区域，实现方法也并不复杂，只需从源像素减去阈值，得到的结构就是提取后的高亮度区域，叠加这层内容能使结果看起来更具对比并且色彩鲜艳。&/p&&p&接下来，我们产生4个大小依次递半的render target，并将其内容应用半径逐渐增大的高斯模糊，最后我们将这些模糊后的结果合并起来，以获得最终的bloom效果。&/p&&p&从最终的效果图我们可以看到，bloom效果不仅起到用来表达高亮区域的视觉效果，还对整个图像的色彩中起着明显的润色作用。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-9f51f06546eda1c5ebb99_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&947& data-rawheight=&606& class=&origin_image zh-lightbox-thumb& width=&947& data-original=&https://pic2.zhimg.com/v2-9f51f06546eda1c5ebb99_r.jpg&&&/figure&&p&当完成了反射渲染，扭曲效果的及bloom的处理后，最终就可以将这些中间结果合成在一起。&/p&&p&我们使用filmic tone mapping与曝光和对比度控制来将fp16 HDR的原图像转换为最终的LDR帧缓冲。由于这些合成操作都是在一个Pass中完成的，所以即使在移动设备上也可以满足性能方面的需求。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-fe39bbf2a8ef011c4c6ce3b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&937& data-rawheight=&567& class=&origin_image zh-lightbox-thumb& width=&937& data-original=&https://pic4.zhimg.com/v2-fe39bbf2a8ef011c4c6ce3b_r.jpg&&&/figure&&p&下面我们来介绍一下游戏中的&b&天气和云海的实现方案&/b&。&/p&&p&我们想要创造一个能让玩家感受到纵深，具有各种丰富形态以及动态光照变化的云的渲染系统。而该系统也应该易于调整和使用，方便美术可以创造出不同类型的云层效果。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-9ab9f2e377af43efba6db572c8abfd7c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&935& data-rawheight=&567& class=&origin_image zh-lightbox-thumb& width=&935& data-original=&https://pic1.zhimg.com/v2-9ab9f2e377af43efba6db572c8abfd7c_r.jpg&&&/figure&&p&这对我们来说也是一个有趣的挑战，接下来就让我们来谈谈这些功能：&/p&&p&首先让我们看看渲染云所需要的资源，因为我们想要实现可以24小时动态变化的风格化云的光照效果，如果直接存储画好的贴图数量就会太大而且不方便调整，所以我们使用多层着色来实现这一点。&/p&&p&我们使用4个通道来表示云的光照及阴影：基础照明层，阴影1层，阴影2层，和边缘光层。通过为每个图层设置不同的颜色，我们就可以获得不同时刻的云的色彩方案。我们一共准备了8种形状不同的云的模板，用来构建各种不同的云海景观。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-7e7e49cee38f3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&929& data-rawheight=&574& class=&origin_image zh-lightbox-thumb& width=&929& data-original=&https://pic4.zhimg.com/v2-7e7e49cee38f3_r.jpg&&&/figure&&p&为了构建云海景观，我们使用了很多朝向屏幕发射云朵的粒子发射器，并且使用不同的云的模板以及发射模式来组合出不同的云海景观，我们实现了如各种类型的云海以及暴风雨天气等，这些预设都保存在天气配置中。此外我们还使用关键帧来定义天空背景和云彩的颜色。随着时间的流逝，云的色彩就根据关键帧来变化。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-5cfe2b7c667b7a8f898b9c8_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&959& data-rawheight=&566& class=&origin_image zh-lightbox-thumb& width=&959& data-original=&https://pic1.zhimg.com/v2-5cfe2b7c667b7a8f898b9c8_r.jpg&&&/figure&&p&在性能方面主要的开销是overdraw问题，如果我们按照固定控制的pattern来发射云虽然可以以最小的overdraw来获得较好的云海密度，但可能会看起来较为重复，加入产生位置的随机因素可以解决这个问题，但要想获得看起来不那么稀疏的云海效果就需要相比固定pattern更多的粒子数量，我们对于粒子发射配置都有细致的参数可以调整，以便在两者之间可以找到较好的权衡点。&/p&&p&这是一个24小时昼夜变化的云海景观：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a727a6688048dea7fe2b6286bab56aa0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic1.zhimg.com/v2-a727a6688048dea7fe2b6286bab56aa0_b.jpg& class=&content_image& width=&370&&&/figure&&p&这是暴风云闪电的场景：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b3979b16bee0ae1faedca_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic2.zhimg.com/v2-b3979b16bee0ae1faedca_b.jpg& class=&content_image& width=&370&&&/figure&&p&现在让我们来看看&b&游戏场景中使用的天气系统&/b&。&/p&&p&我们主要通过全局雾效，Skybox颜色和方向光的设置来改变场景的天气和氛围。对于雾效同样有许多参数可以调整。我们给雾效基于深度划分为远近距离两个区间，远近区间都可以设置不同的颜色和强度值来创造各种各样的气氛。Skybox也可以控制天空颜色渐变，云的受光及阴影颜色等。&/p&&p&综合上述调整选项，我们就可以创建晴天，雨天和大雾，多云和夜间等天气。&/p&&p&另外人物的光照也会受环境的影响，主要的光照颜色由方向光决定，局部区的阴影的变化比如角色走进阴影区域，由一些从关卡编辑器中手工放置的Lighting Volume定义。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-4e21b1e201c21f18e6815_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1015& data-rawheight=&587& class=&origin_image zh-lightbox-thumb& width=&1015& data-original=&https://pic2.zhimg.com/v2-4e21b1e201c21f18e6815_r.jpg&&&/figure&&p&让我们再来看看&b&游戏中使用景深的情况&/b&。&/p&&p&手游中使用景深一般并不常见，因为常见的景深实现对于移动平台来讲还是开销较大，我们主要在人物选择界面和任务简报会话中使用景深效果来突出表现人物。&/p&&p&由于这些场景不需要景深的过度，我们使用一种特殊的方法来提高移动性能。不使用depth buffer做COC混合，而是使用单独的相机直接绘制背景图层。在应用模糊通过后，通过将背景和前景人物组合在一起来获得最终图像。&/p&&p&为了得到更好的视觉效果，我们使用六边形采样模式来获得更好的bokeh形状。除此之外还有bokeh强度调整参数，以使其看起来更清晰，我们使用亮度值作为增量因子，2通常是一个合适的值。&/p&&p&性能方面为了保持性能的稳定，我们模糊背景的分辨率视模糊程度而定，更大的模糊尺寸使用更低的分辨率并且更不容易察觉，我们还使用Unity内置的曲线来描述它们之间的转换关系。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-bb9e925da71f65b2af080c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&993& data-rawheight=&630& class=&origin_image zh-lightbox-thumb& width=&993& data-original=&https://pic1.zhimg.com/v2-bb9e925da71f65b2af080c_r.jpg&&&/figure&&p&这短视频演示了动态调整模糊大小和焦散强度的结果。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-af5c2896b0bdc0ccfcaac978_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic1.zhimg.com/v2-af5c2896b0bdc0ccfcaac978_b.jpg& class=&content_image& width=&370&&&/figure&&p&在游戏场景中，&b&我们还实现了一个看起来挺酷的效果&/b&。&/p&&p&当给最后一个敌人致命一击的时候就会激发子弹时间，这时所有高速运动的物体都会慢下来，在下雨天我们就可以明确的看到雨滴的形状。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-81a0febff2edae239bad46c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic1.zhimg.com/v2-81a0febff2edae239bad46c_b.jpg& class=&content_image& width=&370&&&/figure&&p&为了实现这个效果，我们使用了4个代表雨滴不同速度下形态的关键帧，再根据时间快慢尺度对其进行垂直拉伸。在正常的时间尺度下，雨滴看起来像一条直线，在时间变慢的时候逐渐缩短变成雨滴形状。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f4b8bd26f5d9db51fe9d98c7b132a35e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1559& data-rawheight=&909& class=&origin_image zh-lightbox-thumb& width=&1559& data-original=&https://pic3.zhimg.com/v2-f4b8bd26f5d9db51fe9d98c7b132a35e_r.jpg&&&/figure&&p&在这里我们同样使用了动画曲线来控制拉伸，关键帧选择和时间快慢的关系，调整起来非常灵活方便。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-82a902d5fbf8e05ee7a9e699d2275a2e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&992& data-rawheight=&632& class=&origin_image zh-lightbox-thumb& width=&992& data-original=&https://pic3.zhimg.com/v2-82a902d5fbf8e05ee7a9e699d2275a2e_r.jpg&&&/figure&&p&刚才我们谈到的都是一些针对移动端优化的渲染功能，下面我们来介绍一下用于动画风格real-time CG或次世代游戏的渲染方法。&/p&&p&在过去的两年中，我们陆续制作了两个短片音乐视频，其中体现了&b&我们的新渲染风格&/b&。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-4f2beffdf1fd1a63cb8f5ecdfe58cdf1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic2.zhimg.com/v2-4f2beffdf1fd1a63cb8f5ecdfe58cdf1_b.jpg& class=&content_image& width=&370&&&/figure&&p&我们将它发布在了B站上，3天内获得了B站全站月榜排行第一的位置，至今已有超过300万的点击量。下面我们就来谈谈这些视频中应用到的一些实时渲染CG技术。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-8584baf8b11531bcebfee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&910& data-rawheight=&623& class=&origin_image zh-lightbox-thumb& width=&910& data-original=&https://pic3.zhimg.com/v2-8584baf8b11531bcebfee_r.jpg&&&/figure&&p&首先我们来看看&b&角色的渲染&/b&，我们的目标是实现完全动态的光照和阴影，所有材质都对各种光照现象做出正确的反应，包括主光源和区域环境光。这就要求我们不能使用任何在纹理上画死的光照表现。&/p&&p&用于角色渲染的主要特性有：多通道Ramp的材质shading方法，眼睛，头发和其他各向异性材料等特殊材料的处理，以及PCSS角色软阴影和高品质的勾线。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-daa34ecfb16c7b37d7cfc0cf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1006& data-rawheight=&603& class=&origin_image zh-lightbox-thumb& width=&1006& data-original=&https://pic4.zhimg.com/v2-daa34ecfb16c7b37d7cfc0cf_r.jpg&&&/figure&&p&首先我们来看一下&b&多通道Ramp的shading方法&/b&。我们希望角色的阴影和颜色的变化可以表现出更细腻的插画风格，所以我们使用2D ramp纹理来表示这些细微的变化，其中RGB通道分辨用于描述于不同阴影层的漫射阴影范围。&/p&&p&每个层都可以制定不同的颜色，这样就能在明暗变化中做到精细的色彩变化控制，对于卡通风格的画面，如果上色只是纯明暗变化，阴影处就会显得比较脏，缺乏表现力，而如果提升暗处的饱和度和色相变化，整体色彩看起来就会比较鲜活。而且通过调整垂直纹理采样坐标，我们可以实现动态的软硬风格转换。&/p&&p&从另一角度来看这种方法还间接表现了皮肤的次表面散射效果。这四幅图展示了多通道逐层上色叠加的效果。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-fc1f0feac04fd53e1be648_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1016& data-rawheight=&605& class=&origin_image zh-lightbox-thumb& width=&1016& data-original=&https://pic1.zhimg.com/v2-fc1f0feac04fd53e1be648_r.jpg&&&/figure&&p&大家可以看到通过一层层的上色叠加，皮肤层次细节会变得更加丰富。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-e74ace11cac024cb575dde_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1037& data-rawheight=&634& class=&origin_image zh-lightbox-thumb& width=&1037& data-original=&https://pic3.zhimg.com/v2-e74ace11cac024cb575dde_r.jpg&&&/figure&&p&上下两副图分别展示了采样不同位置的ramp texture所对应的渲染效果，不同的ramp可以获得各种不同的上色风格。使用hard ramp比较接近Cel-shading，soft ramp则是类似与插画柔和的阴影层次变化。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-c174a252dd8d2b386c7d91e19f8f1504_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&967& data-rawheight=&622& class=&origin_image zh-lightbox-thumb& width=&967& data-original=&https://pic1.zhimg.com/v2-c174a252dd8d2b386c7d91e19f8f1504_r.jpg&&&/figure&&p&由于我们使用了2D的ramp纹理，他们之间的变化是可以动态调整的，我们可以使用ramp mask纹理来选择每像素的ramp软硬以实现插画的手绘风格。这个ramp mask纹理可以由美术直接在模型上进行绘制，我们在unity下有一个3D paint工具，使用起来较为直观。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-bcbdc5a9e56c6c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&619& data-rawheight=&538& class=&origin_image zh-lightbox-thumb& width=&619& data-original=&https://pic1.zhimg.com/v2-bcbdc5a9e56c6c_r.jpg&&&/figure&&p&&b&插画风格渲染的另一个重要因素是使用纹理笔触。&/b&&/p&&p&我们可以使用不同的笔触纹理图案以获得不同的着色风格。对于每个笔刷纹理，我们有4个通道可以存储代表不同方向的笔刷图案，混合使用这些笔刷可以获得更丰富的笔刷变化。右边的两张对比图中，使用笔触纹理的有着更多手绘的感觉。&/p&&p&接下来让我们看看如何实现高质量的边缘光。&/p&&p&同样是基于菲涅尔方法，我们有参数来控制它，比如边缘宽度和平滑度，除了这些全局控制参数之外，我们也使用笔刷纹理来增加一些局部变化。&/p&&p&我们定义边缘光既可以来自于方向光源也可以来自于环境贴图，使用方向光我们可以按需求定义边缘光，使用环境贴图，我们可以根据环境光照来获得边缘光以显得更真实，两者都比较有用，可以结合使用。为避免边边缘光出现在不需要的区域，我们使用AO纹理和shadowmap来频闭掉遮挡区域。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-dbbed86f678aeb43d342d50_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&530& data-rawheight=&528& class=&origin_image zh-lightbox-thumb& width=&530& data-original=&https://pic1.zhimg.com/v2-dbbed86f678aeb43d342d50_r.jpg&&&/figure&&p&卡通风格对于面部一般不会有太多阴影层次的变化，如果我们直接套用之前的ramp方法应用在脸部，效果就会像右侧的图看起来一样不自然，为了改善这种情况我们使用顶点色的一个通道作为mask来控制脸部的上色层的强弱，通过压低漫反射表现来达到想要的卡通效果。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-ac33d17ac36b2afcb73708_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&972& data-rawheight=&551& class=&origin_image zh-lightbox-thumb& width=&972& data-original=&https://pic1.zhimg.com/v2-ac33d17ac36b2afcb73708_r.jpg&&&/figure&&p&接下来我们来说一下&b&高质量角色软阴影的实现&/b&。&/p&&p&如果我们直接使用unity内置的CSM阴影，在镜头靠近角色的时候阴影品质并不能满足需求，所以我们就为角色单独渲染了一张shadowmap，以确保恒定的阴影品质；为此我们还实现了基于视锥的shadowmap，根据角色的boundingbox和视锥求交集部分，以此作为渲染区域，就可以最大化阴影贴图的使用率，此外还使用了Variance shadow map以及PCSS来减少阴影瑕疵以及获得自然的软阴影效果。&/p&&p&另外，如果要实现正确的透明材质阴影，还需要额外的通道根据材质的透明度来存储阴影强度。我们可以从实例图片中看到半透明的裙子可以投射出自然的阴影。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f54da079fb85_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&985& data-rawheight=&619& class=&origin_image zh-lightbox-thumb& width=&985& data-original=&https://pic2.zhimg.com/v2-f54da079fb85_r.jpg&&&/figure&&p&眼睛的处理我们使用了基于物理的折射计算，普通卡通模型处理眼部的做法通常是把眼白留空，瞳孔凹陷下去，这样在侧面的时候也不会鼓出来显得比较自然，然而如果要做眼部近距离特写，这种做法看上去就不能令人信服。&/p&&p&使用真实折射算法，眼球本身还是按照球面来做，然后根据视线角度算出折射系数去偏移查找贴图对应点。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-7d4e39a00054febe628759e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&996& data-rawheight=&597& class=&origin_image zh-lightbox-thumb& width=&996& data-original=&https://pic3.zhimg.com/v2-7d4e39a00054febe628759e_r.jpg&&&/figure&&p&上述对比图显示了有无折射的实际效果，我们可以看到，如果没有折射效果，眼部侧面看上去较为奇怪。此外我们还加入了光线折射后的焦散光效果，使得眼睛的质感得到进一步增强。&/p&&p&对于非写实风格渲染，物理正确并不是要考虑的因素，由于卡通渲染的特殊情况，我们希望的焦散效果出现在入射光线的另一侧，并且入射角度越平行看起来越明显。&/p&&p&实现方法是通过入射光和眼球前向的夹角算出入射光强度，这里我们使用inverse diffuse来模拟，再辅助fresnel公式做亮度变化，最后乘上eye caustic纹理得到最终效果。通过对比图我们可以看到如果没有焦散效果眼睛就显得暗淡无光缺乏质感。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-6042fdfce20ae76c8cac9f97946ead1f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&963& data-rawheight=&577& class=&origin_image zh-lightbox-thumb& width=&963& data-original=&https://pic4.zhimg.com/v2-6042fdfce20ae76c8cac9f97946ead1f_r.jpg&&&/figure&&p&这段视频展示了眼睛的折射以及头发的各向异性高光效果。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-8c7e20a14c6d0bdf6129d5_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic2.zhimg.com/v2-8c7e20a14c6d0bdf6129d5_b.jpg& class=&content_image& width=&370&&&/figure&&p&接下来我们就来介绍一下&b&头发的渲染&/b&。&/p&&p&头发是卡通渲染角色较为重要且独特的部分。我们想要实现根据光源动态变化的高光和阴影渐变，并且这个实现还应具备直观的所见即所得的色彩调节能力。&/p&&p&和皮肤的材质一样，对于头发的漫反射渲染我们同样使用了multi-ramp的方法，而镜面反射高光我们则使用了两层高光做叠加，通过组合高低频的高光成分在一起我们可以得到满意的结果。&/p&&p&此外，我们还使用Glossy Map和AO纹理来进一步增强头发的质感。头发的高光渲染使用了各向异性高光，相比普通的高光使用normal计算光照，各项异性使用tangent作为计算基础，因此可以使高光显示出垂直于发丝方向的形状。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-fb4311291aaff0a1a0b50def_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1003& data-rawheight=&608& class=&origin_image zh-lightbox-thumb& width=&1003& data-original=&https://pic4.zhimg.com/v2-fb4311291aaff0a1a0b50def_r.jpg&&&/figure&&p&我们在制作头发模型的时候，如果模型拓扑较为复杂，uv展开较难做到全部垂直，我们也可以使用flowmap来梳理高光的形状。我们还使用Jittermap抖动贴图用来增强卡通渲染头发的质感。通过扰动切线方向来达到模拟发丝细节的高光效果。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-c4ff42cd9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&938& data-rawheight=&580& class=&origin_image zh-lightbox-thumb& width=&938& data-original=&https://pic2.zhimg.com/v2-c4ff42cd9_r.jpg&&&/figure&&p&另外，通过调整jitter map的uv scale还可以做到调整发丝的高光粗细。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-e0b1e12c5fa8dcdcc32b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&947& data-rawheight=&567& class=&origin_image zh-lightbox-thumb& width=&947& data-original=&https://pic4.zhimg.com/v2-e0b1e12c5fa8dcdcc32b_r.jpg&&&/figure&&p&这四张图分解展示了各个高光成分对渲染结果的影响。而右下角的则是最终的图像。我们可以看到，结合了低频和高频成分的高光显示，头发看起来更具表现力。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-13d67fdd4aa2e01c6fcfb8_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&989& data-rawheight=&615& class=&origin_image zh-lightbox-thumb& width=&989& data-original=&https://pic1.zhimg.com/v2-13d67fdd4aa2e01c6fcfb8_r.jpg&&&/figure&&p&接下来让我们看看&b&另外一种实现cel-shading头发高光的方案&/b&。&/p&&p&我们的目标同样是使其可以动态化，高光应根据光源和相机位置沿发丝方向移动，形状也应该在移动中有着动态的形态变化。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-36f381c85e54e3eb2476a0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic1.zhimg.com/v2-36f381c85e54e3eb2476a0_b.jpg& class=&content_image& width=&370&&&/figure&&p&Cel-shading风格的头发高光较为独特的形态，很难用传统的高光计算方法来描述。同样我们需要使用切线方向而不是法线来进行高光计算，并且需要更为特殊的方法去表现高光形状。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-d80da271b4af_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&977& data-rawheight=&566& class=&origin_image zh-lightbox-thumb& width=&977& data-original=&https://pic1.zhimg.com/v2-d80da271b4af_r.jpg&&&/figure&&p&首先，我们要把每缕头发模型在垂直方向进行uv展开，以便高光可以沿着每根发束移动。然后从将每一缕从左侧向右侧填充0到1，用来标识动态生成的高光形状的起始和结束位置，我们使用几个曲线定义的模板来描述头发高光的基本形状，然后使用抖动噪声纹理来调制头发高光的粗细变化。&/p&&p&材质方面有很多参数用来控制生成图案的形状，如位置，偏移，宽度，抖动比例等。通过调整这些参数，我们可以根据需要获得各种不同的形状。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-911414cda1fb84cce3a8b46_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&993& data-rawheight=&632& class=&origin_image zh-lightbox-thumb& width=&993& data-original=&https://pic3.zhimg.com/v2-911414cda1fb84cce3a8b46_r.jpg&&&/figure&&p&我们来看&b&另一种各向异性材质的例子：丝绸&/b&。&/p&&p&这次我们使用了副法线方向来计算了高光反射，并使用三个高光层合成在一起获得最终的渲染效果，我们为每一层分别设置不同的颜色，以便最终材质看起来色彩层次较为丰富。&/p&&p&我们的角色材质中还包括其他特殊的材质，如水晶和纱巾等半透明材质，直接使用alpha混合不能表现出应有的质感，这就需要我们实现折射和模糊效果。这两个效果都依赖于Unity的command buffer。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a62c5bced637af_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1049& data-rawheight=&618& class=&origin_image zh-lightbox-thumb& width=&1049& data-original=&https://pic4.zhimg.com/v2-a62c5bced637af_r.jpg&&&/figure&&p&实现折射效果时，Command buffer在渲染折射前获取已经渲染好的backbuffer作为背景，用于折射采样，rgb通道设置不同折射系数，分别采样三次来模拟色散效果。&/p&&p&对于模糊效果，则是用Command buffer将backbuffer降采样并做模糊，生成4张尺寸依次减半模糊度递增的RenderTexture，然后根据相机距离和FOV以及材质固有的模糊参数，确定模糊程度，选择对应的RenderTexture来完成模糊效果。&/p&&p&我们还对这两者的实现做了一定的优化，不对直接对backbuffer使用全屏模糊，把物体本身作为proxy mesh，只处理需要画的部分。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-7de176f15d56db8830438_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1014& data-rawheight=&646& class=&origin_image zh-lightbox-thumb& width=&1014& data-original=&https://pic1.zhimg.com/v2-7de176f15d56db8830438_r.jpg&&&/figure&&p&接下来让我们来谈谈&b&高品质勾线的方法&/b&。&/p&&p&对于角色和动态物体我们使用backface勾线方法，并使用顶点色对勾线的宽度进行控制，勾线本身需要连续的顶点法线才能在锐角边不会出现断层，因此我们将平滑过的法线存储在另一套顶点色里，此外，我们也使用顶点色来控制勾线宽度。&/p&&p&比如，发尖处勾线会逐渐变细，我们通过在顶点颜色填充渐变为0的值以使线条宽度逐渐过渡到零，另外，根据相机与物体之间的距离，还应有基于距离修正的勾线宽度。每种材质上也应该有对应的不同勾线颜色，所有这些功能都是高品质的勾线所必需的。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-69daebc46e6bd6124c6eaf1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&997& data-rawheight=&599& class=&origin_image zh-lightbox-thumb& width=&997& data-original=&https://pic2.zhimg.com/v2-69daebc46e6bd6124c6eaf1_r.jpg&&&/figure&&p&Backface勾线方法虽然可以做到较为细致的勾线还原。但他也有着自身的固有缺陷，那就是不能在非边缘的尖锐折线处产生勾线。而这些折线在硬表面模型上是很常见。&/p&&p&为了解决这个问题，我们添加一个预处理过程来提取这些边缘，并将它们保存到额外的mesh资源中，并使用geometry shader绘制它们。&/p&&p&对于这些折线我们使用了和backface法类似的调整参数，从而使它们看起来完全相同。增加了折线的绘制之后，我们可以看到右侧的图片捕获到了更多的勾线细节。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-84f508bc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&965& data-rawheight=&603& class=&origin_image zh-lightbox-thumb& width=&965& data-original=&https://pic2.zhimg.com/v2-84f508bc_r.jpg&&&/figure&&p&勾线另一种常见方法就是在图像空间中生成轮廓线。通过检测场景图像中normal和depth的不连续性，我们可以获得细节较为丰富的勾线。无论场景的复杂性如何，这种方法的性能都是恒定的，我们还添加了对勾线颜色的色相，明度，饱和度的调整，使勾线更为自然。&/p&&p&这种方法的缺点则是较难控制勾线的宽度，如果我们想实现距离相关的线宽，我们只能在几个像素的范围内调整它。因此基于图像的方法主要适用于场景轮廓渲染，对于靠近摄像头很近的物体，我们最好使用backface的方法。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-d6b7c95f9739deac952d33de066e70af_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1026& data-rawheight=&647& class=&origin_image zh-lightbox-thumb& width=&1026& data-original=&https://pic4.zhimg.com/v2-d6b7c95f9739deac952d33de066e70af_r.jpg&&&/figure&&p&最后一种做法是基于笔刷的购线方法，这在离线渲染中使用的比较多，通常分为以下几步：&/p&&p&1.轮廓线提取：从Mesh上提取轮廓边，主要分为Sharp Edge和Smooth Edge两种。&/p&&p&2.连接轮廓线：根据模型的拓补关系，将相邻的轮廓边连接成尽可能长的轮廓线。&/p&&p&3.轮廓线分段：在步骤2的基础上，根据轮廓线上曲率和可见性的变化，将轮廓线在曲率或可见性的突变处分开：&/p&&p&4.笔触映射：将想要添加的笔触制作成纹理，根据对应的纹理坐标映射到步骤3的轮廓线上。&/p&&p&这种方法可以达到更为风格化，笔触更明显的勾线方式，pencil+ blender里freestyle render基本都是采用类似的方法，性能开销较大，可以用于CG品质渲染，但不适合直接在游戏中使用。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b8a5ec8f9f0b66d15e2ce667a998fe48_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&909& data-rawheight=&627& class=&origin_image zh-lightbox-thumb& width=&909& data-original=&https://pic1.zhimg.com/v2-b8a5ec8f9f0b66d15e2ce667a998fe48_r.jpg&&&/figure&&p&接下来我们来看看&b&其他特殊效果的实现&/b&，这些渲染效果在场景刻画中同样起到重要的作用。&/p&&p&这是一段用来展示体积光的场景。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-33edcc19f00978bd3edf4d82e11d560d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic2.zhimg.com/v2-33edcc19f00978bd3edf4d82e11d560d_b.jpg& class=&content_image& width=&370&&&/figure&&p&我们可以看到，具有雾效的体积光配合bloom一起使用，场景表现出了较强层次和氛围感。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-30adc2735_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1014& data-rawheight=&618& class=&origin_image zh-lightbox-thumb& width=&1014& data-original=&https://pic2.zhimg.com/v2-30adc2735_r.jpg&&&/figure&&p&下面就来看看&b&体积光的实现细节&/b&。&/p&&p&我们使用unity内置的曲线来体积光的形状，这在运行时也方便调整形状，强度参数变化同样由曲线定义。为了进一步模拟烟雾效果，我们还使用3D noise纹理来模拟动态烟雾流动的效果。noise烟雾本身也有一些参数可调，比如粒度大小，尺寸比例，噪声强度，流动速度等。&/p&&p&此外，配合cookie map还可以自定义体积光投影形状，使用cookie map后同时也引入了高频的变化成分，这就需要对应增加采样数来减少走样，使用抖动算法可以减少采样不足导致的走样，我们实现了两种抖动方式：bayer pattern和blue noise， 通过实验发现blue noise配合Temporal AA可以在较低的采样数下实现较好的体积光效果。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-2d5ffd16a5b126a717d31_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&959& data-rawheight=&598& class=&origin_image zh-lightbox-thumb& width=&959& data-original=&https://pic2.zhimg.com/v2-2d5ffd16a5b126a717d31_r.jpg&&&/figure&&p&接下来我们来看一下使用Real-time GI的例子。&/p&&p&在这个简单的演示场景中，我们使用enlighten来烘焙Real-time GI的Lightmap，然后使用动态自发光材质和体积光作为光源。我们使用AVpro插件解码视频文件，将其设置在自发光纹理上，并设置强度值为1以上。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-26b6d2cf5cdecb92f1f830e97d7a04ee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic3.zhimg.com/v2-26b6d2cf5cdecb92f1f830e97d7a04ee_b.jpg& class=&content_image& width=&370&&&/figure&&p&我们就可以获得一个动态且明亮的面积光源，同时要记得更新GICache，以便在运行时刻可以动态更新光照环境。当与动态体积光一起使用时，整体的照明效果看起来令人印象深刻。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f5da1fcd6c6ddd199da3aa_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1034& data-rawheight=&603& class=&origin_image zh-lightbox-thumb& width=&1034& data-original=&https://pic3.zhimg.com/v2-f5da1fcd6c6ddd199da3aa_r.jpg&&&/figure&&p&对于角色上的动态AO实现，我们使用修改过的HBAO，用于指定AO区域中颜色的饱和度和色调调整，以使加入AO后的图像颜色看起来不会变脏，通过对比图我们可以看出，在应用了AO之后，右图比左图层次感更强。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-152f81a2e988b4b10f901_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&973& data-rawheight=&548& class=&origin_image zh-lightbox-thumb& width=&973& data-original=&https://pic2.zhimg.com/v2-152f81a2e988b4b10f901_r.jpg&&&/figure&&p&我们还重新实现了适用于卡通渲染的&b&基于图像的眩光效果&/b&，用于模拟镜头产生的鬼影和星形散射效果。这里使用与bloom类似的方式提取的高光区域作为输入，然后进行多次不同方向上的卷积并应用色彩调制来获得最终结果。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-f5a9f4eb25fe8d925b558_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&989& data-rawheight=&614& class=&origin_image zh-lightbox-thumb& width=&989& data-original=&https://pic1.zhimg.com/v2-f5a9f4eb25fe8d925b558_r.jpg&&&/figure&&p&下面我们来看几张CG视频中的截图和特写。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ea9aaea5ba_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1016& data-rawheight=&634& class=&origin_image zh-lightbox-thumb& width=&1016& data-original=&https://pic3.zhimg.com/v2-ea9aaea5ba_r.jpg&&&/figure&&p&这是另一组场景截图。我们可以看到在应用了之前提到的这些渲染技术之后，整个场景可以更接近离线渲染的品质。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a8fbd1bffa5f90bef9e73b28a021502b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1009& data-rawheight=&613& class=&origin_image zh-lightbox-thumb& width=&1009& data-original=&https://pic4.zhimg.com/v2-a8fbd1bffa5f90bef9e73b28a021502b_r.jpg&&&/figure&&p&这幅图描述了上述场景中所应用到的主要渲染特性。从图中我们可以看到这些效果包括：风格化的PBR材质，卡通风格的AO，屏幕空间勾线，屏幕空间反射，以及曲面细分等。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-cbf16b5e6894079efad48e170adfd8a4_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1021& data-rawheight=&629& class=&origin_image zh-lightbox-thumb& width=&1021& data-original=&https://pic1.zhimg.com/v2-cbf16b5e6894079efad48e170adfd8a4_r.jpg&&&/figure&&p&综合应用这些效果对于高品质的动画风格场景渲染起着重要的作用，我们的目标是在PBR的shading基础上加入风格化的调整使其更具有表现力。&/p&&p&场景中的大部分材质都是基于物理的渲染。我们对PBR纹理集进行了一些风格化上的适应调整，比如对于色彩的卡通化调整，以及对于物体材质细节的强调或省略。再结合使用图像空间的勾线来强调物体边缘，整体场景的表现就显得更接近动画风格。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-44b79ff33f04f13ab73c7b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1011& data-rawheight=&609& class=&origin_image zh-lightbox-thumb& width=&1011& data-original=&https://pic4.zhimg.com/v2-44b79ff33f04f13ab73c7b_r.jpg&&&/figure&&p&这里是一段演示视频，展示了这些材质在不同光照角度下的光影变化：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-1dc2baab31cbadae0d0b03ea0a1d1718_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic1.zhimg.com/v2-1dc2baab31cbadae0d0b03ea0a1d1718_b.jpg& class=&content_image& width=&370&&&/figure&&p&这是另一段视频展示了光影的变化：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-f0a9eadf54abf0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic1.zhimg.com/v2-f0a9eadf54abf0_b.jpg& class=&content_image& width=&370&&&/figure&&p&除了场景渲染之外，我们再来看看其他一些&b&动画渲染所涉及的内容，动画表情。&/b&&/p&&p&我们使用blendshape来制作面部表情。眼睛，嘴巴和眉毛的表情独立为不同的部件单独制作，然后通过我们的自定义面部表情插件，来实现表情动画的及语音嘴型的自动映射。此外，我们还可以通过预定义不同的表情集合来在交互应用中驱动面部表情。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-269ffdba6ca4a75d038f43_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1055& data-rawheight=&663& class=&origin_image zh-lightbox-thumb& width=&1055& data-original=&https://pic4.zhimg.com/v2-269ffdba6ca4a75d038f43_r.jpg&&&/figure&&p&在Unity中&b&使用humanoid作为动画导入方式的时候&/b&，如果关节处旋转角度较大，按照动画品质的要求关节处的形状就不能令人满意。&/p&&p&为此，我们通过在建模软件中建立了每关节修正的blendshape导入到Unity当中来防止关节变形。我们使用一个自动控制脚本根据关节旋转角度来差值混合形状。为了确保更好的结果，我们为每个关节分别制作了两个blendshaoe，一个用于90度，另一个用于140度以补正关节变形。&/p&&p&另外一种方法还可以使用额外的骨骼进行关节修正，这种方法更容易制作，但是对于结构细节的表现不如使用blendshape。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-7eb4bec5abfde3586b8f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1040& data-rawheight=&667& class=&origin_image zh-lightbox-thumb& width=&1040& data-original=&https://pic4.zhimg.com/v2-7eb4bec5abfde3586b8f_r.jpg&&&/figure&&p&为了可以&b&表现更复杂的场景动态&/b&，比如流体和破碎的场景，我们可以使用alembic格式，或者用EXR纹理作为载体从Houdini或其他DCC工具导入顶点动画资源。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-c7d04469bfc325d36f065_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&370& data-rawheight=&209& data-thumbnail=&https://pic2.zhimg.com/v2-c7d04469bfc325d36f065_b.jpg& class=&content_image& width=&370&&&/figure&&p&Houdini对EXR纹理格式导出顶点动画提供了很好的转换支持，对于real-time的应用而言，顶点动画纹理在因为是在GPU上运行，运行效率及加载速度要快于alembic格式。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-d30fa01767a7fab59b8fea_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1041& data-rawheight=&671& class=&origin_image zh-lightbox-thumb& width=&1041& data-original=&https://pic3.zhimg.com/v2-d30fa01767a7fab59b8fea_r.jpg&&&/figure&&p&最后，我们来谈谈实时卡通渲染在今后可以继续改进和完善的地方。&/p&&p&第一点是实现所有类型材质完全可定制的风格化渲染，目前我们初步在人物皮肤和服装渲染中的应用了笔刷以获得笔触效果，下一步我们希望将其扩展到整个场景的渲染，比如新海诚式的场景风格，以呈现有着独特且统一的风格化动画风格渲染。&/p&&p&另外一点，是要进一步提高模型的渲染精度，我们希望可以实时呈现CG级的模型精度。可以尝试使用geometry shader或预烘培displacement map进行动态自适应的曲面细分，相比直接导入原始高模，它可以极大减少资源导入的开销和提升运行效率。最后是优化整套流程解决方案，使之更易于实时调整和编辑，进一步提升运行效率以适合在游戏中使用。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-59f4b67e638f26b86cdbb6bf484b3b7d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&950& data-rawheight=&603& class=&origin_image zh-lightbox-thumb& width=&950& data-original=&https://pic2.zhimg.com/v2-59f4b67e638f26b86cdbb6bf484b3b7d_r.jpg&&&/figure&&p&好的，以上就是我们今天有关于卡通渲染要分享的主要内容，谢谢大家。&/p&&p&附采访内容：&/p&&p&&b&你认为卡通渲染的要点是什么？&/b&&/p&&p&&b&贺甲：&/b&做卡通渲染的话，在原画阶段把想要的效果画出来，然后从原画提供设计概念阶段，进入下一步从技术角度实现这些，我们会有不同的尝试。因为毕竟作为原画角度，可以比较随意的达到所要的效果，从3D角度还原有诸多限制，有些并且不能纯从技术解决角度。我们主要从表现出发，无论用什么样的方式，尽可能逼近手绘的感觉，来完成卡通渲染的效果。&/p&&p&卡通渲染主要特性：第一，角色。色彩相对于写实方面一些风格化的调整。另外，对于角色渲染阴影的形状，也是有比较细致的考究还原；&/p&&p&第二，对于角色的造型，也相对与写实二次元的加工，比如说头发，写实的话就是比较碎，不太讲究曲线造型感。但是卡通渲染对头发、身材比例、形态都是有非常考究的追求。所以，我们在建模的时候，也会相当注意这点。&/p&&p&第三，渲染的时候，因为突出了一些东西，简化了一些元素，突出表现的这些东西，要重点极致的把这些以手绘的风格还原出来。这也是我们卡通渲染重点追求的部分。&/p&&p&&b&在游戏中实际运用需要注意哪些方面？&/b&&/p&&p&&b&贺甲：&/b&做渲染MV，或者渲染卡通CG的话，基本上需要关注的点是如何把画面做到极致，可以不惜一切代价，把画面做到最好。如果做游戏的话，要权衡各方面的因素。特别是在移动平台，跑的足够快，要考虑到续航等其他因素，所以游戏方面肯定挑战最大，要在画面与性能之间作出比较好的平衡。&/p&&p&&b&如果国内团队希望学习卡通渲染的技术，你会给出什么建议？&/b&&/p&&p&&b&贺甲：&/b&首先要做卡通渲染，团队要对卡通渲染、二次元方面比较感兴趣，只要有兴趣，才能把握住玩家所需要的点，而且才有兴趣做好。&/p&&p&其次，除了这方面，要在技术做到比较好的实现，要大量查阅国内国外比较主流的实现，按照自己的需求都能实现出来。但是这只是完成预演与项目Demo阶段，真正产品化做出来之后，更多需要整体的控制项目管理能力，如果忽视了这一点的话，可能只能停留在Demo阶段，作为一个完整的项目做出来的话，其他方面综合都是非常重要。&/p&
《崩坏3》的成功业内有目共睹，这款产品不仅在二次元领域收到诸多玩家的热衷，在手游产品技术上，它也实现了诸多突破，比如在手游的高品质卡通渲染领域，《崩坏3》的确做到了国内顶尖水准。在去年的Unite开发者大会中，米哈游技术总监贺甲分享了他们在PC端…
这里首先姑且理解情侣是指一男一女。&br&&br&通常&b&女生&/b&对桌游的要求会比较高，所以适合情侣玩的桌游要适合女生。&br&那么女生主要喜欢玩什么样的桌游？答案是：&br&①&b&规则不复杂，文字量小&/b&。每张牌都有不同功能的那种一看就不想玩了。&br&②&b&一局的时间要短&/b&。本来桌游于情侣就是一种前戏，一局玩完就第二天早上了肯定不行。&br&③&b&随机性要大&/b&。如果把把都是男生赢，女生很快就不想玩了。&br&④&b&美工要好&/b&。颜色比较艳丽，画风最好小清新，看起来就赏心悦目。&br&基于以上要求和本人多年的经验，墙裂推荐以下几款&b&把妹神器&/b&：&br&&br&&b&&u&No.5.斋普尔（Jaipur）&/u&&/b&&br&&figure&&img src=&https://pic4.zhimg.com/50/3eedf44cfed2e08d1143edd204d48aa9_b.jpg& data-rawwidth=&260& data-rawheight=&500& class=&content_image& width=&260&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/c41bb8e9f7893a3e6fbe_b.jpg& data-rawwidth=&500& data-rawheight=&333& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/50/c41bb8e9f7893a3e6fbe_r.jpg&&&/figure&这是一款以集市卖货物为主题的桌游。卡牌由各种颜色的货物和骆驼组成。公共牌堆有 5 张牌，每回合轮到你可以选择拿取货物或者出售货物。拿取货物有 3 种方式：①拿取 1 张货物；②拿取所有的骆驼；③用手中的货物和骆驼一次性换取多张货物。出售货物时，挑选手中一种颜色的货物全部出售，并获得分数。&br&这个游戏的矛盾在于，货物出售得越早越值钱，但一次性出售 3 张以上的货物又有额外的奖励，所以到底是赶紧出售还是攒着一起出售需要权衡。另外在拿取货物时，还要时刻注意卡对手可能需要的颜色的货物。那种撕逼的程度没玩过之前真的很难体会。&br&&br&&b&&u&No.4.步步为营（Quoridor）&/u&&/b&&br&&figure&&img src=&https://pic2.zhimg.com/50/73d7d4ca9b5f6f8ded16_b.jpg& data-rawwidth=&500& data-rawheight=&496& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/50/73d7d4ca9b5f6f8ded16_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/7f0faf77a02cc111cfbc9_b.jpg& data-rawwidth=&500& data-rawheight=&375& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/50/7f0faf77a02cc111cfbc9_r.jpg&&&/figure&这款游戏我一直管他叫「蛋疼棋」，因为下起来真的很蛋疼！游戏规则很简单，你有一个小人和 10 块木板。小人一开始在底线，轮到你时，你可以选择走一步小人，或者放一块木板，谁的小人先走到对方的底线谁就赢了。&br&放木板时，你不能把对方小人通向底线的路全部堵死。所以很多时候胜败就在一念之间，一块板放下去，可能先前你摆的想堵住对方小人的木板就都变成堵你自己的了……&br&当然其实所有棋类都比较适合情侣玩，传统棋类中，最受女生欢迎的可能是五子棋和黑白棋。&br&&br&&b&&u&No.3.口袋版开膛手杰克（Mr. Jack Pocket）&/u&&/b&&br&&figure&&img src=&https://pic2.zhimg.com/50/72ccc79d1e3b7ca68a53c7e628a2f4b4_b.jpg& data-rawwidth=&500& data-rawheight=&489& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/50/72ccc79d1e3b7ca68a53c7e628a2f4b4_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/cd805c77d580edfe54ccca3d1d9ad2b7_b.jpg& data-rawwidth=&500& data-rawheight=&375& class=&origin_image zh-lig}