上一行右方有玄机。
上一行右方有玄机。
上图喽～&br&&img src=&/a20fe575ab0fac56dd9c53_b.jpg& data-rawwidth=&553& data-rawheight=&419& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&/a20fe575ab0fac56dd9c53_r.jpg&&&br&这是这十几天写的soft pipeline渲染的立方体&br&&img src=&/6dbdb206d6d351d591c82b96c4d98a10_b.jpg& data-rawwidth=&498& data-rawheight=&395& class=&origin_image zh-lightbox-thumb& width=&498& data-original=&/6dbdb206d6d351d591c82b96c4d98a10_r.jpg&&黑色三角形是鼠标点选效果，嗯，精确度高高?～&br&&img src=&/ef0b56f91b16e4f7db88e_b.jpg& data-rawwidth=&566& data-rawheight=&445& class=&origin_image zh-lightbox-thumb& width=&566& data-original=&/ef0b56f91b16e4f7db88e_r.jpg&&左面三角形使用透视纹理映射，右面的是线性映射，还是左面的给力啊（尼玛，计算量翻了好几倍啊～！）&br&为了感谢大家的谬赞，来～小的们，把新出炉的干货给各位兄台抬上来～&br&（1）&a href=&///?target=http%3A//blog.csdn.net/popy007/article/category/640562& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&blog.csdn.net/popy007/a&/span&&span class=&invisible&&rticle/category/640562&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&
这大牛把几个关键的矩阵用初中生都能看懂的数学知识给推！！倒！！了！！受益良多啊。唯一的一点点小遗憾是没有把CVV裁剪介绍一下，导致在顶点乘以透视矩阵后，进行投影操作之前出现了一段真空期，下面提到的《计算机图形学（opengl版）》说明了这个问题。但是大牛的光环还是那么耀眼！&br&（2）目前我看到的介绍流水线的资料中，在推导摄像机矩阵时，基本上没有提到一个很重要的线性代数上的基本概念，如下：&br&
world coordinate
是世界坐标系
&br&&p&　　coordinate frame 是局部坐标系 也叫坐标架 类似于物体坐标系，或者摄像机坐标。&/p&&p&　
第一部分：这里用到得一个线性代数里的概念 叫做
过度矩阵： 从一个坐标基 到 另个一坐标基之间有一个过度矩阵
如 从坐标基A到坐标基B
有个过度矩阵C
则有 A*C ＝ B 。如果有一个向量在世界坐标系下的坐标为a，有两在世界坐标系下的坐标基（coordinate frame）A和B，且从A到B的过度矩阵为C，a在A和B两个坐标基下的坐标是a‘和b‘。那么有&/p&&p&a ＝ A*a‘ ＝ B*b‘
由 A*C＝B 带入得
A*a‘ ＝ B*b‘＝A*C *b‘
其中 A为可逆矩阵 有 a‘ ＝ C*b‘。这样就得到了两个在不同坐标基，且由A可逆还可知C ＝ B＊（A－1）。（A-1）时A矩阵的逆。&/p&&p&&a href=&///?target=http%3A///BlackWalnut/articles/4194956.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/BlackWalnut&/span&&span class=&invisible&&/articles/4194956.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&
第二部分在上面的链接里，由于公式编辑不下来，看着太疼了。&/p&&p&
上面数学知识的重要性在于，给定任意一个向量可以快速构建一个坐标系。。。。。。用途有多广？！？！？！你把它用在物体绕任意轴旋转上试试，你把它用在摄像机坐标系推导上试试，你把它用在求射线和三角形焦点上试试（搜搜这个吧《Fast Minimum Storage Ray Triangle Intersection》），你把它用在normal map上试试（据说可以，我回头看看，嘻嘻～），当然，你要是发现其他用途也私信一下我，嘿嘿。&/p&&p&要不是考研！！这个定理我踏马也发现不了啊！！线性代数老师压根就没有提过！！话说那天我懒洋洋的看着数二数三不考，数一要考的线性代数部分，看到这个定理后，突然感觉比雷劈轻，比电击爽的一丝电流在大脑里蔓延。。。。。。我靠～我找的你好苦啊！！！&/p&&p&
得了～就这么多吧，今天刚把xcode上的和glsl相关的代码写完，明天开始研究光照，随后更新光照部分，手头已经有两本书了，不过学习思路还是不太明朗。回头聊～&/p&&br& -----------------------------------这东西真叫分割线？？？------------------------------------------&br&谢（没人）邀。。。。。&br&学3D开发也有两三年了，弯路走了不少就当给大家提个醒吧。&br&3D图形学刚开始学的时候最难的部分其实是渲染流水线，要搞清楚流水线每一步做了什么，用到了那些矩阵，以及矩阵背后的数学原理还真是要了亲命。折腾了死去活来好久以后，发现好书就那么几本：&br&1.《3D数学基础：图形与游戏开发》
这个可以当参考手册使用&br&2.《3D游戏编程大师技巧》
很多人说它过时了，但是让你徒手写个流水线，我还没有发现比这本代码更完整，系统的书。不过这本书的缺点是，透视变换和投影变换完全是乱七八糟的一大坨坨!下面这本书就好很多。&br&3.《计算机图形学（opengl版）》第三版
最近才发现的，目前中文网站上所有关于3D流水线叙述比较热门的博客，帖子基本上都能从这本书上找到出处，很系统，也基本完整，概念，术语，图例等等也比较到位，有些不太清楚的地方可以上网查查，基本上没有什么太大的遗漏。&br&4.红宝书&br&以下所有前提都要求你明白简单的线性代数运算，比如向量和矩阵的左右乘法，矩阵转置，正交矩阵的逆矩阵等于其转置矩阵等等。&br&如果你不知道3D是啥，建议从红宝书开始。&br&如果对3D有一定了解，会一点opengl，建议从《计算机图形学（opengl版）》开始，跟着徒手写一个渲染流水出来，写的过程中，《计算机图形学（opengl版）》里面有数学原理的介绍不太完整的，查查《3D数学基础：图形与游戏开发》相关章节，不知道具体数据结构怎么设计的，查查《3D游戏编程大师技巧》。&br&这个阶段，如果最后能写出来一个软的光栅化流水线，渲染出来线框就算成功。这是我的学习过程，可能对于不同的人，学习过程不太相同，但是，3D渲染流水线上关于几何变换的东西，这三本书都包含的差不多了。&br&关于光照部分，我这个寒假想研究一下，主要是shader的使用，已经有几本资料了，我看看了再来更新吧。&br&好吧。。。。。我回答这个问题的原因是有没有人能帮我回答一下&br&&a href=&/question/& class=&internal&&点经过透视矩阵变化后得到齐次坐标，经行裁剪时w分量的含义？ - 数学&/a&&br&这个问题啊！！！急死人了都！！很多资料都“巧妙”（还是我傻傻的没有看见）避开了这个问题！！！三天了！！代码改了十几次！！！猜的，蒙的，算的都试了个遍！！流水线就差这一小步！！还让不让人开心的写代码了！！！快摔啤酒瓶了都！！！&br&----------------------------------------------------他们管这东西叫分割线---------------------------------------------------&br&那个问题解决了，是我的疏忽，给大家带来了麻烦，很抱歉。答案我就写在那个问题下面了。
啊哈哈～ 上图喽～ 这是这十几天写的soft pipeline渲染的立方体 黑色三角形是鼠标点选效果，嗯，精确度高高?～ 左面三角形使用透视纹理映射，右面的是线性映射，还是左面的给力啊（尼玛，计算量翻了好几倍啊～！） 为了感谢大家的谬赞，来～小的们，把新…
&p&看题主问的是GUILTY GEAR Xrd REVELATOR里的卡通渲染金属高光的实现方法, 那就拿图形分析工具截了一帧PC版本的画面进行分析&/p&&img src=&/v2-790db87fe56a912b33dedb7_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-790db87fe56a912b33dedb7_r.jpg&&&p&没有找到很典型的金属模型, 只好拿potemkin手上的装备来当例子了&/p&&br&&img src=&/v2-72ffc85bcbc_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-72ffc85bcbc_r.jpg&&&p&这个装备使用的材质贴图主要有三张:&/p&&img src=&/v2-b63eeaf96bbd004f0b20865_b.jpg& data-rawwidth=&512& data-rawheight=&512& class=&origin_image zh-lightbox-thumb& width=&512& data-original=&/v2-b63eeaf96bbd004f0b20865_r.jpg&&&p&前两张除了颜色没什么差别&/p&&img src=&/v2-70d3bdabbdfbf_b.jpg& data-rawwidth=&512& data-rawheight=&512& class=&origin_image zh-lightbox-thumb& width=&512& data-original=&/v2-70d3bdabbdfbf_r.jpg&&&p&贴到模型上看看效果, 应该是BaseColor&/p&&img src=&/v2-82a293dc052b2a5b146cab_b.png& data-rawwidth=&896& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&896& data-original=&/v2-82a293dc052b2a5b146cab_r.png&&&p&第三张最为复杂, 包含了4个通道, 应该就是各种Mask了&/p&&img src=&/v2-7be3c730f600a3462d56_b.jpg& data-rawwidth=&1024& data-rawheight=&1024& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/v2-7be3c730f600a3462d56_r.jpg&&&p&分别把各通道对应到模型看看:&/p&&p&R通道, 估计是海带高光这种大范围出现的区域&/p&&img src=&/v2-083dbe4dc29ae56af50950_b.png& data-rawwidth=&896& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&896& data-original=&/v2-083dbe4dc29ae56af50950_r.png&&&p&G通道在这个模型上没有作用&/p&&p&A通道显然是卡通渲染中的描边区域, 有粗细的变化比程序计算出来的效果好得多&/p&&img src=&/v2-3db00ea150bb841e25c70_b.png& data-rawwidth=&896& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&896& data-original=&/v2-3db00ea150bb841e25c70_r.png&&&p&最后是B通道, 这就是题主要问的&UV边缘&了.&/p&&img src=&/v2-1cc0fae6533b06ace4a2f9c4e84be4b6_b.png& data-rawwidth=&896& data-rawheight=&896& class=&origin_image zh-lightbox-thumb& width=&896& data-original=&/v2-1cc0fae6533b06ace4a2f9c4e84be4b6_r.png&&&br&&img src=&/v2-fe274a587d_b.png& data-rawwidth=&1024& data-rawheight=&1024& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/v2-fe274a587d_r.png&&&p&通过对比UV的分布和最终画面的渲染效果, 可以看出边缘高光出现的区域和形状都是受这个B通道控制的. &/p&&img src=&/v2-6162edf0adefce5fdda3e_b.png& data-rawwidth=&410& data-rawheight=&354& class=&content_image& width=&410&&&p&那么结论就是, Shader里并不存在所谓的&边缘&, 高光该怎么算就怎么算, 最后跟MASK贴图中的边缘高光通道混合一下就行了. 这个效果难度不在于程序部分, 而在于这种模型的UV/贴图的制作方法. &/p&
看题主问的是GUILTY GEAR Xrd REVELATOR里的卡通渲染金属高光的实现方法, 那就拿图形分析工具截了一帧PC版本的画面进行分析没有找到很典型的金属模型, 只好拿potemkin手上的装备来当例子了 这个装备使用的材质贴图主要有三张:前两张除了颜色没什么差别贴到…
这个问题是&a href=&///?target=http%3A//en.wikipedia.org/wiki/Point_in_polygon& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Point in polygon&i class=&icon-external&&&/i&&/a&测试[1]。&br&&br&其中一个方法是计算射线与多边形边界相交的次数。&br&&img src=&/34ff7da1831cce97eb269dfb_b.jpg& data-rawwidth=&306& data-rawheight=&138& class=&content_image& width=&306&&任一射线穿过多边形，奇数段位于多边形之内，偶数段位于多边形之外。&br&&br&&img src=&/c19bb969_b.jpg& data-rawwidth=&300& data-rawheight=&219& class=&content_image& width=&300&&&br&检查一点是否在多边形之内，可以作一射线从该点往任意方向投射，若让射线与多边形边的相交次数为奇，则点位于多边形之内。为了简化计算，一般会往水平或垂直方向投射。另外要考虑边与射线平行及顶点与射线相交的情况，题目中的实现不正确。&br&&br&另一个方法使用winding number [2]，可避免除数，也更准确。请参考&a href=&///?target=http%3A///a03-_inclusion.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Inclusion of a Point in a Polygon&i class=&icon-external&&&/i&&/a&。&br&&br&参考文献&br&&br&[1] Shimrat, Moshe. &Algorithm 112: position of point relative to polygon.&&i&Communications of the ACM&/i& 5.8 (1962): 434.&br&[2] Hormann, Kai, and Alexander Agathos. &The point in polygon problem for arbitrary polygons.& &i&Computational Geometry&/i& 20.3 (2001): 131-144. &a href=&///?target=http%3A//www.inf.usi.ch/hormann/papers/Hormann.2001.TPI.pdf& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&inf.usi.ch/hormann/pape&/span&&span class=&invisible&&rs/Hormann.2001.TPI.pdf&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
这个问题是测试[1]。 其中一个方法是计算射线与多边形边界相交的次数。 任一射线穿过多边形，奇数段位于多边形之内，偶数段位于多边形之外。 检查一点是否在多边形之内，可以作一射线从该点往任意方向投射，若让射线与多边形边的相交次数为…
xLua的作者，关注这帖子一阵子了，一直犹豫作为作者回答这问题会不会有卖瓜之嫌。&br&回下大家关注的热补丁的overhead。&br&热补丁的基本原理其实非常简单，了解后任何程序员都很容易分析出开销，比如对于这个类&br&&div class=&highlight&&&pre&&code class=&language-csharp&&&span class=&k&&public&/span& &span class=&k&&class&/span& &span class=&nc&&Calc&/span&
&span class=&p&&{&/span&
&span class=&kt&&int&/span& &span class=&nf&&Add&/span&&span class=&p&&(&/span&&span class=&kt&&int&/span& &span class=&n&&a&/span&&span class=&p&&,&/span& &span class=&kt&&int&/span& &span class=&n&&b&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&n&&a&/span& &span class=&p&&+&/span& &span class=&n&&b&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&打了hotfix标签后，xLua会在il层面注入代码，注入之后这个类会类似这样：&br&&div class=&highlight&&&pre&&code class=&language-csharp&&&span class=&k&&public&/span& &span class=&k&&class&/span& &span class=&nc&&Calc&/span&
&span class=&p&&{&/span&
&span class=&k&&static&/span& &span class=&n&&Func&/span&&span class=&p&&&&/span&&span class=&kt&&object&/span&&span class=&p&&,&/span& &span class=&kt&&int&/span&&span class=&p&&,&/span& &span class=&kt&&int&/span&&span class=&p&&,&/span& &span class=&kt&&int&/span&&span class=&p&&&&/span& &span class=&n&&hotfix_Add&/span& &span class=&p&&=&/span& &span class=&k&&null&/span&&span class=&p&&;&/span&
&span class=&kt&&int&/span& &span class=&nf&&Add&/span&&span class=&p&&(&/span&&span class=&kt&&int&/span& &span class=&n&&a&/span&&span class=&p&&,&/span& &span class=&kt&&int&/span& &span class=&n&&b&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&n&&hotfix_Add&/span& &span class=&p&&!=&/span& &span class=&k&&null&/span&&span class=&p&&)&/span& &span class=&k&&return&/span& &span class=&n&&hotfix_Add&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&,&/span& &span class=&n&&a&/span&&span class=&p&&,&/span& &span class=&n&&b&/span&&span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&n&&a&/span& &span class=&p&&+&/span& &span class=&n&&b&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&如果lua中执行了hotfix调用，hotfix_Add会指向一个lua的适配函数。&br&性能开销：&br&如果不打补丁，就一个if判断，比注入前多执行两条很轻量级的指令（Ldsfld，Brfalse），我在window下测试，这两指令加起来仅相当于空函数调用开销的十分之一到五分之一。&br&内存开销：&br&每个函数会多一个静态delegate引用，注意是静态的，和对象实例个数无关。（Stateful方式会略不同，后面单独分析）。&br&安装包影响：&br&一般情况，就一个if和delegate调用。如果泛化函数以及参数含非public类型参数或返回值的函数会多一点：每一个输入参数，每个输出参数，对应一次函数调用，外加三次函数调用。&br&很难有“增加百分之多少”的数据，因为这和你程序函数的粒度有关。有童鞋在尝试为NGUI全部类型加Hotfix标签来测试，有数据我可以更新上来。&br&&br&Stateful方式&br&这个方式的开销和基本和Stateless一样，一个地方除外：内存开销上每个对象实例会增加一个LuaTable的引用（引用而已，不会帮你new一个LuaTable实例，你没在构造函数那返回一个table，这个引用为空）。&br&&br&关于开源&br&当然，这决策来自领导，但我个人也有点小想法：&br&xLua在内部推广使用的过程中，深感项目的挑剔、指责和各种场景下的折腾才是一个通用组件快速进步和完善的动力。开源，无疑是把这放大化，也更加有利于xLua的健康发展。
xLua的作者，关注这帖子一阵子了，一直犹豫作为作者回答这问题会不会有卖瓜之嫌。 回下大家关注的热补丁的overhead。 热补丁的基本原理其实非常简单，了解后任何程序员都很容易分析出开销，比如对于这个类 public class Calc
int Add(int a, int b)
尽量挑冷门的说。&br&&br&官方顶点动画插件：用贴图来记录顶点动画数据，用 VTF 做顶点动画，而不是传统的动态顶点提交。（&a class=& external& href=&///?target=https%3A///latest/INT/Engine/Animation/Tools/VertexAnimationTool/index.html& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/l&/span&&span class=&invisible&&atest/INT/Engine/Animation/Tools/VertexAnimationTool/index.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&&br&Render To Texture Blueprint 工具集之 3D Imposter Sprites：先预渲染多个角度的公告板，然后在运行时根据视角选择最接近的一个（&a href=&///?target=https%3A///latest/INT/Engine/Content/Tools/RenderToTextureTools/3/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/l&/span&&span class=&invisible&&atest/INT/Engine/Content/Tools/RenderToTextureTools/3/index.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&&br&Render To Texture Blueprint 工具集之 Render a Normalized Depth Map：预渲染ShadowMap贴图，然后再材质里面把ShadowMap算一遍，来实现自阴影（&a href=&///?target=https%3A///latest/INT/Engine/Content/Tools/RenderToTextureTools/4/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/l&/span&&span class=&invisible&&atest/INT/Engine/Content/Tools/RenderToTextureTools/4/index.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&&br&Bullet Train 拿材质编辑器当 Substance Designer 用，烘培贴图来提高性能，还是Render To Texture Blueprint 工具集（&a class=& external& href=&///?target=https%3A///watch%3Fv%3DPG2fHLdzRIs%26feature%3Dyoutu.be%26t%3D2000& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&/watch?&/span&&span class=&invisible&&v=PG2fHLdzRIs&feature=youtu.be&t=2000&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&&br&Phong 高光的 SG 近似：把Phong方程里面的Pow函数给干掉，代码在BasePassForForwardShadingPixelShader.usf里面的PhongApprox（&a class=& wrap external& href=&///?target=https%3A////spherical-gaussien-approximation-for-blinn-phong-phong-and-fresnel/& target=&_blank& rel=&nofollow noreferrer&&Spherical Gaussian approximation for Blinn-Phong, Phong and Fresnel&i class=&icon-external&&&/i&&/a&）&br&&br&利用移动平台的 framebuffer_fetch 扩展在 shader 里面做 alphablend，代码在BasePassForForwardShadingPixelShader.usf 的 FrameBufferBlendOp；同时，在 framebuffer_fetch_depth_stencil 不支持时候用 framebuffer 的 w 存深度&br&&br&虚幻3的半透明头发自动排序工具，虚幻4代码还在，工具没做（DCC 软件里有没有类似的东西？有用过的麻烦分享下），（&a class=& external& href=&///?target=https%3A///Three/TranslucentHairSorting.html& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/Three&/span&&span class=&invisible&&/TranslucentHairSorting.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&&br&材质里 WorldPositionBehindTranslucency 函数实现的各种类贴花效果，比如虚幻竞技场2014（UT2014）主角足下阴影、UT2014 的 Outpost23 外景地表半透明云的投影、Showdown 里面汽车的阴影等&br&&br&材质里用 CustomUV 通道存 Color 数据，来实现在材质编辑器里面把像素着色器计算转移到顶点着色&br&&br&禅意花园里面不使用 RelectionVector+Cubemap 的组合来制作水面，而是先假设水面法线朝上，然后通过法线对反射UV做个简单的偏移，再取 Cubemap，来提高性能，龚神这篇文章第二点就是在介绍这个思路（&a href=&///?target=http%3A//www.klayge.org/%3Fp%3D3370& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&加速反射的渲染&i class=&icon-external&&&/i&&/a&）&br&&br&在广角镜头下需要避免屏幕边缘的广角畸变，传统做法一般是两个摄像机 FOV 分开渲染，而 UT2014 则利用 Panini 投影来做，代码在 PaniniProjection.usf（&a href=&///?target=http%3A//tksharpless.net/vedutismo/Pannini/panini.pdf& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&tksharpless.net/vedutis&/span&&span class=&invisible&&mo/Pannini/panini.pdf&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&），也有全局的 Panini（&a href=&///?target=https%3A///latest/INT/Engine/Rendering/PostProcessEffects/PaniniProjection/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/l&/span&&span class=&invisible&&atest/INT/Engine/Rendering/PostProcessEffects/PaniniProjection/index.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&&br&延迟渲染下实现个别对象置顶显示，一种思路是模板缓冲区处理，但是牵一发动全身太麻烦，UT2014 在顶点着色器里把武器的所有顶点朝摄像机移近了一定的百分比&br&&br&沙发骑士的小人跑到沙发后面也会变成类似全息影像的置顶显示，他的做法是做了两个材质，第二个材质禁用了深度测试，平时用第一个材质，当检测到摄像机和小人中心点中间有遮挡就切换到第二个材质。正常做这个用CustomDepth+Postprocess也行，他这个做法要节省点。&br&&br&材质编辑器里面的 PixelDepthOffset 只能为正，不能为负，开始以为是引擎代码写的不严谨，后来才知道这叫 conservative depth output（&a class=& wrap external& href=&///?target=https%3A////d3d11-features/& target=&_blank& rel=&nofollow noreferrer&&Conservative Depth Output (and Other Lesser-Known D3D11 Features)&i class=&icon-external&&&/i&&/a&）&br&&br&按住鼠标右键，滚动中间滚轮可以调节WASD的速度（拍案叫绝？拍桌大笑！）&br&&br&Slate 实现的这套 DSL 是为了在传统 UI 基础上实现类 Unity 的 IMGUI 的优势（&a href=&///?target=https%3A///latest/INT/Programming/Slate/Architecture/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/l&/span&&span class=&invisible&&atest/INT/Programming/Slate/Architecture/index.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&&br&有时候水底看起来因为折射在波动，其实是水塘的顶点在波动，和水和折射没有关系&br&&br&禅意花园里面的蝴蝶和鱼都不是骨骼动画，翅膀、尾巴或头的正弦运动，可以是刷上了顶点权重色配合 RotateAboutAxis 在顶点着色器里做正弦动画。&br&&br&Showdown 里面的窗户玻璃，并不是透明材质，而是不透明材质加上 bumpoffset（parallax mapping）做的伪透明&br&&br&FastMath.usf 里面一大把黑科技数学函数，当然少不了卡神的 0x5f3759df 啦&br&&br&BSP 里面 pen 和 brush clip 只有在顶视图等正交视图用空格键操作才有效，最吓人的是 lathe 工具，教程 &a class=& external& href=&///?target=https%3A///watch%3Fv%3DzJLVq-7vNbg& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&/watch?&/span&&span class=&invisible&&v=zJLVq-7vNbg&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a& ，官方案例的 BSP 关卡做的真是让人拍案叫绝（不过感觉现在引擎的重心没在这块？各种 bug 不修）&br&&br&粒子系统配合材质编辑器加上粒子 Event 体系，扩展性太强了，可惜 Niagara 模块很久没有动静，否则再配合上蓝图，已经是我能想象出来的极限&br&&br&无尽之剑里的 PBR 材质直接把 basecolor 贴图的某个通道做简单的 lerp 之类的处理就传给了roughness，效果显著，性能优秀。UT2014 的武器 material layer 做多了以后，性能不行，单个材质层也用这个技术来做优化贴图采样。&br&&br&PS 里法线越叠越平？那是因为没有掌握法线混合的 N 种姿势（ &a class=& wrap external& href=&///?target=http%3A///publications/blending-in-detail/& target=&_blank& rel=&nofollow noreferrer&&Blending in Detail&i class=&icon-external&&&/i&&/a&，web 预览：&a class=& wrap external& href=&///?target=http%3A///sandbox/normals.html& target=&_blank& rel=&nofollow noreferrer&&Shader Sandbox&i class=&icon-external&&&/i&&/a&），材质节点里面的 BlendAngleCorrectedNormals 就是 RNM（Reoriented Normal Mapping），当然啦，入 Substance Designer 神教就没这个问题了&br&&br&yEd 是个好玩的工具，把引擎内树状数据结构可视化打印出来（&a class=& wrap external& href=&///?target=https%3A///products/yed& target=&_blank& rel=&nofollow noreferrer&&yEd - Graph Editor&i class=&icon-external&&&/i&&/a&），r.CompositionGraphDebug 这个命令可以把光照合成、后期处理的流程打印出来&br&&br&不过还是 gephi （&a href=&///?target=https%3A//gephi.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Gephi - The Open Graph Viz Platform&i class=&icon-external&&&/i&&/a&）好看点，引擎用它来打印 UnrealBuildTool 的上下文依赖关系（GraphVisualization.cs 文件）&br&&br&与其折腾策划数据编辑软件，不如学好 VBA，直接来扩展 Excel，&a href=&///?target=https%3A///blog/driving-gameplay-with-data-from-excel& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Driving Gameplay with Data from Excel&i class=&icon-external&&&/i&&/a&，文章里面的 Export To CSV 内嵌按钮就是 VBA 写的，UT2014 也在用这个方案（例子的下载链接失效了，用这个：&a href=&///?target=https%3A///latest/attachments/Gameplay/DataDriven/Example.xlsm& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/l&/span&&span class=&invisible&&atest/attachments/Gameplay/DataDriven/Example.xlsm&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&&br&Lightmass 用挡光板逆向打光模拟区域光源（&a href=&///?target=https%3A///zh-CN/blog/simulating-area-lights-in-ue4& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Simulating Area Lights in UE4&i class=&icon-external&&&/i&&/a&），妈妈再也不用担心我打不好光了，禅意花园的室内氛围就是这么出来的&br&&br&Fresnel 在不明显的时候，用 lerp 替代 pow 只要慢慢调也能差不多，性能还好点，材质函数 Fresnel_Function 内部就同时集成了两种实现&br&&br&材质的自发光通道可以直接算光照模型，把光照模型关了，补一个 Lambert，补一个 Phong，甚至更简化的版本，小东西这么用比较省，尤其移动平台&br&&br&官方的 PostProcess Matinee （&a class=& external& href=&///?target=https%3A///watch%3Fv%3DHd3AV_Sx65Y& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&/watch?&/span&&span class=&invisible&&v=Hd3AV_Sx65Y&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）里面蝴蝶的翅膀，高光效果感人，就用上面说的方法：Phong 的一个变种，可以双向高光。不过他还是保留了 Volumetric 的 NonDirectional 光照计算&br&&br&======================================= 有空再更
尽量挑冷门的说。 官方顶点动画插件：用贴图来记录顶点动画数据，用 VTF 做顶点动画，而不是传统的动态顶点提交。（） Render To Texture Blueprint 工具集之 3D Imposter Sprites：先预渲染多个角度的公告板，然后在运行时根据视角选…
谢邀。&br&熬兴的问题并不是程序引擎导致的问题，而是在于他的“合理性”，在LoL中蛇形身体的角色很多，渲染都不是问题，Scale一下就出意外的可能性也是非常低的。&br&那么这个蛇形身体究竟带来了什么问题呢？&br&在LoL当中，他的AOE（包含子弹）、角色之间的碰撞大多是圆形和圆形、矩形和圆形的，大多角色的碰撞框都是一个圆形，我简单的做了一个草图：&br&&img src=&/27aeefeedaebe2d4364935ca_b.png& data-rawwidth=&692& data-rawheight=&433& class=&origin_image zh-lightbox-thumb& width=&692& data-original=&/27aeefeedaebe2d4364935ca_r.png&&上面这张图里面是一些英雄的碰撞圆形，其中熬兴的是来一些官方早期放出来的图形，我们可以发现这样几个特征：&br&&b&1，LoL中存在蛇形英雄，包括上图中的眼睛和蛇女。&/b&&br&所以你说渲染上蛇形的会有什么问题吗？事实上虽然我不接触渲染引擎这块（接触的很少），但是我也没听说过有因为是蛇形所以就渲染不了的问题，不过可能这块是因为我无知了。&br&&br&&b&2，不论是什么英雄，除了熬兴，他的碰撞盒都是合理的。&/b&&br&你可以从上图中看出，我用绿色的线代表“子弹”飞过的弹道。关于ez、眼球和蛇女，你可以脑补一下。这里不难看出：&br&1）如果子弹不打在红色的圈内，那么子弹没有命中，而碰到了红色的圈就算命中，这个毫无疑问，前3个的红色圈大家多能接受，但是熬兴的红圈未必能够接受，因为子弹打在他的尾巴上算不中的话，很多用户其实直觉是无法接受的，由于LoL又是竞技类游戏，所以这个“视觉欺骗”是不允许的。&br&2）那么我们给熬兴更大的一个圆如何？所以我做了橙色的圆，我们可以看到橙色的圆存在一个更大的问题，明明没有命中的子弹也算命中，玩家更加不能接受这样的事情。&br&3）为什么我们不用一个椭圆或者若干个圆来做这个事情？事情本身并不困难，如果你只是针对这件事情去做的话，但是我们回想一下LoL里面有哪些其他设计需要椭圆或者“连体圆”（多个碰撞盒代表一个角色，这在格斗游戏中常见）来处理碰撞的？前无古人，后也未必有来者，所以我们不应该为了这个英雄就去高一些特殊化，以增加性能上的压力，所以任何一个制作人都会把这个作为一向Design-Pattern去Cancel掉Anti-Patterns的设计。&br&&br&所以熬兴所谓的“技术问题”，事实上是并不值得为他去解决他的造型问题，而他的造型又公布的太早了，所以才“闯祸”了。其实第一眼看到这个英雄的时候，我就知道他会在碰撞盒问题上遭遇不测。&br&&br&========================针对回答，更新一下=============================&br&看完一些回答真让我呵呵，我就随手画几个草图我们来看看好了。&br&&img src=&/e3fa984ce368fef6e04b75cb6c1f3574_b.png& data-rawwidth=&415& data-rawheight=&295& class=&content_image& width=&415&&如上图所示：&br&熬兴是1、2、3、4这样4个球组成的，当然我们应该设定为n个球组成（n&1），因为我们并不是负责开发这个熬兴的人。这样若干个球的确是可以满足熬兴的体型在碰撞方面的处理的，那么接下来，我们有几个致命的问题：&br&1，我作为玩家，操作其他英雄只要操作一个球，但是操作熬兴的时候我操作的是1、2、3、4中的几号球呢？你觉得操作几号会是一个更加合理的反馈呢？这是一个最基础的问题，也是最容易的。&br&2，从面向对象的思路出发，“我”作为4号球，请问我的运动轨迹如何？我的运动轨迹应该符合f(角度,坐标,动作）这样一个函数吧？至少得有这3个参数。&br&3，熬兴在拐角处的问题处理？&br&4，假如蓝色球是敌方机器人，绿色方块是不可通过的地形（如野区的树、高地的墙壁），蓝色双线是飞爪的轨迹，请问此时图中显示为抓住了2号球（其实我们应该设定为抓住了x号球，但是就简化这个问题便于分析），请问作为4号球我的运动轨迹如何？还有熬兴被抓的效果如何？&br&不要小看以上这些必定存在的问题，他背后透出了一个策划思考问题的深度，越是资深的策划，思考设计的深度越大，这一个设计背后面临的lol所没有做的设计包括且不限于：&br&1，多个球映射为一个角色问题——假如EZ的大同时穿过了4个球会发生什么？这个问题在格斗游戏中倒是一个标准问题。&br&2，每个球的运动轨迹因为其他球而约束的规则——假如我向上走一半突然收到操作请求向下战力？每一个球的运动函数是怎样？&br&3，通过不可过地形时的阻挡判断重构：原本圆形和矩形的碰撞显然已经不足够了——需要若干个圆的轨迹综合决策，同时还要考虑是否加入尾巴可以甩动来规避一些障碍导致无法通过的问题，那么问题又来了，那些球代表尾巴？图中1号还是4号？&br&4，遭受“外力“而发生位移的时候，视觉动作和逻辑层的运动关系及其变化规则。&br&随便一想就是这么多的问题，这些问题都涉及到了一些核心的流程（为什么要求策划至少掌握一门程序语言和能够独立完成小游戏开发，就是为了在这块上有辨别能力），你知道这背后的开发代价是什么吗？记住，开发一个功能用的时间最多不超过调试这个功能的1/4，而且每一次碰触核心的修改都是会给产品带来隐患的。&br&那么我们反过来想，如果没有熬兴这个英雄，LoL就停运了吗？事实是一切还好着呢，所以不开发这个英雄显然是英明的，至少在解决这个问题（不论从哪个角度出发，哪怕是美术改造型）之前，没必要去做这么大的动作。&br&&b&为什么需要策划？因为设计不是随地大小便放完就走的，我们开发东西需要先把每一个细节想清楚，包括执行中可能会发生的任何问题都事先想好一切解决方案，这就是策划的作用。如果任何设计都可以信口开河，等遇到问题了咱们船到桥头自然直，那我要你策划何用？&/b&
谢邀。 熬兴的问题并不是程序引擎导致的问题，而是在于他的“合理性”，在LoL中蛇形身体的角色很多，渲染都不是问题，Scale一下就出意外的可能性也是非常低的。 那么这个蛇形身体究竟带来了什么问题呢？ 在LoL当中，他的AOE（包含子弹）、角色之间的碰撞大…
我是王哲，cocos2d-x创始人。正面回答楼主的问题&br&&br&1. cocos2d-x是中国人自己搞的?
YES。不仅如此，我们已经雇佣了cocos2d-iphone作者Ricardo Quesada一起搞。在程序员的世界里面，没有中国人、美国人、阿根廷人的概念，只有C++程序员，Java程序员，Lua程序员的概念。技术无国界。&br&&br&2. 国外用得不多吗？可能是早期情况。截止2014年7月的情况是，日本的《怪物弹珠》基于 cocos2d-x, 问鼎过日本付费总榜第一，万代南梦宫的正版《梦想海贼王》《J
OJO奇妙大冒险》都是基于cocos2d-x开发。我们统计出来全球google play前1400名有17.5%是基于cocos2d-x引擎开发。AppStore美国付费总榜第前5名的Big Fish Casino也是基于cocos2d-x的。楼上说得对，野心不小。我的野心就做是一个世界级的产品，对社会和行业有价值。
我是王哲，cocos2d-x创始人。正面回答楼主的问题 1. cocos2d-x是中国人自己搞的? YES。不仅如此，我们已经雇佣了cocos2d-iphone作者Ricardo Quesada一起搞。在程序员的世界里面，没有中国人、美国人、阿根廷人的概念，只有C++程序员，Java程序员，Lua程序员…
&p&能做出这类风格独特的游戏画面，开发人员(尤其是美术)应该是对自己水平是相当自信的才敢剑走偏锋吧，否则做出来不伦不类，还不如走传统美术风格或者pbr。基于这几家公司已发布的技术讲解猜测下可能会用到的几种技术：&/p&&p&1.FireWatch所使用的分层雾&/p&&br&&img data-rawwidth=&600& data-rawheight=&337& src=&/v2-b3610deb7e7f03c79a7c56_b.png& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/v2-b3610deb7e7f03c79a7c56_r.png&&&p&基本原理：取相机深度图做深度分离(类似色调分离，也可以加上Gamma与反Gamma)，然后用UV坐标(深度,0.5)去采样渐变图，最后作为后处理来染色。Pixel Shader中代码：&/p&&img data-rawwidth=&665& data-rawheight=&254& src=&/v2-db50cb29b3b377d145e4ea_b.png& class=&origin_image zh-lightbox-thumb& width=&665& data-original=&/v2-db50cb29b3b377d145e4ea_r.png&&&p&相机深度图分离&/p&&br&&img data-rawwidth=&969& data-rawheight=&353& src=&/v2-3f325f388ec6b044d963befe47246ece_b.jpg& class=&origin_image zh-lightbox-thumb& width=&969& data-original=&/v2-3f325f388ec6b044d963befe47246ece_r.jpg&&&p&另外网上有人提到用sobel算子做深度处理，边缘会更精确。&/p&&br&&img data-rawwidth=&968& data-rawheight=&352& src=&/v2-0affc5df293db9e83ab6_b.jpg& class=&origin_image zh-lightbox-thumb& width=&968& data-original=&/v2-0affc5df293db9e83ab6_r.jpg&&&p&深度分层染色图&/p&&br&&img data-rawwidth=&600& data-rawheight=&251& src=&/v2-c9c3a6430e7bbac98a1b1634_b.png& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/v2-c9c3a6430e7bbac98a1b1634_r.png&&&br&&p&我用Unity做的简化版，有点类似，但是细节上还差很多。&/p&&br&&img data-rawwidth=&938& data-rawheight=&493& src=&/v2-879b88eaef23ae_b.jpg& class=&origin_image zh-lightbox-thumb& width=&938& data-original=&/v2-879b88eaef23ae_r.jpg&&&p&2.Inside所使用渲染&/p&&p&PlayDead在GDC上有个讲解&a href=&///?target=http%3A///play/1023783/Low-Complexity-High-Fidelity-INSIDE& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Inside渲染技术的视频&i class=&icon-external&&&/i&&/a&，一个多小时内容，细节很多。&/p&&img data-rawwidth=&603& data-rawheight=&320& src=&/v2-fe2ff3d30_b.png& class=&origin_image zh-lightbox-thumb& width=&603& data-original=&/v2-fe2ff3d30_r.png&&&br&&img data-rawwidth=&864& data-rawheight=&482& src=&/v2-bb4e13f38c6c206e6696cfbe77911da0_b.png& class=&origin_image zh-lightbox-thumb& width=&864& data-original=&/v2-bb4e13f38c6c206e6696cfbe77911da0_r.png&&&br&&img data-rawwidth=&908& data-rawheight=&484& src=&/v2-c74e23bf2ea70a09fac72_b.png& class=&origin_image zh-lightbox-thumb& width=&908& data-original=&/v2-c74e23bf2ea70a09fac72_r.png&&&br&&img data-rawwidth=&866& data-rawheight=&485& src=&/v2-c6a0ee884dc3ea18f622eee5c417db75_b.png& class=&origin_image zh-lightbox-thumb& width=&866& data-original=&/v2-c6a0ee884dc3ea18f622eee5c417db75_r.png&&&br&&img data-rawwidth=&866& data-rawheight=&480& src=&/v2-546da3a27d4cbbe25fd3e0f71d4e0be0_b.png& class=&origin_image zh-lightbox-thumb& width=&866& data-original=&/v2-546da3a27d4cbbe25fd3e0f71d4e0be0_r.png&&&br&&img data-rawwidth=&866& data-rawheight=&482& src=&/v2-b60356dda9cfd9d0833c_b.png& class=&origin_image zh-lightbox-thumb& width=&866& data-original=&/v2-b60356dda9cfd9d0833c_r.png&&&br&&img data-rawwidth=&867& data-rawheight=&478& src=&/v2-39abd4f8ea0cf_b.png& class=&origin_image zh-lightbox-thumb& width=&867& data-original=&/v2-39abd4f8ea0cf_r.png&&&br&&img data-rawwidth=&862& data-rawheight=&482& src=&/v2-f93b9769d6feb88dfc1490a_b.png& class=&origin_image zh-lightbox-thumb& width=&862& data-original=&/v2-f93b9769d6feb88dfc1490a_r.png&&&br&&img data-rawwidth=&867& data-rawheight=&488& src=&/v2-635ae2befc487fb11a2d5260cdc78e80_b.png& class=&origin_image zh-lightbox-thumb& width=&867& data-original=&/v2-635ae2befc487fb11a2d5260cdc78e80_r.png&&&br&&img data-rawwidth=&869& data-rawheight=&486& src=&/v2-ba5aeadee525d410631f_b.png& class=&origin_image zh-lightbox-thumb& width=&869& data-original=&/v2-ba5aeadee525d410631f_r.png&&&p&另外还有专门优化的TAA：&a href=&///?target=https%3A///playdeadgames/temporal& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&playdeadgames/temporal&i class=&icon-external&&&/i&&/a&&/p&&p&3.That Dragon ,Cancer所使用的Low polygon风格，下面是我存笔记中的，不知道从哪里找到的了。&/p&&br&&img data-rawwidth=&564& data-rawheight=&1782& src=&/v2-8f0bdf1a333af32c3d4ade_b.jpg& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&/v2-8f0bdf1a333af32c3d4ade_r.jpg&&
能做出这类风格独特的游戏画面，开发人员(尤其是美术)应该是对自己水平是相当自信的才敢剑走偏锋吧，否则做出来不伦不类，还不如走传统美术风格或者pbr。基于这几家公司已发布的技术讲解猜测下可能会用到的几种技术：1.FireWatch所使用的分层雾 基本原理：…
Unreal Engine 4 免费, 以及 Cry Engine 面临收购, 和 Unity3D 的崛起, 这些都意味着 3D交互设计制作, 游戏制作等市场中, 技术供应商已经在慢慢的从高新技术研发的卖方市场渐渐转换为以大众开发者的消费为主体的买方市场. &br&&br&从侧面上反映出 AAA 游戏的制作订单正在缩减, 而有实力制作 AAA 游戏的开发商在自研引擎技术上也是积累多年( EA, Ubisoft, Valve, SE, Konami, Rock Star, 甚至很多小型的精英型 Studio 都是靠自研引擎做游戏性非常特殊的游戏), 所以加剧了 ue4 的大厂订单下滑, 而实力较为次级的开发商, 则会在成本, 人才方面抉择, 最终可能选择开发成本相对较低的引擎和平台比如 Unity3D, Mobile 平台. &br&&br&从另外一个角度上看这也是 AAA 的产业链封闭照成的人才流通的不便利, 最后人才逐步被开放市场中的人才所取代, 所以 ue4 的开放, 给了高新技术研发的企业们一个很好的信号, 技术生态圈的培养比起封闭的精英型技术交流更为重要. &br&&br&问题里说到了自研引擎市场, 这里就简单补充一下自研引擎: 自研引擎在成熟的 Studio 中, 无论如何都是对的. 原因很简单, 游戏性的创新会带来工具链的升级, 所以通用引擎是无法满足于技术强度很大, 或者资源工作者工作强度很大的游戏性创新需求. 这种情况下, 只有依靠自研引擎才能够把这种技术创新的游戏做好. 所以自研市场你看不见, 但大厂们肯定都在做, 甚至小团队为了自己的特殊需求都会做.&br&&br&对于开发者而言, 这无疑是一个很好的时代, 很多原先接触不到的优秀技术, 更加开放地让大众消费, 过去如果自己技不如人是因为穷导致的视野短视以及机遇问题未能进入大公司接触这些引擎导致的思维阻碍, 那么到了现在就只能说是自己不勤奋了. 不得不赞叹 Epic, Unity3D 这些公司在计算机技术的研发和科普上做出的贡献.
Unreal Engine 4 免费, 以及 Cry Engine 面临收购, 和 Unity3D 的崛起, 这些都意味着 3D交互设计制作, 游戏制作等市场中, 技术供应商已经在慢慢的从高新技术研发的卖方市场渐渐转换为以大众开发者的消费为主体的买方市场. 从侧面上反映出 AAA 游戏的制作订…
我自己简单尝试了一下写HTML5版本。地址在这里：&br&&a href=&///?target=http%3A//ben7th.github.io/flappy-html5-bird/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ben7th.github.io/flappy&/span&&span class=&invisible&&-html5-bird/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&源代码可以从github上拿。&br&&a href=&///?target=https%3A///ben7th/flappy-html5-bird& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/ben7th/flapp&/span&&span class=&invisible&&y-html5-bird&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&&b&比较了一圈，相比于其他高手的实现，我写的和IOS原始版的相似度尽力做到比较高，从界面元素的切换到分数数字等细节，都很接近原作了。&/b&&br&&b&&br&缺点在于没使用任何框架，所以对于一般意义上的游戏开发而言，参考性不强。&br&&/b&&br&只用jQuery，用coffeescript来写。&br&除此之外没用其他框架或者库。完成结果是&b&500行左右的js-coffee&/b&。注释和调试语句都没删，结构上也还有很大的优化余地。&br&图片是从IOS原始版里扒的。边做别的事情边写，零零散散用了&b&一天半左右&/b&的时间。&br&如果包括画图部分，思路确定的情况下，&b&三天时间&/b&是合理的。&br&&br&总体来说我觉得相对简单。游戏中用到的可动角色以及判定运算并不多。&br&基本上，搞定了小鸟的跳起下落的重力计算就OK，套用加速度公式而已，没有什么太难的。&br&&br&小鸟和管子的碰撞判定十分容易做。因为小鸟的x坐标是不变的，变化的只是y坐标。小鸟和管子都可以看成矩形，矩形的碰撞计算很简单。无需用到任何游戏引擎都可以手写。&br&&br&&b&基本上前端基础稍强的，有一些面向对象编程思路的程序员，都应该可以写出来。&/b&&br&大部分人下意识里觉得难写的原因可能是不敢试。&br&&br&&img src=&/2c7f97ce5effb73cc56f6de2fa6907a3_b.jpg& data-rawwidth=&392& data-rawheight=&520& class=&content_image& width=&392&&&br&&img src=&/27112cfd1df657bdb050ad5b27cc4849_b.jpg& data-rawwidth=&392& data-rawheight=&520& class=&content_image& width=&392&&&br&&img src=&/56d0c87ae32bd8af16e377a_b.jpg& data-rawwidth=&392& data-rawheight=&520& class=&content_image& width=&392&&&br&&br&更细节的东西这里还贴吗？好像没什么必要。。&br&因为想看的朋友自然会看源码的吧。
我自己简单尝试了一下写HTML5版本。地址在这里：
源代码可以从github上拿。
比较了一圈，相比于其他高手的实现，我写的和IOS原始版的相似度尽力做到比较高，从界面元素的切换到分数数字等细节，都很接近原作了。 …
可行性很高！！！&br&从漫画风格游戏方面来说吧，如果游戏的 实时渲染都能实现，那么漫画的延时渲染更没有问题了。&br&我见到的在这方面做得比较好的是日式游戏无疑，《二之国》和《火影忍者》就是其中的好同学~~~&br&&img data-rawheight=&360& data-rawwidth=&640& src=&/453d51f03a8eb5ebbf861e_b.jpg& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/453d51f03a8eb5ebbf861e_r.jpg&&
《二之国·白色圣灰的女王》3d游戏画面，有没有感觉到浓郁的宫崎骏风格？&br&&br&要想最终效果接近手绘的效果，需要从美术模型贴图和着色程序两方面来控制。那就说说几个影响大的部分。&br&&br&&ol&&li&模型：合理设置模型的凹凸起伏，否则在渲染阶段就全是小线条了&img data-rawheight=&673& data-rawwidth=&1364& src=&/d2e8b28a499a79ea81c23_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1364& data-original=&/d2e8b28a499a79ea81c23_r.jpg&&&/li&&br&&br&&li&贴图：充满卡通风格的手绘贴图（非美术大神不能为也~~~）&img data-rawheight=&1914& data-rawwidth=&1024& src=&/fc2a2cb1d15ecfa985f49_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/fc2a2cb1d15ecfa985f49_r.jpg&&&br&&/li&&li&描线：一般基于3d空间对模型进行分析，在模型的外边缘画上粗线，在内侧根据模型的起伏大小设定大小阀值，画出细线。&img data-rawheight=&891& data-rawwidth=&800& src=&/ac96c9bcdefe_b.jpg& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/ac96c9bcdefe_r.jpg&&&img data-rawheight=&891& data-rawwidth=&800& src=&/f246dd5a70ffbe5dd9db8_b.jpg& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/f246dd5a70ffbe5dd9db8_r.jpg&& 描边之前是不是很蠢萌。。。。。。。&/li&&li&toon shading：用突变的色调模拟渐变的光照、阴影等明暗变化&br&&/li&&/ol&&img data-rawheight=&116& data-rawwidth=&518& src=&/a49d3b9d23936c5ceccc7617_b.png& class=&origin_image zh-lightbox-thumb& width=&518& data-original=&/a49d3b9d23936c5ceccc7617_r.png&&本来是连续的阴影，然后就给划分成好几节了，模拟不同灰度的网点纸~~~&br&&img data-rawheight=&900& data-rawwidth=&1397& src=&/2f44feacd48d797ac691_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1397& data-original=&/2f44feacd48d797ac691_r.jpg&&&br&&img data-rawheight=&900& data-rawwidth=&1397& src=&/ab62c427abb8d2c89519ce_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1397& data-original=&/ab62c427abb8d2c89519ce_r.jpg&&引用来源：&br&&a class=& wrap external& href=&///?target=http%3A//www.opengpu.org/forum.php%3Fmod%3Dviewthread%26tid%3D7164%26highlight%3D%25E7%2581%25AB%25E5%25BD%25B1%25E5%25BF%258D%25E8%& target=&_blank& rel=&nofollow noreferrer&&【翻译】火影忍者鸣人 疾风传
终级风暴2 制作介绍&i class=&icon-external&&&/i&&/a&&br&&a class=& wrap external& href=&///?target=http%3A//www.opengpu.org/bbs/forum.php%3Fmod%3Dviewthread%26tid%3D10656& target=&_blank& rel=&nofollow noreferrer&&【PS3】二之国 白色圣灰的女王 日本制造的视觉效果&i class=&icon-external&&&/i&&/a&&br&&a class=& wrap external& href=&///?target=http%3A//blog.csdn.net/candycat1992/article/details/& target=&_blank& rel=&nofollow noreferrer&&【NPR】卡通渲染&i class=&icon-external&&&/i&&/a&&br&&a class=& wrap external& href=&///?target=http%3A//blog.csdn.net/BugRunner/article/details/5435078& target=&_blank& rel=&nofollow noreferrer&&非真实渲染（一）&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///TracePlus/p/4205798.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，前篇（1）&i class=&icon-external&&&/i&&/a&
可行性很高！！！ 从漫画风格游戏方面来说吧，如果游戏的 实时渲染都能实现，那么漫画的延时渲染更没有问题了。 我见到的在这方面做得比较好的是日式游戏无疑，《二之国》和《火影忍者》就是其中的好同学~~~ 《二之国·白色圣灰的女王》3d游戏画面，有没有…
转Unity是明智的：&br&&br&&b&1&/b&.&b&先说说为什么cocos2d-x之前那么火：&/b&&br&&b&a&/b&.&b&开源&/b&：每个CTO都认为开源可以更好的掌控引擎，万一引擎坑了可以马上改，包的大小比较容易控制，跟平台语言相互调用也方便。2.x时期，坑是一点点填得差不多了，许多技术实力强的团队也完成了自己的改造， 然而cocos2d-x在2.x到3.x期间引擎架构改了，连新建工程都一个版本一种方式，这期间坑多得让很多人都不想陪着踩一直用着2.x，现在好不容易稳定了，已经失了许多人心。&br&&b&b&/b&.&b&专注2D：&/b&Unity在13年下半年才正式发布2d游戏的原生支持，之前必须依靠插件才能比较顺畅的开发2d游戏，显然已当时的手机性能，开发2d是比3d更可控，流程更短。因此当时在手游领域，cocos2d-x可谓突飞猛进，一日千里。&br&&b&c.跨平台：&/b&虽然Unity也能跨平台还是一键发布，然而Unity 3.x~4.x只有收费版才能支持和平台语言通信（obj-c,java等），不买正版等于没法接各种sdk。所以还是cocos2d-x这个开源的C++引擎做起这些接sdk之类的平台相关的工作比较灵活。&br&&b&d.cocos2d-iphone的口碑：&/b&这也是触控把cocos2d之父从Zynga挖过来做VP的原因之一，cocos2d-iphone作为iphone上早期的开源项目知名度和开发者数量都挺不错。&br&&br&&b&2.再说说Unity3d更值得选择的原因：&/b&&br&&b&a.强大的编辑器：&/b&虽然不少程序员不太适应组件式的开发思维，然而配合稳定流畅设计合理的编辑器，很多工作可以分配给策划和美术，程序员专注于游戏逻辑。必要时通过资源商店可以购买种类丰富的插件和美术资源，甚至自己开发定制的插件，节省了宝贵的开发时间。&br&反观cocos2d-x，最近这个版本的cocostudio才感觉不卡，之前的用几十分钟就卡得不行……功能上算是慢慢赶上来了，然而要达到unity那种随心所欲扩展的境界，估计是不可能。&br&&b&b.方便的跨平台：&/b&相比cocos2d-x那种还要打开ide导入工程才能发布跨平台的原始方式，Unity很早就支持了一些平台的一键发布，只需简单的设置。唯一不足的就是某些平台的发布体积较大，需要优化。&br&值得一提的是直接发布webgl版本（通过il2cpp将c#字节码编译成c++再用emscripten将c++编译成js），目前时髦的浏览器都可以直接运行，无须任何插件，这也让adobe互联网多媒体的霸主地位开始动摇。反观cocos2d为了兼顾web，搞出了cocos2d-js这样的方案，结果是花费大量精力去做到js和c++方面api的步调一致，在发布的时候发现即使在web上流畅跑起来，要发布成原生版本还是有许多坑要探索。&br&&b&c.领先的3d和日渐完善的2d支持：&/b&经过10年的积累以及近几年的高速发展，Unity的3d部分是比较成熟的，能够满足大部分游戏开发者的需求。配合强大的编辑器，cocos2d-x想要追赶没那么容易。2d的支持虽然比较晚出来，但是之前的许多优秀2d插件已经证明了Unity可以胜任2d游戏制作。&br&&b&d.收费模式：&/b&现在的时代，独立游戏是创新的代名词，对引擎来说，获得独立游戏开发者的青睐是非常有意义的。Unity在4.x的时候还扭扭捏捏，没法用个人免费版接sdk，因为不允许和平台语言互调，而5.x是完全没有这个限制，也就是说个人免费版也可以调用java或obj-c写的插件了。&br&而收费版只是要求一年挣了十万美刀的用户必须买个正版，也就几千刀而已，比虚幻4那种要贡献部分收入的政策简直太良心。&br&&br&&b&3.综述：&/b&&br&cocos2d-x本来是前景一片光明的，之前作为一个开源的跨平台手游2d引擎打出知名度，触控再用这个知名度去拿一些海外作品的代理间接变现。然而后面为了追求在财报上直接体现引擎的价值，去走一条大而全的道路，什么都想做，2d的流程还没做好，又搞web和3d，什么都没做好。而Unity做了好用的编辑器，设计了十分友好的制作和发布流程，以此为根基牢牢把持住3d引擎最大的市场占有率的同时，稳扎稳打，一边提升3d方面的质量，一边借鉴2d插件来开发原生2d功能，更开发了新的ui系统（这部分还开源了），还有通过建设资源商店以及游戏视频分享平台等等周边服务来维持一个健康的生态，整个战略都十分清晰稳健。顺便说下像虚幻4，cryengine这些3A领域的霸主，想要在手游和独立游戏这里跟Unity争抢一亩三分地，这方面的积累还是不够。&br&&br&手游行业现在已经进入了资本垄断大众市场，独立游戏争鸣小众市场的时代，无论是做更能给资本讲故事的重度游戏，还是追求艺术理想的独立游戏，Unity都能很好提供一整套的成熟的解决方案，反观cocos2d-x已然乱了阵脚，只是在宣传上下足了功夫，看我什么功能都有，看国产排行榜上多少个游戏是用我开发的……然而用起来是那么的艰涩，除非是技术实力、人力都充足的中大型团队可以在开源的基础上改造改进，其他小团队只能依赖引擎方的，在远景上已然黯淡。所以我个人认为，Unity是游戏从业者的一个比较好的选择。以上拙见仅供参考，欢迎指正。
转Unity是明智的： 1.先说说为什么cocos2d-x之前那么火： a.开源：每个CTO都认为开源可以更好的掌控引擎，万一引擎坑了可以马上改，包的大小比较容易控制，跟平台语言相互调用也方便。2.x时期，坑是一点点填得差不多了，许多技术实力强的团队也完成了自己的…
几个相关问题里有很多做游戏和图形学的大大的回答，讲的很深入。我从建筑系学生的视角讲一讲吧。&br&&br&&a href=&/question/& class=&internal&&为什么Unreal 4引擎能轻易实时渲染出vray要花半天才能渲染出的场景？ - 建筑设计&/a&&br&&a href=&/question/& class=&internal&&为何大部分3D渲染程序渲染1帧图像需几分钟甚至几小时，而同样大小的图像游戏引擎能做到30+FPS实时渲染效率？ - 计算机&/a&&br&&a href=&/question/& class=&internal&&用游戏引擎制作室内效果模拟是否有前景并值得一试？ - 设计&/a&&br&&br&&br&&b&1. 原理区别&/b&&br&&br&VRay等渲染器原理上叫做离线渲染(Offline Rendering, Pre-Rendering)，游戏引擎的渲染原理叫在线渲染或者实时渲染(Online Rendering, Real-time Rendering)。后者对性能的要求比较高，游戏里面一般60fps，至少30fps，也就是说十几毫秒一帧。但要是用离线渲染的话就无所谓咯，据说weta的renderfarm有4000个CPU，渲一个电影半年吧。离线渲染对效果要求非常高，养了那么多R&D，恨不得做个电影都自己写个渲染器。而实时渲染就是在性能预算下，尽可能做到真实。&br&&br&总结一下，&br&&ul&&li&VRay这类的目的是是保证效果的前提下，尽可能减少成本，也可能不计成本。&/li&&li&Unreal渲染的目的是性能保证的前提下，尽可能模拟真实性。&/li&&/ul&再深入来说就是游戏引擎用了不少小trick来达到这样的目的。比如一个差距在全局照明(&a href=&///?target=https%3A//en.wikipedia.org/wiki/Global_illumination& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Global illumination&i class=&icon-external&&&/i&&/a&)，大意就是物体不仅被光源照亮，还能被被光源照亮的物体照亮。比如左图后墙发绿，就是接收了右侧看不到的这面墙漫反射的绿光。在VRay里面可以轻易实现GI，它用的光线追踪(Ray Tracing)就是在模拟反射光线。游戏引擎里呢，一般没法做到&b&实时GI&/b&，不能每一帧都光线追踪一次吧，那样帧率很难达标。当然目前的趋势有在研究实时光线追踪，但是通用的替代方案是预先计算和存储一些光线的信息，比如烘焙光照贴图这种。Unity里用LightProbe解决。Unreal有一个VXGI的实时GI，算是不小的进步。但无论如何，真实性肯定比不上离线渲染的GI。做到何种效果就能欺骗人眼了，这就是另一个问题了。&br&实时渲染预先计算的话，也要耗费一定时间，不一定比离线快。好处是预先计算完就可以随便选角度导出了，而离线渲染意味着每个角度都要再渲一遍。&br&还有其他很多trick比如各种环境光阻塞(AmbientOcclusion)快速算法等等就不一一细说了，怕露怯。&br&&img src=&/284e6e1a016aa35bff76_b.jpg& data-rawwidth=&600& data-rawheight=&225& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/284e6e1a016aa35bff76_r.jpg&&&br&&br&但是有很多Unreal做的效果很真实啊，比如 &a data-hash=&36c4e978d33d62b14b90a34c31f9c337& href=&///people/36c4e978d33d62b14b90a34c31f9c337& class=&member_mention& data-editable=&true& data-title=&@韩世麟& data-hovercard=&p$b$36c4e978d33d62b14b90a34c31f9c337&&@韩世麟&/a&韩神的文章&a href=&///?target=http%3A///inspiration/animation/this-is-unreal/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这不是真的！This is Unreal！&i class=&icon-external&&&/i&&/a&笔者认为有几点原因&br&&ul&&li&建筑效果图不涉及实时渲染的一些弱点，比如毛发&/li&&li&实时渲染和硬件技术进展的很快，比如正在普及的一类基于物理的光照模型和PBR流程，对于建筑效果图中常见的这些硬质表面已经可以模拟的很好很快。&/li&&li&没有对比就没有伤害，光看游戏引擎效果不对比离线渲染普通人看不出差距。&/li&&li&作者美术水平比较高。用游戏引擎做成这种水平，用VRay做这就是下限了。&/li&&/ul&&img src=&/2d72c55df64ba_b.jpg& data-rawwidth=&1920& data-rawheight=&1050& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/2d72c55df64ba_r.jpg&&（图片来自老韩的博客）&br&&br&实时渲染技术进步还是很快的。比如Unity在GDC2016上的&a href=&///?target=http%3A///v_show/id_XMTYxNTEwNTA3Ng%3D%3D.html%3Ffrom%3Ds1.8-1-1.2%26spm%3D0.0.0.0.9C85jO& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Unity Adam demo&i class=&icon-external&&&/i&&/a&，比如《神秘海域4》这张图，Elena Fisher的特写。虽然头发还是有一点细微的贴图感。神海4基本代表了现在实时渲染在商业游戏中的最高水准了。&br&&img src=&/d83cc2fd3df66d8f2765251ccb381d5b_b.jpg& data-rawwidth=&1280& data-rawheight=&720& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/d83cc2fd3df66d8f2765251ccb381d5b_r.jpg&&&br&&br&&b&2. 有无必要&/b&&br&&br&笔者觉得，就效果上来说，用游戏引擎足够了。&br&&br&但这并不意味着建筑效果图要用渲染的方式做。&br&&br&其实现在大部分建筑效果用的技法是Matte Painting，最早来自于摄影后来在电影工业中的一种做场景的常用技法。&br&&br&&img src=&/c3fda81fb34d1f69e9ca30_b.jpg& data-rawwidth=&985& data-rawheight=&593& class=&origin_image zh-lightbox-thumb& width=&985& data-original=&/c3fda81fb34d1f69e9ca30_r.jpg&&早期技法，前景画到玻璃上再拍摄。&br&&img src=&/9a159af04d7eb1ff7e288dca1cced06b_b.jpg& data-rawwidth=&450& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&450& data-original=&/9a159af04d7eb1ff7e288dca1cced06b_r.jpg&&电影中合成的自由女神。&br&&br&&br&比如看建筑效果图下面几种流派：照片级渲染派，简单渲染主要靠后期派和强行PS派。&br&&br&&img src=&/63a518e51a143c116f98aa6c81f4e880_b.jpg& data-rawwidth=&1600& data-rawheight=&908& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&/63a518e51a143c116f98aa6c81f4e880_r.jpg&&&img src=&/bec7dadde359949fab20b_b.jpg& data-rawwidth=&1500& data-rawheight=&774& class=&origin_image zh-lightbox-thumb& width=&1500& data-original=&/bec7dadde359949fab20b_r.jpg&&&img src=&/fa4dc395c7ac_b.jpg& data-rawwidth=&564& data-rawheight=&752& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&/fa4dc395c7ac_r.jpg&&第一张来自MIR，第二张是Doug&Wolf，第三张出处不明。&br&&br&越靠后的图，需要的渲染越少，相应PS工作量也越大。但无论如何，各种配景：人，车，周边建筑，山水都可以用Matte Painting的技法解决。&br&&br&后两种的风格在学生中广为流行。在学校里面学院派的老师可能还会觉得前两种商业味太重，更喜欢第三张这个风格呢。第一张那种商业效果图公司才会做，以及一般室内设计的效果图也是类似的比较依赖渲染，偶尔用用合成。&br&&br&对学生和业余做建筑表现的从业人员来说，Matte Painting的技法足够了，而且容易，效率更高。用这种技法呢，甚至都不用掌握太多VRay的技巧，看过不少建筑效果图渲染都不用做反射贴图，简单赋上Diffuse调一下反射材质和打光就开始渲染，出几个通道，大量的工作是放到PS里合成。&br&&br&效果是一方面，方不方便也很重要。用这种工作流的话，只是使用了渲染器的基础功能，并不需要离线渲染做的出来而游戏引擎达不到的效果。游戏引擎虽然渲染比较快，但问题是这样把工作流程搞复杂了，和建模软件的衔接做的不好，所以导入引擎不如直接在建模软件里渲染了，如果在建模软件里有一个快速的渲染模块，那就更没什么差距了。&br&&br&&br&&b&3. 什么情况下才会用到游戏引擎&/b&&br&&br&静帧和动画在现有条件下，对一般学生来说，无论是方案迭代还是最终表现时，笔者认为还没什么必要用游戏引擎。现有VRay+SU/Rhino就够了。&b&同样一套模型和贴图，放到游戏引擎里可不一定比用VRay渲染效果更好。瓶颈在于美术水平，而不是工具。&/b&如果追求迭代快的话，也有一些快速的渲染器可以选择。如果是为了追求游戏引擎中的可编程渲染管线，自己写Shader，那Rhino和SU还真可以有这么一套渲染插件。对效果图公司，3DSMAX + VRay的工作流已经很成熟了，用户多，资源多。找熟悉游戏引擎的使用者成本也比较高。短期内还很难动摇VRay在效果图中的地位。&br&&br&（插一句题外话，说到可编程渲染管线这个事，我还真觉得在建筑学里有意义。像一些分析图的风格，是不是直接可以用Shader写出来，不用搞到PS里后期拼合，可以极大地加快分析图的制作速度。）&br&&br&&b&用游戏引擎除非需要实时交互的效果，比如VR/AR。&/b&但目前的问题是制作成本很高，需求比较少。市场方面的事就不细谈了，毕竟不是相关从业者，还是说说技术。&br&&br&对于建筑系的学生，想去做交互效果的话，技术上还需要再学习不少。做VR帧率是瓶颈，最少60fps，最好120fps。这就要用实时渲染的技术，用游戏引擎的平台，强行优化美术资源。&br&&br&再有因为要交互，要漫游。而Matte Painting的技法只能在特定视角使用。那些资源，植被，配景建筑，山石地形，飞禽走兽，行人车马，就都做成模型导到引擎里。这些玩意可以用Procedural的方法做，或者ZBrush捏。一些特效，流水天空等等，可以用粒子系统做。但有时粒子系统太费资源，那就要写Shader了。对建筑表现不本质还很浪费时间。&br&&br&做贴图又是很麻烦的事，游戏引擎比如UE/U3D里用PBR工作流。凹凸不能用高度贴图要用法线贴图，Metal/Roughness或者Specular/Glossiniss都要普及PBR基本概念。可以用Substance工具包做，但美术还是经常做错的。&br&&br&场景里没有动物人物，死气沉沉的，还得建模角色绑动作以及优化动作。&br&&br&万一资源多了面数太高，draw call太多帧率提不上去。这就要优化模型。做LOD，远处用低模；合并模型做材质atlas；面数太高烘法线贴图代替；植被高模用面片代替。&br&&br&等你做到这再这回头一看，这特喵的不就是在做游戏嘛。当然到了那个时候，游戏行业欢迎你：）&br&&br&表现媒介的改变会带来行业的变革，就像布鲁内莱斯基发明建筑投影图。但毕竟表现仅仅是建筑设计的一小部分内容。而且设计院里建筑表现很多情况下都是分包的，不是建筑师的核心竞争力。君不见还有好多喜欢做手工模型推敲的建筑师，讲真那个空间氛围的感觉确实比效果图好。要是和习惯了实体模型的建筑师讲，我的渲染是基于物理的渲染！他们大概也就是“哦”一下吧。VR/AR或许会取代实体模型，现在说谁知道呢。&br&&br&笔者对建筑和游戏都是略懂皮毛，如有讲的不专业的地方，还请指正。&br&&br&以上。
几个相关问题里有很多做游戏和图形学的大大的回答，讲的很深入。我从建筑系学生的视角讲一讲吧。
以我所知，Frostbite[1] 和CryEngine [2]都是在2014年才宣布转用基于物理着色（Physically-based Shading）。之前所使用的反射模型应该是传统的Blinn-Phong。&br&&br&然而，Forstbite 2 使用了Enlighten，通过预计算 light probe （这是image-based lighting／IBL技术）可以取得更细节的间接镜面反射效果，含有反射色彩及细节，而不是简单地使用直接光照形成高光[3]：&br&&img src=&/eee9f912f630_b.jpg& data-rawwidth=&728& data-rawheight=&410& class=&origin_image zh-lightbox-thumb& width=&728& data-original=&/eee9f912f630_r.jpg&&&br&&img src=&/adc33d795f2ff63289dbf81_b.jpg& data-rawwidth=&728& data-rawheight=&410& class=&origin_image zh-lightbox-thumb& width=&728& data-original=&/adc33d795f2ff63289dbf81_r.jpg&&&br&同期CryEngine的开发者发明了Light Propagation Volume (LPV) [4][5]，主张不使用预计算，在运行时直接计算动态间接光照。通过对LPV进行marching，可以产生半光泽材质的反射：&br&&img src=&/a36b75cde56fce2442ba_b.jpg& data-rawwidth=&600& data-rawheight=&269& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/a36b75cde56fce2442ba_r.jpg&&&br&&br&但这种高光不能控制光滑程度，而且性能比较低（似乎Crysis没有用到？）。因此，那个时候的CryEngine 3仍然主要使用简单光源来做高光效果。&br&&br&顺带一提，在Unreal Engine 4 登场时也使用了一个实时全局光照技术 sparse voxel octree （SVO）/ voxel cone tracing [6][7]，但由于运行时的计算量太大，后来放弃了此功能。取而代之回到预计算年代，并加入屏幕空间反射（screen-space reflection, SSR）等实时技术，可以说是一个折衷方案。这些光照技术及基于物理着色是2014年主流的做法，CryEngine也回到了预计算的方向。&br&&br&最后贴 [7] 中的一页，展示简单光源和IBL的镜面反射在视觉上的比较：&br&&img src=&/901eeb5c2a6f0d0ba5e577_b.jpg& data-rawwidth=&1047& data-rawheight=&590& class=&origin_image zh-lightbox-thumb& width=&1047& data-original=&/901eeb5c2a6f0d0ba5e577_r.jpg&&&br&&br&[1] Lagarde et. al, &&a href=&///?target=http%3A///publications/s2014-shading-course/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Physically Based Shading in Theory and Practice&i class=&icon-external&&&/i&&/a&: &a href=&///?target=http%3A///2014/11/moving-frostbite-to-pbr/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Moving Frostbite to PBR&i class=&icon-external&&&/i&&/a&&, &i&ACM SIGGRAPH Courses&/i&. 2014. &br&[2] Johnson et. al, &&a href=&///?target=http%3A///display/SDKDOC4/Physically%2BBased%2BRendering& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Physically Based Rendering&i class=&icon-external&&&/i&&/a&&, CryEngine Documentation. 2014.&br&[3] Andersson, &&a href=&///?target=http%3A///2011/12/shiny-pc-graphics-in-battlefield-3/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Shiny PC Graphics in Battlefield 3&i class=&icon-external&&&/i&&/a&&&br&[4] Kaplanyan et al. &Light propagation volumes in cryengine 3.& &i&ACM SIGGRAPH Courses&/i& 7 (2009): 2.&br&[5] Kaplanyan et al. &Cascaded light propagation volumes for real-time indirect illumination.& &i&Proceedings of the 2010 ACM SIGGRAPH symposium on Interactive 3D Graphics and Games&/i&. ACM, 2010.&br&[6] Crassin et al. &Interactive indirect illumination using voxel cone tracing.&&i&Computer Graphics Forum&/i&. Vol. 30. No. 7. Blackwell Publishing Ltd, 2011.&br&[7] Mittring, Martin. &The Technology behind the “Unreal Engine 4 Elemental Demo”.& &i&part of “Advances in Real-Time Rendering in 3D Graphics and Games,” SIGGRAPH&/i& (2012). &a href=&///?target=http%3A///s2012/Epic/The%2520Technology%2520Behind%2520the%2520Elemental%2520Demo%.pptx& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&/s2012/Epic/The%20Technology%20Behind%20the%20Elemental%20Demo%2016x9.pptx&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
以我所知，Frostbite[1] 和CryEngine [2]都是在2014年才宣布转用基于物理着色（Physically-based Shading）。之前所使用的反射模型应该是传统的Blinn-Phong。 然而，Forstbite 2 使用了Enlighten，通过预计算 light probe （这是image-based lighting／IBL…
这类技术通常称作轮廓渲染（silhouette rendering）。&br&传统的做法主要分开 3 类：&br&&ol&&li&材质着色：如用 pixel shader 或环景贴图 [1] 检测屏幕空间的法线方向来决定是否接近边缘。这只适合曲面为主的物体，不能细致地控制轮廓的粗幼。其实和 rim light 是相似的，只不过是变暗而不是变亮。&br&&img src=&/f0f1ce15b97fbee0e7b344c_b.png& data-rawwidth=&542& data-rawheight=&564& class=&origin_image zh-lightbox-thumb& width=&542& data-original=&/f0f1ce15b97fbee0e7b344c_r.png&&&br&&/li&&li&几何空间：如 shell method [2]，正常地渲染场景后，再渲染几何物体一次，这次把顶点位置沿法线方向 extrude 来扩大几何体，然后剔除正向的面，即只剩下扩大后的几何体背面，用单色渲染。坏处是轮廓线通常使用世界空间的单位，会有远细近粗的问题。而且有些凹形的部分会有穿插问题。&br&&img src=&/cccba0c5fd47ea52ebdec70f_b.png& data-rawwidth=&436& data-rawheight=&449& class=&origin_image zh-lightbox-thumb& width=&436& data-original=&/cccba0c5fd47ea52ebdec70f_r.png&&Image courtesy of David R. Walton &a href=&///?target=http%3A//drwalton.github.io//silhouette-rendering.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Silhouette Rendering&i class=&icon-external&&&/i&&/a&&br&&br&&/li&&li&屏幕空间：如 [3]，正常地渲染场景后，以后处理形式过滤深度和法线信息，判断相邻像素的深度和法线差异，超过阈值的当作是轮廓线，然后再把这个「edge detection」的图象结果在屏幕空间扩展。优点是可以处理法线变化大但深度变化不大的线条。坏处是阈值不好设，而且所有物体的轮廓线颜色必须相同。好处是性能上与场景复杂度无关（只与分辨率相关），而且容易加入现有的渲染管道内。&br&&img src=&/a5fad3de339b054f8c9d7ee_b.png& data-rawwidth=&575& data-rawheight=&528& class=&origin_image zh-lightbox-thumb& width=&575& data-original=&/a5fad3de339b054f8c9d7ee_r.png&&&br&&/li&&/ol&这些都是比较老的技术，在 RTR3 [4] 里都有提及到。较新的硬件应该可以在 geometry shader 直接生成轮廓线，做到更多的判断，并减少顶点数目及填充率。等其他人补充。&br&&br&[1] Gooch, Bruce, et al. &Interactive technical illustration.& Proceedings of the 1999 symposium on Interactive 3D graphics. ACM, 1999. &a href=&///?target=https%3A//www.cs.utah.edu/%7Eshirley/papers/ITI/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Interactive Technical Illustration&i class=&icon-external&&&/i&&/a&&br&[2] Hart, Evan, Dave Gosselin, and John Isidoro. &Vertex shading with direct3d and opengl.& &i&Game Developers Conference&/i&. Vol. 207. 2001.&br&[3] Mitchell, Jason L., Chris Brennan, and Drew Card. &Real-time image-space outlining for non-photorealistic rendering.& &i&ACM SIGGRAPH 2002 conference abstracts and applications&/i&. ACM, 2002.&br&[4] Haines, Eric, and Tomas Akenine-Moller. &Real-time rendering.& (2002).
这类技术通常称作轮廓渲染（silhouette rendering）。 传统的做法主要分开 3 类： 材质着色：如用 pixel shader 或环景贴图 [1] 检测屏幕空间的法线方向来决定是否接近边缘。这只适合曲面为主的物体，不能细致地控制轮廓的粗幼。其实和 rim light 是相似的…
我以前做过一个解谜游戏 让老婆解完了就知道生日礼物在哪里&br&后来被老婆打了一顿 就直接给了
我以前做过一个解谜游戏 让老婆解完了就知道生日礼物在哪里 后来被老婆打了一顿 就直接给了
按照以往的经验，Source2或将会是Source系列最后一代游戏引擎。
按照以往的经验，Source2或将会是Source系列最后一代游戏引擎。
&p&作为一个白天整Unity，晚上学习UE4
KlayGE等引擎的业余选手路过(其实我还弄过cocos2d-x，不过这玩意儿对我来说都是毫无收获的记忆...从 &a class=&member_mention& href=&///people/0b21747b1fec79ad8af7e68a2b1ff681& data-hash=&0b21747b1fec79ad8af7e68a2b1ff681& data-hovercard=&p$b$0b21747b1fec79ad8af7e68a2b1ff681&&@叛逆者&/a& 龚大那边学到了非常多东西，咳咳顺便打个小广告)&/p&&p&&br&&/p&&p&其实很多点都是前面的大大都提到了，从我最大的感受来说：两个引擎的定位就不一样。&/p&&p&&b&Unity是一个更加侧重于通用的引擎，UE4是一个更加偏重于真实感 FPS类的引擎。Unity更多侧重的是灵活性，小团队爱咋整咋整；UE4有一套成熟的方法链和工作流，你在它的架子里干的很爽但是想自己倒腾点东西就比较麻烦。&/b&&/p&&p&ps. 我之前写过一段时间UE4的Plugin，那个C++ Hot Load完全无效...我猜测是因为启动引擎的时候就handler注册进去了，最后导致我改一点就要重启一下Editor。Unity用C#写Plugin就非常的爽，它那套序列化机制能基本满足我所有的需求(对我这里就不吐槽UE4的编译速度了...毕竟我穷)&/p&&p&&br&&/p&&p&就题目所说的『渲染』哪家强，这里先提一个容易误解的地方是：&b&一个引擎的效果，一方面是这个引擎能提供的功能，也就是上限；另一方面是对应的美术资源的质量，也就是下限。&/b&很多时候容易把美术资源的质量与引擎的效果等价了，这样就容易沦为比较纯画面比较党了...&/p&&p&举个栗子: 以前菊总做了一个3D场景，然后有人问这个效果图里的GI这么牛逼，啥引擎整的？菊总表示我只不过是打了很多的点光源补光而已hhhh&/p&&p&&br&&/p&&p&ok回到题目，纯粹功能上来说，其实这两家的覆盖都差不多，该有的都有。之前我试过把UE4的模型、贴图、shader和GI搞到Unity里，其实是能复现的七七八八(这里没考虑后处理)&/p&&img src=&/v2-deaa4c9b5a026f47d91005f_b.jpg& data-rawwidth=&926& data-rawheight=&861& class=&origin_image zh-lightbox-thumb& width=&926& data-original=&/v2-deaa4c9b5a026f47d91005f_r.jpg&&&p&所以结论是只要你足够蛋疼哦不肯下功夫，都可以搞；但是说实话，很多细节处理上我发现Unity是被碾压了...当然了Unity确实也在飞速追赶，包括但不限于(其实里面有些东西Unity已经实现了，但是我试了下还是存在一定的差距...)&/p&&ul&&li&linear colorspace&/li&&li&signed distance shadow&/li&&li&PBR相关的，譬如物理光照强度、一些BRDF模型等&/li&&li&post process stack (github上Unity官方放出来那个我看了，但还是推荐看一下UE4有一个叫Next-gen Mobile Rendering的分享)&/li&&/ul&&p&很多细节累计起来就造成了不少的差距...&/p&&p&ps. 还有一点想吐槽的是，UE4的门槛高一些，而且流程相对固定；而U3D的易上手+灵活导致一些开发者会滥用，然后把锅甩给引擎。那个，我再举个栗子就是譬如什么泰坦什么陨落什么6...可以参考挖坑不填的 &a class=&member_mention& href=&///people/0effe9e423faad125fa9c6a& data-hash=&0effe9e423fa