&img src=&/50/v2-6cbbf11aeff6a1d6f2da73e3ee264ead_b.jpg& data-rawwidth=&1000& data-rawheight=&272& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&/50/v2-6cbbf11aeff6a1d6f2da73e3ee264ead_r.jpg&&&p&AR这一领域也是炒得火热，特别是有传言说苹果将很快进入这块市场，和微软、谷歌等对手展开激烈竞争。&/p&&p&技术顾问Digi-Capital认为，到2021年，AR和VR的总和市场可能会达到1080亿美元。2016年是AR的关键一年，新的设备、重大收购事件、消费者和企业的大量采用等等等等。&/p&&p&Super Ventures公司整理了AR创业公司的情况，并提出了AR硬件和软件的6个机会区域，这些领域内的投资金额也可能会产生很大的影响。&/p&&p&AR生态系统是很复杂的，具有多种设备类别、输入和输出、交互工具、内容创建以及平台解决方案和应用程序。Super Ventures的创始合伙人Tom Emrich表示，他的公司在过去一年里已经与600多家AR公司进行了会面、对比。以下是Super Ventures公司对AR投资机会的看法。&/p&&img src=&/50/v2-df2ad59f620c400bda52_b.jpg& data-rawwidth=&1051& data-rawheight=&688& class=&origin_image zh-lightbox-thumb& width=&1051& data-original=&/50/v2-df2ad59f620c400bda52_r.jpg&&&h2&&b&仿生视力&/b&&/h2&&p&Tom表示，为了使AR能够满足广泛市场，消费者需要的硬件是能够握在手里或戴在脸上的。虽然类似于Pokemon Go中的AR应用是能结合在当下的智能手机上，但真正的AR和MR（混合现实，将现实世界与计算机生成的动画混合）需要特定的硬件设备。&/p&&p&Tom说：“AR能做到让图形信息与自然视觉无法区分。为了实现这一点，需要在光场、视网膜投影、照片级逼真渲染、可调重点、自然聚光、等方面得到提高。”&/p&&p&但仿生视觉面临的挑战不仅仅是显示问题。电池寿命、连接性、多传感器融合、触觉和音频是硬件加速器可以考虑的很好的机会。&/p&&br&&h2&&b&自然输入/输出和互动&/b&&/h2&&p&AR不仅仅是增强我们的视力。&/p&&p&Tom说：“我们用所有的感觉来看到这个现实，从声音到触摸，甚至我们的情绪反应。为了做到真正的身临其境，数字解决方案将人体经验的这些方面带入组合中，以便于虚拟内容交互，就像现实世界一样重要。”&/p&&p&诸如眼睛跟踪，手势识别和声音之类的新的输入方式将技术移至触摸屏之外，以提供与增强世界进行交互的更自然的手段。同时，需要触觉、增强的音频和情感技术解决方案，使虚拟感觉变得更真实。&/p&&img src=&/50/v2-2fe42c53da2ed23f24d51da4d3e04af6_b.jpg& data-rawwidth=&894& data-rawheight=&637& class=&origin_image zh-lightbox-thumb& width=&894& data-original=&/50/v2-2fe42c53da2ed23f24d51da4d3e04af6_r.jpg&&&h2&&b&真实世界的三维化&/b&&/h2&&p&这一波真正的转变是从2D到3D的计算转变。这需要可以扫描、捕获、跟踪和识别3D世界的解决方案。&/p&&p&但是，Tom表示，扫描和跟踪地点、对象或人员，这些都是非常具有挑战性的，特别是在大规模的情况下。并且需要映射世界，创建点云，开发人员可以使用它来跟踪用户的位置并用AR内容覆盖周围环境。装备电脑不仅能够“看到”周围的世界，而且能成为AR的关键组成部分，并提供广泛的机会。&/p&&br&&h2&&b&构建世界&/b&&/h2&&p&Tom说，通过计算机能够跟踪和识别我们周围的现实世界，开发人员和设计师将拥有开始个性化、塑造和扩充虚拟层所需的基础，也就是创建一个虚拟层。&/p&&p&这将需要一套新的工具，可以快速捕捉和修改来自现实世界的内容，以及直观地创造新内容。内容创建和创作工具、测量和优化用户体验的工具，以及管理3D内容团队成员之间的版本控制、质量保证、优化工作流程的解决方案等等只是AR内容创造者一小部分的机会。&/p&&img src=&/50/v2-92d6123f1fad76c4e9ea_b.jpg& data-rawwidth=&1024& data-rawheight=&664& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/50/v2-92d6123f1fad76c4e9ea_r.jpg&&&h2&&b&远程呈现&/b&&/h2&&p&Tom表示，每一波计算都会遵循最后的模式，所以如果我们要从Web和移动时代获取线索，我们可以预计AR的杀手级应用程序之一将是通信和协作。&/p&&p&沉浸式的沟通、大规模的社交体验和与住在偏远地区的人的沟通，让他们就像在同一个房间里沟通一样，只是我们可以期待AR所带来的一部分机会。该技术具有独特的定位，提供真正的远程呈现，让距离不再是亲朋好友之间聊天的障碍，让工作伙伴在重要项目上进行协作，甚至对现场关键问题进行故障排除。&/p&&br&&h2&&b&超级智力&/b&&/h2&&p&技术一直是能增强我们的能力。Tom说：“AR会把它带到极限，在我们的视野中透明的计算能力，员工培训可以在第一天变成专业人士。而且，我们可以在无需盯着屏幕、无需登录的情况下获取互联网上的全部知识。”&/p&&p&这部分从AR分离出来的企业已经很成熟了，这有利于使工作流程高效和安全，而且工作人员更有生产力，特别是现在设备达到了更加实惠的价位。实现知识共享的解决方案，特定行业的实用工作，比如建筑、石油、采矿或零售，甚至工作场所的生产力工具，都是现在投资的巨大机会。&/p&&br&&br&&p&&strong&关注&a href=&/people/52e5d162ad14a515efba& data-hash=&52e5d162ad14a515efba& class=&member_mention& data-hovercard=&p$b$52e5d162ad14a515efba&&@硅谷密探&/a&&/strong&&/p&&p&&strong&紧盯全球创新趋势&/strong&&/p&
AR这一领域也是炒得火热，特别是有传言说苹果将很快进入这块市场，和微软、谷歌等对手展开激烈竞争。技术顾问Digi-Capital认为，到2021年，AR和VR的总和市场可能会达到1080亿美元。2016年是AR的关键一年，新的设备、重大收购事件、消费者和企业的大量采用等…
&p&好的。大家都是程序员。绝大多数答题的都是第一类程序员。他们是程序员中的娱乐圈。&/p&&p&Android/IOS/Web/u3d/php ：不需要数学。同学们只要学会灵活使用stack overflow就可以了&/p&&p&控制领域：复变函数，状态空间（目前使用最有效的控制四轴方案），概率模型，卡尔曼滤波（对输入变量进行检测控制）&/p&&p&通信领域：复变函数，随机过程（信号传输，检测），泛函分析，高阶分析方法（小波分析，希尔伯特分析，STFT分析，自相关分析），信息论（编解码.压缩.）&/p&&p&图像图形领域：这一领域如果仅仅是开发应用层，并不会接触过于深入的数学。但如果涉及到研发算法，必然会包含：计算机图形学，拓扑学，基础微积分（用于体渲染计算，光照计算等），特征检测，二维卷积，滤波。图像在运用于医学方面对于数学的要求会更高。&/p&&p&人工智能：组合数学&离散数学（传统的各种棋盘格子，树，搜索），连续模型包含概率理论统计理论（马尔科夫模型，maximal likelihood estimation，置信网络..）如果考虑到所谓无人车之类的必然会涉及到控制领域，图像领域这就更多了&/p&&p&大数据：非常强的高等代数和矩阵计算（聚类，分类，投影...) 统计学&/p&&p&模式识别：这是一门综合分类。实际上包含信号处理，图像处理，人工智能算法等。模式识别需要的数学会是上述领域最高的。&/p&&p&以上都是本人接触过的东西。不过事实上绝大多数程序员都是属于第一类，本人在第一类的开发中也有一定的基础。这一类的开发最重要的是实现某一功能，一共可以分9步完成。具体步骤为：&/p&&p&1.需要实现某一功能&/p&&p&2.google&/p&&p&3.复制&/p&&p&4.粘贴&/p&&p&5.改一改&/p&&p&6.运行&/p&&p&7.哇，有一个bug&/p&&p&8.修掉&/p&&p&9.通过了耶&/p&&p&你看，并不需要数学。&/p&
好的。大家都是程序员。绝大多数答题的都是第一类程序员。他们是程序员中的娱乐圈。Android/IOS/Web/u3d/php ：不需要数学。同学们只要学会灵活使用stack overflow就可以了控制领域：复变函数，状态空间（目前使用最有效的控制四轴方案），概率模型，卡尔曼…
&p&上图是最有用的，这里随便往场景里放了几个模型，这是最初始的效果。&/p&&img src=&/v2-e678dcabcaaa5_b.png& data-rawwidth=&1056& data-rawheight=&595& class=&origin_image zh-lightbox-thumb& width=&1056& data-original=&/v2-e678dcabcaaa5_r.png&&&p&&b&添加环境光&/b&&/p&&p&打开 Windows-&Lighting，在Environment Lighting 里设置Skybox为Default-skybox，unity5应该是默认设好了的，设置之后效果如下：&/p&&img src=&/v2-e05f5dd807d549a229087fce5f0660d1_b.jpg& data-rawwidth=&1049& data-rawheight=&620& class=&origin_image zh-lightbox-thumb& width=&1049& data-original=&/v2-e05f5dd807d549a229087fce5f0660d1_r.jpg&&&p&&b&添加SSAO特效&/b&&/p&&p&Unity自带了一个SSAO特效，导入特效：Assets-&Import Package-&Effects。导入了之后，在相机上添加脚本Screen Space Ambient Occlusion。我这里故意把效果弄得比较强烈，可以看到物体的底边出现了一些黑色的阴影。&/p&&img src=&/v2-ab58af6cdde6cd54be0d51_b.jpg& data-rawwidth=&1051& data-rawheight=&637& class=&origin_image zh-lightbox-thumb& width=&1051& data-original=&/v2-ab58af6cdde6cd54be0d51_r.jpg&&&p&&b&添加软阴影&/b&&/p&&p&如果对上述特效不满意的可以继续用Unity自带的烘培系统进行场景的烘培。首先把所有参与烘培渲染的物品设置为Static(至少是Lighting的Static)。&/p&&img src=&/v2-418fba15e2fef16_b.jpg& data-rawwidth=&812& data-rawheight=&278& class=&origin_image zh-lightbox-thumb& width=&812& data-original=&/v2-418fba15e2fef16_r.jpg&&&p&为所有参与烘培渲染的模型添加Lightmap UV。这里我给狼的模型添加了Lightmap UV。&/p&&img src=&/v2-e44c73f44e98f956fd25fc7_b.jpg& data-rawwidth=&416& data-rawheight=&990& class=&content_image& width=&416&&&p&同时我把主光源（一个Directional Light）设置为Baked（也可以设为Mixed），让灯光使用烘培效果。然后把Shadow Type设置为Soft Shadow，并调节Baked Shadow Angle，让灯光投射出软阴影。&/p&&p&在Windows-&Lighting的窗口中，打开Baked GI选项，其中的各种系数这里就不详细解释了，可以参考官网文档。&/p&&img src=&/v2-cdfee47fabef6_b.jpg& data-rawwidth=&811& data-rawheight=&971& class=&origin_image zh-lightbox-thumb& width=&811& data-original=&/v2-cdfee47fabef6_r.jpg&&&p&设置完毕后，点击Lighting最底下的Build，进行灯光的烘培。这时候会右下方会有个进度条，提示烘培的进度。进度条读完（通常需要几分钟）之后，可以看到场景已经出现软阴影了。&/p&&img src=&/v2-ee4af97d_b.jpg& data-rawwidth=&1025& data-rawheight=&591& class=&origin_image zh-lightbox-thumb& width=&1025& data-original=&/v2-ee4af97d_r.jpg&&&p&用三点打光法做出更加柔和的灯光。&/p&&img src=&/v2-98da65af62aa9bdca83c_b.jpg& data-rawwidth=&1056& data-rawheight=&589& class=&origin_image zh-lightbox-thumb& width=&1056& data-original=&/v2-98da65af62aa9bdca83c_r.jpg&&&p&&b&阴影分辨率&/b&&/p&&p&顺便提一下，实时渲染（非烘焙）的阴影有时候会出现分辨率太低的问题。这可以把Edit-&Project Settings-&Quality 窗口中的Shadow Distance 来进行调节（调低能够提高分辨率，但是会减少阴影渲染的范围）。&/p&&img src=&/v2-fcdd07fbad2b0c9a0fa566_b.jpg& data-rawwidth=&1916& data-rawheight=&1040& class=&origin_image zh-lightbox-thumb& width=&1916& data-original=&/v2-fcdd07fbad2b0c9a0fa566_r.jpg&&
上图是最有用的，这里随便往场景里放了几个模型，这是最初始的效果。添加环境光打开 Windows-&Lighting，在Environment Lighting 里设置Skybox为Default-skybox，unity5应该是默认设好了的，设置之后效果如下：添加SSAO特效Unity自带了一个SSAO特效，导入特…
&img src=&/50/v2-b215b3f8eb880ad77e081b7ffd685a9e_b.jpg& data-rawwidth=&592& data-rawheight=&332& class=&origin_image zh-lightbox-thumb& width=&592& data-original=&/50/v2-b215b3f8eb880ad77e081b7ffd685a9e_r.jpg&&&h2&写在前面&/h2&&p&最近闲来无事, 因此给自己开了个新坑 - 为一款科幻风格的塔防游戏Hacker F-301(骇客F-301)编写着色器特效. 在这个过程中有了一些心得体会, 因此打算写出来分享. 希望大家多提宝贵意见, 不吝斧正.&/p&&br&&h2&Topics&/h2&&p&本文将介绍如下几种特效:&/p&&li&Inking (模型描边)&/li&&li&Hologram (模型的全息图)&/li&&li&See - Through (渲染出物体被遮挡的部分, 类似于穿墙透视效果 - 屏幕后期特效)&/li&&li&Force Field (力场护盾效果)&/li&&li&Video Glitch (模拟LCD显示屏受到电子干扰的效果 - 屏幕后期特效. &/li&&br&&h2&Inking (模型描边, Outline)&/h2&&p&何为Inking? &/p&&p&Inking是附加在&b&蒙皮网格&/b&上的模型特效, 它用比较细的灰黑色的线条&b&勾勒出网格的轮廓&/b&. 这样做的好处是能够从背景更加&b&清晰&/b&&b&地勾画&/b&出这个网格, 尤其是在&b&对比度&/b&比较低的区域中. Inking特效的应用场景特别多, 大家耳熟能详的&b&&u&LOL&/u&&/b&中就出现了它的踪影:&br&&/p&&img src=&/v2-41bc0ba2a1fc6c29d5fc4c_b.jpg& data-rawwidth=&425& data-rawheight=&407& class=&origin_image zh-lightbox-thumb& width=&425& data-original=&/v2-41bc0ba2a1fc6c29d5fc4c_r.jpg&&&img src=&/v2-608be38de54c5bb29c9e38_b.jpg& data-rawwidth=&425& data-rawheight=&407& class=&origin_image zh-lightbox-thumb& width=&425& data-original=&/v2-608be38de54c5bb29c9e38_r.jpg&&&p&上面的两张图来源于一篇对LOL渲染流程分析的博客[1]. 第一张图中是原图, 而第二张图是加入Inking特效后的结果. 我们看到, 加入Inking后, 所有的模型能够更容易地从背景中区分出来, 起到了&b&Bump Up&/b&的作用. 这个例子中使用了比较粗的Inking线条, 这样也增添了一分&b&漫画风格&/b&的质感.&/p&&br&&p&&b&Inking的实现方法(综述)&/b&&/p&&p&Inking的实现方法有很多种, 大体上可以分为操作点元和操作片元两大类. 视具体情况决定使用哪一种Inking:&br&&/p&&ul&&li&Fresnel(菲尼尔)方法 - 非常类似于Rim Lighting, 使用视线方向和点法线方向的点积来判断边缘, 并将边缘高亮化.&/li&&li&优点: 效率高; 不需要单独的Pass就可以实现; 几乎所有的平滑的边缘都会得到高亮效果; 甚至对透明和半透明物体也有效. 缺点: 无法控制Inking线条的粗细, 这是因为Fresnel方法是针对于模型法线和摄像机视线的, 从而导致其仅与每个表面的法线方向有关, 而与表面的深度信息无关.&/li&&/ul&&br&&img src=&/v2-79cb72d03ad_b.jpg& data-rawwidth=&236& data-rawheight=&294& class=&content_image& width=&236&&&br&&ul&&li&Mesh Doubling (复制网格) - 非常类似于卡通Toon特效. 需要一个单独的Pass来实现. 重新绘制一个将所有表面都沿着法线方向延展过的模型, 然后将正面剪裁掉. 这也是我采用的方案&/li&&li&优点: 效率高; 平台适应性好; 可以控制Inking的线条粗细. 缺点: 线条并不连续, 在平滑表面的表现虽然很好, 但是在锐利的表面上经常会出现断层; 只能绘制最外层轮廓, 而不对内部结构做任何处理.&br&&/li&&/ul&&br&&img src=&/v2-eb29dfdfed7b5_b.png& data-rawwidth=&800& data-rawheight=&398& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-eb29dfdfed7b5_r.png&&&br&&ul&&li&Edge Detection (边缘检测) - Unity自带的屏幕后期处理特效[2]. 使用Sobel Filter[3]进行描边的算法, 其基本原理是检测多个相邻的像素的深度差值, 使用一个3x3的采样块来对原图求卷积, 将深度信息差值比较大的部分过滤出来. LOL中的Inking使用的就是这个方法.&/li&&li&优点: 既可以用作屏幕后期特效, 又可以作为模型特效; 描边准确; 线条粗细可控. 缺点: 比上述两种方案都要昂贵得多, 但是其性能开销恒定, 与被处理的图像没有任何关系;&br&&/li&&/ul&&img src=&/v2-faf7f219e7562bb03be1_b.jpg& data-rawwidth=&550& data-rawheight=&290& class=&origin_image zh-lightbox-thumb& width=&550& data-original=&/v2-faf7f219e7562bb03be1_r.jpg&&&ul&&li&使用几何着色器 - 检验临近的多边形以确定邻边和夹角, 再单独构建轮廓的几何体.&/li&&li&优点: 目前为止最为精确的做法; 很容易控制线条的粗细. 缺点: 建议买一台给力点的工作站或服务器; 一般只能用于离线渲染;&/li&&/ul&&br&&p&&b&具体实现策略&/b&&/p&&p&采用了&b&Mesh Doubling (复制网格)&/b&的方法. 这里必须要解决的问题是线条的不连续性. 其思路是不严格地将表面沿着法线方向延展, 而是在标准化的&b&点元位置和法线方向之间取一个恰当的参数来做插值&/b&, 这样做的好处是表面在延展的过程中也会尽量向点元方向靠拢, 尽量地减少了新网格的&b&撕裂感&/b&.&br&&/p&&img src=&/equation?tex=P_%7Bnew%7D%3DP_%7Bold%7D%2B+L+%5Ctimes+W_%7Boutline%7D+%2F+D_%7Bcam%7D& alt=&P_{new}=P_{old}+ L \times W_{outline} / D_{cam}& eeimg=&1&&&br&&img src=&/equation?tex=L+%3D+Normalize%28MV_%7BIT%7D+%5Ctimes+lerp%28V%2C+N%2C+f%29%29& alt=&L = Normalize(MV_{IT} \times lerp(V, N, f))& eeimg=&1&&&br&&p&其中, L表示偏移向量; W表示轮廓线条粗细; D是物体和摄像机间的距离. V是标准化后的顶点坐标, 表示方向; N是顶点向量; f是插值参数.&br&&/p&&p&&img src=&/v2-3b1fd6c19fbe5e83e7cf493cac8d2709_b.png& data-rawwidth=&552& data-rawheight=&319& class=&origin_image zh-lightbox-thumb& width=&552& data-original=&/v2-3b1fd6c19fbe5e83e7cf493cac8d2709_r.png&&上图更加清晰地阐述了撕裂和不连续的情况. 如果不进行插值, 那么这种方法可以适用于球形等表面变化均匀且光滑的几何体, 但是对于立方体则无能为力.&br&&/p&&img src=&/v2-f83a2cf35fa780e47de52ede51916b15_b.png& data-rawwidth=&586& data-rawheight=&438& class=&origin_image zh-lightbox-thumb& width=&586& data-original=&/v2-f83a2cf35fa780e47de52ede51916b15_r.png&&&p&上图中的立方体的延展向量使用了参数0.032作为插值, 撕裂感便不复存在了.&/p&&p&这里给出Inking特效的核心程序代码(非常简短), 同时附上部分Implementation Notes:&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&vertexOutput&/span& &span class=&n&&vert&/span& &span class=&p&&(&/span& &span class=&n&&appdata_base&/span& &span class=&n&&v&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&vertexOutput&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span& &span class=&o&&=&/span& &span class=&n&&mul&/span& &span class=&p&&(&/span& &span class=&n&&UNITY_MATRIX_MVP&/span&&span class=&p&&,&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&);&/span&
&span class=&n&&float3&/span& &span class=&n&&dir&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span& &span class=&p&&);&/span&
&span class=&n&&float3&/span& &span class=&n&&dir2&/span& &span class=&o&&=&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&normal&/span&&span class=&p&&;&/span&
&span class=&n&&dir&/span& &span class=&o&&=&/span& &span class=&n&&lerp&/span& &span class=&p&&(&/span& &span class=&n&&dir&/span&&span class=&p&&,&/span& &span class=&n&&dir2&/span&&span class=&p&&,&/span& &span class=&n&&_Factor&/span& &span class=&p&&);&/span&
&span class=&n&&dir&/span& &span class=&o&&=&/span& &span class=&n&&mul&/span& &span class=&p&&(&/span& &span class=&p&&(&/span& &span class=&n&&float3x3&/span& &span class=&p&&)&/span& &span class=&n&&UNITY_MATRIX_IT_MV&/span&&span class=&p&&,&/span& &span class=&n&&dir&/span& &span class=&p&&);&/span&
&span class=&n&&float2&/span& &span class=&n&&offset&/span& &span class=&o&&=&/span& &span class=&n&&TransformViewToProjection&/span& &span class=&p&&(&/span& &span class=&n&&dir&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&p&&);&/span&
&span class=&n&&offset&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span& &span class=&p&&(&/span& &span class=&n&&offset&/span& &span class=&p&&);&/span&
&span class=&k&&float&/span& &span class=&n&&dist&/span& &span class=&o&&=&/span& &span class=&n&&distance&/span& &span class=&p&&(&/span& &span class=&n&&mul&/span& &span class=&p&&(&/span& &span class=&n&&UNITY_MATRIX_M&/span&&span class=&p&&,&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&),&/span& &span class=&n&&_WorldSpaceCameraPos&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+=&/span& &span class=&n&&offset&/span& &span class=&o&&*&/span& &span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span&&span class=&p&&.&/span&&span class=&n&&z&/span& &span class=&o&&*&/span& &span class=&n&&_OutlineWidth&/span& &span class=&o&&/&/span& &span class=&n&&dist&/span&&span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&_Factor即为插值参数. 变换法向量要注意使用Model View矩阵的转置逆矩阵. 为了保证最终的线条粗细维持世界坐标上的恒定, 而不随摄像机的移动发生改变, 因此延展的像素位置要除以摄像机距离. 最终片元着色器函数只需要一句return _C即可. 最后必须注意剪裁掉正面, 否则绘制出的不会是轮廓, 而是将模型包裹起来的保鲜膜
...&br&&/p&&img src=&/v2-004b561a1fdfeec2a482bd8b33c95804_b.png& data-rawwidth=&1366& data-rawheight=&853& class=&origin_image zh-lightbox-thumb& width=&1366& data-original=&/v2-004b561a1fdfeec2a482bd8b33c95804_r.png&&&img src=&/v2-1a8c4e105d9303abdc1918_b.png& data-rawwidth=&1366& data-rawheight=&853& class=&origin_image zh-lightbox-thumb& width=&1366& data-original=&/v2-1a8c4e105d9303abdc1918_r.png&&&br&&p&上面两张图是加入特效的前后对比. 我们看到使用Inking后炮塔能够更加&犀利&地从背景中呈现出来.&/p&&p&一定程度上, Inking有点类似于SSAO. 两者都是尝试在几何体的交界处加入更深层次的阴影以让画面更有对比度. 关于SSAO我的&a href=&/p/?refer=MeowShader& class=&internal&&知乎专栏第四篇&/a&有过介绍.&/p&&h2&Hologram (模型的全息图)&/h2&&p&何为Hologram? &/p&&p&全息图是一般以激光为光源, 将被摄物体记录为3D光场(Light Field)所构成的三维图像. 一般以干涉条纹的形式存在.&/p&&img src=&/v2-9f6ba038b041_b.jpg& data-rawwidth=&1276& data-rawheight=&1024& class=&origin_image zh-lightbox-thumb& width=&1276& data-original=&/v2-9f6ba038b041_r.jpg&&&img src=&/v2-9be6e19d1bb0e8ad15d49b3dff971a4e_b.jpg& data-rawwidth=&610& data-rawheight=&343& class=&origin_image zh-lightbox-thumb& width=&610& data-original=&/v2-9be6e19d1bb0e8ad15d49b3dff971a4e_r.jpg&&&p&上图中第一张图是全息投影仪的概念效果, 第二张图是质量效应(Mass Effect)中的特效.&/p&&p&Hologram一般可以用作单位建造的&b&预览效果&/b&&b&和&/b&&b&呈现结构&/b&的效果.&/p&&img src=&/v2-b215b3f8eb880ad77e081b7ffd685a9e_b.jpg& data-rawwidth=&592& data-rawheight=&332& class=&origin_image zh-lightbox-thumb& width=&592& data-original=&/v2-b215b3f8eb880ad77e081b7ffd685a9e_r.jpg&&&img src=&/v2-5f90e48e0f3d62dd0dac5_b.jpg& data-rawwidth=&785& data-rawheight=&393& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-5f90e48e0f3d62dd0dac5_r.jpg&&&h4&第一次尝试(Naive 方法)&/h4&&p&计算模型的每个片元的屏幕坐标, 然后对一个条纹状纹理采样即可. 为了防止单一的条纹过于无聊, 同时还引入了一个Noise Map来进行干扰. 代码如下:&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&v2f&/span& &span class=&n&&vert&/span& &span class=&p&&(&/span& &span class=&n&&appdata_base&/span& &span class=&n&&v&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&v2f&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span& &span class=&o&&=&/span& &span class=&n&&UnityObjectToClipPos&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&o&&=&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&texcoord&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span&&span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&screenPos&/span& &span class=&o&&=&/span& &span class=&n&&ComputeScreenPos&/span& &span class=&p&&(&/span& &span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&dist&/span& &span class=&o&&=&/span& &span class=&n&&distance&/span& &span class=&p&&(&/span& &span class=&n&&mul&/span& &span class=&p&&(&/span& &span class=&n&&UNITY_MATRIX_M&/span&&span class=&p&&,&/span& &span class=&n&&float4&/span& &span class=&p&&(&/span& &span class=&mf&&0.0&/span&&span class=&p&&,&/span& &span class=&mf&&0.0&/span&&span class=&p&&,&/span& &span class=&mf&&0.0&/span&&span class=&p&&,&/span& &span class=&mf&&0.0&/span& &span class=&p&&)&/span& &span class=&p&&),&/span& &span class=&n&&_WorldSpaceCameraPos&/span& &span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&n&&fixed4&/span& &span class=&n&&frag&/span& &span class=&p&&(&/span& &span class=&n&&v2f&/span& &span class=&n&&i&/span& &span class=&p&&)&/span& &span class=&o&&:&/span& &span class=&n&&COLOR&/span&
&span class=&p&&{&/span&
&span class=&n&&fixed4&/span& &span class=&n&&finalColor&/span&&span class=&p&&;&/span&
&span class=&n&&float2&/span& &span class=&n&&uvNormal&/span& &span class=&o&&=&/span& &span class=&n&&UnpackNormal&/span& &span class=&p&&(&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_NormalTex&/span&&span class=&p&&,&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&/&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&dist&/span&&span class=&p&&;&/span&
&span class=&n&&float2&/span& &span class=&n&&screenUV&/span& &span class=&o&&=&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&screenPos&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&/&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&screenPos&/span&&span class=&p&&.&/span&&span class=&n&&w&/span& &span class=&o&&+&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&n&&_TilingX&/span& &span class=&o&&*&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&,&/span& &span class=&n&&_TilingY&/span& &span class=&o&&*&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&dist&/span& &span class=&o&&*&/span& &span class=&n&&_Distance&/span&&span class=&p&&;&/span&
&span class=&n&&fixed3&/span& &span class=&n&&color&/span& &span class=&o&&=&/span& &span class=&n&&_Color&/span& &span class=&o&&*&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_MainTex&/span&&span class=&p&&,&/span& &span class=&n&&screenUV&/span& &span class=&o&&+&/span& &span class=&n&&uvNormal&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_Emission&/span&&span class=&p&&;&/span&
&span class=&k&&fixed&/span& &span class=&n&&alpha&/span& &span class=&o&&=&/span& &span class=&n&&_Color&/span&&span class=&p&&.&/span&&span class=&n&&a&/span& &span class=&o&&*&/span& &span class=&n&&max&/span& &span class=&p&&(&/span& &span class=&n&&min&/span& &span class=&p&&(&/span& &span class=&n&&color&/span&&span class=&p&&.&/span&&span class=&n&&r&/span&&span class=&p&&,&/span& &span class=&n&&color&/span&&span class=&p&&.&/span&&span class=&n&&g&/span& &span class=&p&&),&/span& &span class=&n&&color&/span&&span class=&p&&.&/span&&span class=&n&&b&/span& &span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&n&&fixed4&/span& &span class=&p&&(&/span& &span class=&n&&color&/span&&span class=&p&&,&/span& &span class=&n&&alpha&/span& &span class=&p&&);&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&得到的结果自然也是Naive的
:&br&&/p&&img src=&/v2-2f683f9d230dfe9ad867ad_b.jpg& data-rawwidth=&300& data-rawheight=&252& class=&content_image& width=&300&&&p&对比上面的两张效果图, 我们发现一个问题: 虽然当前的这个Hologram特效能够显示出干涉条纹, 但是整个物体的深度和法线信息全部丢失, 给人以一种乱糟糟的线条感.&/p&&br&&h4&第二次尝试(将深度和法线信息纳入考量)&/h4&&p&仔细观察前面的两张效果图, 我们看到dot(viewDirection, normalDirection)(以下简称为点积)越大则越昏暗. 为了让整个特效更加有层次感, 我选择的方案是分别计算点积大的区域和点积小的区域来的颜色信息. 同时我更新了对干涉条纹的计算方法: 为了防止整个全息图特效的颜色过淡, 先给予一个统一的强度_Strength, 然后再加上对干涉条纹的采样值.&/p&&img src=&/equation?tex=%5Calpha+%3D+F_%7Bsoft%7D+%5Ctimes+%28Z_%7Bscene%7D+-+Z_%7Bobject%7D%29%0A& alt=&\alpha = F_{soft} \times (Z_{scene} - Z_{object})
& eeimg=&1&&&br&&img src=&/equation?tex=S_%7Bedge%7D+%3D+%281+-+abs%28N+%5Ccdot+V%29%29+%5E+%7BI_%7Bedge%7D%7D+%5Ctimes+M_%7Bedge%7D& alt=&S_{edge} = (1 - abs(N \cdot V)) ^ {I_{edge}} \times M_{edge}& eeimg=&1&&&br&&img src=&/equation?tex=S_%7Bsurf%7D+%3D+%28abs%28N+%5Ccdot+V%29%29+%5E+%7BI_%7Bsurf%7D%7D+%5Ctimes+M_%7Bsurf%7D& alt=&S_{surf} = (abs(N \cdot V)) ^ {I_{surf}} \times M_{surf}& eeimg=&1&&&br&&img src=&/equation?tex=C_%7Bhologram%7D+%3D+tex%28T_%7Bmain%7D%2C+wcoord+%2B+UV_%7Btime%7D%29& alt=&C_{hologram} = tex(T_{main}, wcoord + UV_{time})& eeimg=&1&&&br&&img src=&/equation?tex=C+%3D+%5Calpha+%2A+%28S_%7Bedge%7D+%2B+S_%7Bsurf%7D%29+%2A+%28C_%7Bnormal%7D+%2B+C_%7Bhologram%7D%29& alt=&C = \alpha * (S_{edge} + S_{surf}) * (C_{normal} + C_{hologram})& eeimg=&1&&&br&&p&得到的结果如下: &/p&&img src=&/v2-cb1b5d00f32e124d2b6269_b.jpg& data-rawwidth=&300& data-rawheight=&252& class=&content_image& width=&300&&&br&&p&着色器代码如下: &/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&v2f&/span& &span class=&n&&vert&/span& &span class=&p&&(&/span& &span class=&n&&appdata_base&/span& &span class=&n&&v&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&v2f&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span& &span class=&o&&=&/span& &span class=&n&&UnityObjectToClipPos&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&projPos&/span& &span class=&o&&=&/span& &span class=&n&&ComputeScreenPos&/span& &span class=&p&&(&/span& &span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&o&&=&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&texcoord&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span&&span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&normalDir&/span& &span class=&o&&=&/span& &span class=&n&&UnityObjectToWorldNormal&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&normal&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&posWorld&/span& &span class=&o&&=&/span& &span class=&n&&mul&/span& &span class=&p&&(&/span& &span class=&n&&UNITY_MATRIX_M&/span&&span class=&p&&,&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&n&&fixed4&/span& &span class=&n&&frag&/span& &span class=&p&&(&/span& &span class=&n&&v2f&/span& &span class=&n&&i&/span& &span class=&p&&)&/span& &span class=&o&&:&/span& &span class=&n&&COLOR&/span&
&span class=&p&&{&/span&
&span class=&k&&fixed&/span& &span class=&n&&alpha&/span& &span class=&o&&=&/span& &span class=&mi&&1&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&sceneZ&/span& &span class=&o&&=&/span& &span class=&n&&LinearEyeDepth&/span& &span class=&p&&(&/span& &span class=&n&&SAMPLE_DEPTH_TEXTURE_PROJ&/span& &span class=&p&&(&/span& &span class=&n&&_CameraDepthTexture&/span&&span class=&p&&,&/span& &span class=&n&&UNITY_PROJ_COORD&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&projPos&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&k&&float&/span& &span class=&n&&partZ&/span& &span class=&o&&=&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&projPos&/span&&span class=&p&&.&/span&&span class=&n&&z&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&fade&/span& &span class=&o&&=&/span& &span class=&n&&saturate&/span& &span class=&p&&(&/span& &span class=&n&&_InvFade&/span& &span class=&o&&*&/span& &span class=&p&&(&/span& &span class=&n&&sceneZ&/span& &span class=&o&&-&/span& &span class=&n&&partZ&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&n&&alpha&/span& &span class=&o&&*=&/span& &span class=&n&&fade&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&viewDirection&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span& &span class=&p&&(&/span& &span class=&n&&_WorldSpaceCameraPos&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span& &span class=&o&&-&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&posWorld&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span& &span class=&p&&);&/span&
&span class=&n&&float4&/span& &span class=&n&&objectOrigin&/span& &span class=&o&&=&/span& &span class=&n&&mul&/span& &span class=&p&&(&/span& &span class=&n&&unity_ObjectToWorld&/span&&span class=&p&&,&/span& &span class=&n&&float4&/span& &span class=&p&&(&/span& &span class=&mf&&0.0&/span&&span class=&p&&,&/span& &span class=&mf&&0.0&/span&&span class=&p&&,&/span& &span class=&mf&&0.0&/span&&span class=&p&&,&/span& &span class=&mf&&1.0&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&k&&float&/span& &span class=&n&&dist&/span& &span class=&o&&=&/span& &span class=&n&&distance&/span& &span class=&p&&(&/span& &span class=&n&&_WorldSpaceCameraPos&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span&&span class=&p&&,&/span& &span class=&n&&objectOrigin&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span& &span class=&p&&);&/span&
&span class=&n&&float2&/span& &span class=&n&&wcoord&/span& &span class=&o&&=&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&projPos&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&/&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&projPos&/span&&span class=&p&&.&/span&&span class=&n&&w&/span&&span class=&p&&;&/span&
&span class=&n&&wcoord&/span&&span class=&p&&.&/span&&span class=&n&&x&/span& &span class=&o&&*=&/span& &span class=&n&&_Inter&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&;&/span&
&span class=&n&&wcoord&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&o&&*=&/span& &span class=&n&&_Inter&/span&&span class=&p&&.&/span&&span class=&n&&z&/span&&span class=&p&&;&/span&
&span class=&n&&wcoord&/span& &span class=&o&&*=&/span& &span class=&n&&dist&/span& &span class=&o&&*&/span& &span class=&n&&_Inter&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&nMask&/span& &span class=&o&&=&/span& &span class=&n&&_Strength&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&hMask&/span& &span class=&o&&=&/span& &span class=&n&&tex2D&/span&&span class=&p&&(&/span& &span class=&n&&_MainTex&/span&&span class=&p&&,&/span& &span class=&n&&wcoord&/span& &span class=&o&&+&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&mo&&0&/span&&span class=&p&&,&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&x&/span& &span class=&o&&*&/span& &span class=&n&&_Inter&/span&&span class=&p&&.&/span&&span class=&n&&w&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&k&&float&/span& &span class=&n&&fresnel&/span& &span class=&o&&=&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&n&&abs&/span& &span class=&p&&(&/span& &span class=&n&&dot&/span& &span class=&p&&(&/span& &span class=&n&&viewDirection&/span&&span class=&p&&,&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&normalDir&/span& &span class=&p&&)&/span& &span class=&p&&),&/span& &span class=&n&&_FresPow&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_FresMult&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&bLayer&/span& &span class=&o&&=&/span& &span class=&n&&lerp&/span& &span class=&p&&(&/span& &span class=&n&&_bLayerColorA&/span&&span class=&p&&,&/span& &span class=&n&&_bLayerColorB&/span&&span class=&p&&,&/span& &span class=&n&&fresnel&/span& &span class=&p&&);&/span&
&span class=&k&&float&/span& &span class=&n&&fresnelOut&/span& &span class=&o&&=&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&mi&&1&/span& &span class=&o&&-&/span& &span class=&n&&abs&/span& &span class=&p&&(&/span& &span class=&n&&dot&/span& &span class=&p&&(&/span& &span class=&n&&viewDirection&/span&&span class=&p&&,&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&normalDir&/span& &span class=&p&&)&/span& &span class=&p&&),&/span& &span class=&n&&_FresPowOut&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_FresMultOut&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&bLayerC&/span& &span class=&o&&=&/span& &span class=&n&&_bLayerColorC&/span& &span class=&o&&*&/span& &span class=&n&&fresnelOut&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&final&/span& &span class=&o&&=&/span& &span class=&n&&saturate&/span& &span class=&p&&(&/span& &span class=&p&&(&/span& &span class=&n&&hMask&/span& &span class=&o&&+&/span& &span class=&n&&nMask&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&p&&(&/span& &span class=&n&&bLayer&/span& &span class=&o&&+&/span& &span class=&n&&bLayerC&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&alpha&/span&&span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&float4&/span& &span class=&p&&(&/span& &span class=&n&&final&/span& &span class=&o&&*&/span& &span class=&n&&_Fade&/span&&span class=&p&&,&/span& &span class=&mi&&1&/span&&span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&&p&&b&See - Through(&/b&&b&透视特效&/b&&b&)&/b&&br&&/p&&p&何为透视特效? &/p&&img src=&/v2-e6b0b04fefcc3a_b.jpg& data-rawwidth=&473& data-rawheight=&473& class=&origin_image zh-lightbox-thumb& width=&473& data-original=&/v2-e6b0b04fefcc3a_r.jpg&&&p&游戏中总有一些非常重要的物体, 需要确保玩家在任何时候都能以某种方式看到. 比如Hitman系列中玩家可以使用这种透视的方式来知道敌人的位置以确定自己的战术. 而RTS类游戏(比如红色警戒3)中被遮挡的单位也会以另一种颜色被渲染出来, 防止玩家不知道其存在.&/p&&h4&如何实现透视特效&/h4&&p&将游戏物体分为两层: Occluder(遮挡)层和Behind(后面)层. 特效要实现的目标是将Behind层被Occluder层遮挡的部分渲染出来. 这里使用两个摄像机, 分别渲染两个层的深度信息, 得到两张Render Target(以下简称RT). 将所有Behind RT深度大于对应Occluder RT深度的部分以另一种方式渲染出来, 而不对其余部分做任何处理, 并将结果放到一个新的RT中. 最终画一个全屏幕的Quad, 将这个RT直接Apply即可.&/p&&p&为了增加渲染结果的层次感并反应被遮挡物体的结构, 渲染Behind层的摄像机可以同时渲染法线信息, 然后在渲染最终RT的时候将颜色强度与法线方向挂钩即可.&/p&&br&&p&以下是渲染结果:&/p&&img src=&/v2-b6bb46b4e7b93a18f6ba_b.jpg& data-rawwidth=&300& data-rawheight=&252& class=&content_image& width=&300&&&p&如何让Rendering Path为Forward的摄像机得到场景的深度和法线信息呢? 使用单独的着色器规定其渲染行为, 然后使用Camera.RenderWithShader即可.&/p&&br&&p&规定摄像机渲染方式的着色器:&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&k&&struct&/span& &span class=&n&&v2f&/span&
&span class=&p&&{&/span&
&span class=&n&&float4&/span& &span class=&n&&pos&/span& &span class=&o&&:&/span& &span class=&n&&POSITION&/span&&span class=&p&&;&/span&
&span class=&n&&float4&/span& &span class=&n&&nz&/span& &span class=&o&&:&/span& &span class=&n&&TEXCOORD0&/span&&span class=&p&&;&/span&
&span class=&p&&};&/span&
&span class=&n&&v2f&/span& &span class=&n&&vert&/span&&span class=&p&&(&/span& &span class=&n&&appdata_base&/span& &span class=&n&&v&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&v2f&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span& &span class=&o&&=&/span& &span class=&n&&mul&/span&&span class=&p&&(&/span& &span class=&n&&UNITY_MATRIX_MVP&/span&&span class=&p&&,&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&nz&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span& &span class=&o&&=&/span& &span class=&n&&COMPUTE_VIEW_NORMAL&/span&&span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&nz&/span&&span class=&p&&.&/span&&span class=&n&&w&/span& &span class=&o&&=&/span& &span class=&n&&COMPUTE_DEPTH_01&/span&&span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&n&&fixed4&/span& &span class=&n&&frag&/span&&span class=&p&&(&/span& &span class=&n&&v2f&/span& &span class=&n&&i&/span& &span class=&p&&)&/span& &span class=&o&&:&/span& &span class=&n&&COLOR&/span&
&span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&n&&EncodeDepthNormal&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&nz&/span&&span class=&p&&.&/span&&span class=&n&&w&/span&&span class=&p&&,&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&nz&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span& &span class=&p&&);&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&处理两张RT的着色器:&br&&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&v2f&/span& &span class=&n&&vert&/span& &span class=&p&&(&/span& &span class=&n&&appdata_img&/span& &span class=&n&&v&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&v2f&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span& &span class=&o&&=&/span& &span class=&n&&UnityObjectToClipPos&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&o&&=&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&texcoord&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span&&span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&n&&fixed4&/span& &span class=&n&&frag&/span& &span class=&p&&(&/span& &span class=&n&&v2f&/span& &span class=&n&&i&/span& &span class=&p&&)&/span& &span class=&o&&:&/span& &span class=&n&&COLOR&/span&
&span class=&p&&{&/span&
&span class=&k&&float&/span& &span class=&n&&behindDepth&/span&&span class=&p&&,&/span& &span class=&n&&occluderDepth&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&behindNormal&/span&&span class=&p&&,&/span& &span class=&n&&occluderNormal&/span&&span class=&p&&;&/span&
&span class=&n&&DecodeDepthNormal&/span& &span class=&p&&(&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_Behind&/span&&span class=&p&&,&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&p&&),&/span& &span class=&n&&behindDepth&/span&&span class=&p&&,&/span& &span class=&n&&behindNormal&/span& &span class=&p&&);&/span&
&span class=&n&&DecodeDepthNormal&/span& &span class=&p&&(&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_Occluder&/span&&span class=&p&&,&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&p&&),&/span& &span class=&n&&occluderDepth&/span&&span class=&p&&,&/span& &span class=&n&&occluderNormal&/span& &span class=&p&&);&/span&
&span class=&n&&fixed4&/span& &span class=&n&&scene&/span& &span class=&o&&=&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_MainTex&/span&&span class=&p&&,&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&p&&);&/span&
&span class=&n&&fixed4&/span& &span class=&n&&pattern&/span& &span class=&o&&=&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_PatternTex&/span&&span class=&p&&,&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&o&&+&/span& &span class=&n&&_SinTime&/span&&span class=&p&&.&/span&&span class=&n&&w&/span& &span class=&o&&/&/span& &span class=&mi&&100&/span& &span class=&p&&)&/span& &span class=&o&&/&/span& &span class=&n&&_PatternScale&/span& &span class=&p&&);&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&n&&behindDepth&/span& &span class=&o&&&&/span& &span class=&mo&&0&/span& &span class=&o&&&&&/span& &span class=&n&&occluderDepth&/span& &span class=&o&&&&/span& &span class=&mo&&0&/span& &span class=&o&&&&&/span& &span class=&n&&behindDepth&/span& &span class=&o&&&&/span& &span class=&n&&occluderDepth&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&float&/span& &span class=&n&&factor&/span& &span class=&o&&=&/span& &span class=&mf&&0.1&/span& &span class=&o&&+&/span& &span class=&mf&&0.9&/span& &span class=&o&&*&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&n&&max&/span& &span class=&p&&(&/span& &span class=&n&&dot&/span& &span class=&p&&(&/span& &span class=&n&&float3&/span& &span class=&p&&(&/span& &span class=&mo&&0&/span&&span class=&p&&,&/span& &span class=&mo&&0&/span&&span class=&p&&,&/span& &span class=&mi&&1&/span& &span class=&p&&),&/span& &span class=&n&&behindNormal&/span& &span class=&p&&),&/span& &span class=&mf&&0.0&/span& &span class=&p&&),&/span& &span class=&mf&&1.2&/span& &span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&n&&fixed4&/span& &span class=&p&&(&/span& &span class=&n&&lerp&/span& &span class=&p&&(&/span& &span class=&n&&scene&/span&&span class=&p&&,&/span& &span class=&n&&_Color&/span&&span class=&p&&,&/span& &span class=&n&&lerp&/span& &span class=&p&&(&/span& &span class=&n&&factor&/span&&span class=&p&&,&/span& &span class=&n&&factor&/span& &span class=&o&&*&/span& &span class=&n&&pattern&/span&&span class=&p&&.&/span&&span class=&n&&r&/span&&span class=&p&&,&/span& &span class=&n&&_PatternWeight&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span&
&span class=&k&&return&/span& &span class=&n&&scene&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&h4&一个小问题&/h4&&p&这个实现的方式开销有点大: 对于每一组Occluder层和Behind层, 都需要用两个摄像机单独渲染一次(虽然只需要深度和法线, 不需要计算光照), 然后做一次全屏幕的后期特效. 那么对于像红色警戒3这样的游戏, 总共有6个阵营的单位, 而每个阵营的单位被遮挡后都要被渲染为不同的颜色. 如果采用我的方法的话, 那就相当于要用7个(6 * Behind + 1 * Occluder)摄像机加6层后期特效, 显然在性能上是不可能的.&/p&&p&根据我的猜测, 红色警戒3应该是为每个单位额外附加了一个材质, 这个材质只有ZTest Fail的时候才会被渲染. 不知道这个猜测是否正确, 希望能与大家交流. &/p&&br&&h2&ForceField (护盾特效)&/h2&&p&何为ForceField?&br&&/p&&img src=&/v2-6c3a86e9ebf331458cdac46dc4bb0b73_b.jpg& data-rawwidth=&1280& data-rawheight=&720& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-6c3a86e9ebf331458cdac46dc4bb0b73_r.jpg&&&p&上图为TitanFall 2的截图. 图中泰坦的周围有一层半球形力场护盾. 如果有子弹打击都护盾上, 则对应被击中位置还会产生纹理上的变化, 并扭曲背景.&/p&&br&&p&我们注意到这个ForceField与其他物体相交的位置都有高亮的特效. 关于相交高亮(Intersection Highlight)我的&a href=&/p/?refer=MeowShader& class=&internal&&专栏第二篇文章&/a&有过介绍.&/p&&p&如何实现ForceField?&/p&&p&实现护盾本身并不难 --- 只需要一个半透明的材质就足够了. 难的是如果护盾被击中的话, 需要在被击中的位置产生变化.&/p&&p&为了解决这个问题, 我们必须将碰撞点的位置从世界坐标转换到模型坐标. 然后根据每个点元和碰撞点的距离来决定动态纹理的Alpha值即可.&/p&&img src=&/equation?tex=%5Calpha+%3D+A_%7Binit%7D+%2B+%5Csum_%7Bi+%3D+1%7D%5E%7Bn%7D%7Bx%7D++%5Cfrac+%7BDist_%7Bi%7D%7D+%7BDist_%7Bmax%7D%7D+%5Ctimes+B& alt=&\alpha = A_{init} + \sum_{i = 1}^{n}{x}
\frac {Dist_{i}} {Dist_{max}} \times B& eeimg=&1&&&br&&p&为了能够支持多个碰撞点, 可以在着色器中使用n个4*4矩阵以代表4 * n个碰撞点. 每个片元遍历一次所有的碰撞点信息即可. 护盾被击中以后, 其动态纹理的影响会随着时间逐渐减少, 因此动态纹理的Alpha也需要随着时间减弱(见下图).&/p&&img src=&/v2-c889ad3e120e7d45f8f0a7763fcb3001_b.jpg& data-rawwidth=&300& data-rawheight=&252& class=&content_image& width=&300&&&p&时间可以通过脚本或着色器来控制. 只需要注意时间非负即可.&/p&&p&以下是着色器代码:&br&&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&v2f&/span& &span class=&n&&vert&/span& &span class=&p&&(&/span& &span class=&n&&appdata_base&/span& &span class=&n&&v&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&v2f&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&o&&+=&/span& &span class=&n&&float4&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&normal&/span& &span class=&o&&*&/span& &span class=&n&&_MeshOffset&/span&&span class=&p&&,&/span& &span class=&mf&&0.0&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&pos&/span& &span class=&o&&=&/span& &span class=&n&&UnityObjectToClipPos&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&o&&=&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&texcoord&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&worldPosition&/span& &span class=&o&&=&/span& &span class=&n&&mul&/span& &span class=&p&&(&/span& &span class=&n&&UNITY_MATRIX_M&/span&&span class=&p&&,&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span& &span class=&p&&);&/span&
&span class=&n&&float3&/span& &span class=&n&&viewDirection&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span& &span class=&p&&(&/span& &span class=&n&&worldPosition&/span& &span class=&o&&-&/span& &span class=&n&&_WorldSpaceCameraPos&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&factor&/span& &span class=&o&&=&/span&
&span class=&p&&(&/span& &span class=&n&&dot&/span& &span class=&p&&(&/span& &span class=&n&&UnityObjectToWorldNormal&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&normal&/span& &span class=&p&&),&/span& &span class=&n&&viewDirection&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&k&&for&/span& &span class=&p&&(&/span& &span class=&k&&int&/span& &span class=&n&&ii&/span& &span class=&o&&=&/span& &span class=&mo&&0&/span&&span class=&p&&;&/span& &span class=&n&&ii&/span& &span class=&o&&&&/span& &span class=&mi&&4&/span&&span class=&p&&;&/span& &span class=&n&&ii&/span&&span class=&o&&++&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&dist&/span&&span class=&p&&[&/span& &span class=&n&&ii&/span& &span class=&p&&]&/span& &span class=&o&&=&/span& &span class=&n&&distance&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionPoints&/span&&span class=&p&&[&/span& &span class=&n&&ii&/span& &span class=&p&&].&/span&&span class=&n&&xyz&/span&&span class=&p&&,&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&vertex&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span& &span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&k&&return&/span& &span class=&n&&o&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&n&&fixed4&/span& &span class=&n&&frag&/span& &span class=&p&&(&/span& &span class=&n&&v2f&/span& &span class=&n&&i&/span& &span class=&p&&)&/span& &span class=&o&&:&/span& &span class=&n&&COLOR&/span&
&span class=&p&&{&/span&
&span class=&n&&fixed4&/span& &span class=&n&&finalColor&/span&&span class=&p&&;&/span&
&span class=&n&&float2&/span& &span class=&n&&uvNormal&/span& &span class=&o&&=&/span& &span class=&n&&UnpackNormal&/span& &span class=&p&&(&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_NormalTex&/span&&span class=&p&&,&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&o&&*&/span& &span class=&n&&_NormalScale&/span& &span class=&o&&+&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&n&&_TilingX&/span& &span class=&o&&*&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&,&/span& &span class=&n&&_TilingY&/span& &span class=&o&&*&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&n&&fixed3&/span& &span class=&n&&color&/span& &span class=&o&&=&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_MainTex&/span&&span class=&p&&,&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_MainScale&/span& &span class=&o&&+&/span& &span class=&n&&uvNormal&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_Color&/span& &span class=&o&&*&/span& &span class=&n&&_Emission&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&fallOff&/span& &span class=&o&&=&/span& &span class=&n&&saturate&/span& &span class=&p&&(&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&mf&&1.0&/span& &span class=&o&&-&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&factor&/span&&span class=&p&&,&/span& &span class=&n&&_FallOff&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&factor&/span&&span class=&p&&,&/span& &span class=&n&&_FallOff2&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&c1&&///Magic Number! &/span&
&span class=&k&&half&/span& &span class=&n&&alpha&/span& &span class=&o&&=&/span& &span class=&mf&&0.01&/span&&span class=&p&&;&/span&
&span class=&n&&alpha&/span& &span class=&o&&+=&/span& &span class=&n&&saturate&/span& &span class=&p&&(&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionTime&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&mf&&0.5&/span& &span class=&p&&)&/span& &span class=&o&&-&/span& &span class=&p&&(&/span& &span class=&k&&float&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&dist&/span&&span class=&p&&[&/span& &span class=&mo&&0&/span& &span class=&p&&]&/span& &span class=&p&&)&/span& &span class=&o&&/&/span& &span class=&n&&_MaxDistance&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_BrightnessCollision&/span& &span class=&o&&*&/span& &span class=&n&&max&/span& &span class=&p&&(&/span& &span class=&n&&sign&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionTime&/span&&span class=&p&&.&/span&&span class=&n&&x&/span& &span class=&p&&),&/span& &span class=&mf&&0.0&/span& &span class=&p&&);&/span&
&span class=&n&&alpha&/span& &span class=&o&&+=&/span& &span class=&n&&saturate&/span& &span class=&p&&(&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionTime&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&,&/span& &span class=&mf&&0.5&/span& &span class=&p&&)&/span& &span class=&o&&-&/span& &span class=&p&&(&/span& &span class=&k&&float&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&dist&/span&&span class=&p&&[&/span& &span class=&mi&&1&/span& &span class=&p&&]&/span& &span class=&p&&)&/span& &span class=&o&&/&/span& &span class=&n&&_MaxDistance&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_BrightnessCollision&/span& &span class=&o&&*&/span& &span class=&n&&max&/span& &span class=&p&&(&/span& &span class=&n&&sign&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionTime&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&p&&),&/span& &span class=&mf&&0.0&/span& &span class=&p&&);&/span&
&span class=&n&&alpha&/span& &span class=&o&&+=&/span& &span class=&n&&saturate&/span& &span class=&p&&(&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionTime&/span&&span class=&p&&.&/span&&span class=&n&&z&/span&&span class=&p&&,&/span& &span class=&mf&&0.5&/span& &span class=&p&&)&/span& &span class=&o&&-&/span& &span class=&p&&(&/span& &span class=&k&&float&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&dist&/span&&span class=&p&&[&/span& &span class=&mi&&2&/span& &span class=&p&&]&/span& &span class=&p&&)&/span& &span class=&o&&/&/span& &span class=&n&&_MaxDistance&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_BrightnessCollision&/span& &span class=&o&&*&/span& &span class=&n&&max&/span& &span class=&p&&(&/span& &span class=&n&&sign&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionTime&/span&&span class=&p&&.&/span&&span class=&n&&z&/span& &span class=&p&&),&/span& &span class=&mf&&0.0&/span& &span class=&p&&);&/span&
&span class=&n&&alpha&/span& &span class=&o&&+=&/span& &span class=&n&&saturate&/span& &span class=&p&&(&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionTime&/span&&span class=&p&&.&/span&&span class=&n&&w&/span&&span class=&p&&,&/span& &span class=&mf&&0.5&/span& &span class=&p&&)&/span& &span class=&o&&-&/span& &span class=&p&&(&/span& &span class=&k&&float&/span& &span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&dist&/span&&span class=&p&&[&/span& &span class=&mi&&3&/span& &span class=&p&&]&/span& &span class=&p&&)&/span& &span class=&o&&/&/span& &span class=&n&&_MaxDistance&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_BrightnessCollision&/span& &span class=&o&&*&/span& &span class=&n&&max&/span& &span class=&p&&(&/span& &span class=&n&&sign&/span& &span class=&p&&(&/span& &span class=&n&&_CollisionTime&/span&&span class=&p&&.&/span&&span class=&n&&w&/span& &span class=&p&&),&/span& &span class=&mf&&0.0&/span& &span class=&p&&);&/span&
&span class=&n&&finalColor&/span&&span class=&p&&.&/span&&span class=&n&&rgb&/span& &span class=&o&&=&/span& &span class=&n&&color&/span&&span class=&p&&;&/span&
&span class=&n&&finalColor&/span&&span class=&p&&.&/span&&span class=&n&&a&/span& &span class=&o&&=&/span& &span class=&n&&alpha&/span& &span class=&o&&*&/span& &span class=&n&&pow&/span& &span class=&p&&(&/span& &span class=&n&&finalColor&/span&&span class=&p&&.&/span&&span class=&n&&b&/span&&span class=&p&&,&/span& &span class=&mf&&2.0&/span& &span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&n&&finalColor&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&以下是用于计算碰撞点模型空间坐标并为着色器赋值的脚本:&br&&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&public&/span& &span class=&k&&void&/span& &span class=&nf&&ShieldOnWorldSpacePoint&/span& &span class=&p&&(&/span&&span class=&n&&Vector3&/span& &span class=&n&&point&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&Vector3&/span& &span class=&n&&localPosition&/span& &span class=&p&&=&/span& &span class=&n&&transform&/span&&span class=&p&&.&/span&&span class=&n&&InverseTransformPoint&/span& &span class=&p&&(&/span&&span class=&n&&point&/span&&span class=&p&&);&/span&
&span class=&n&&Vector4&/span& &span class=&n&&toShield&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector4&/span& &span class=&p&&(&/span&&span class=&n&&localPosition&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&n&&localPosition&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&,&/span& &span class=&n&&localPosition&/span&&span class=&p&&.&/span&&span class=&n&&z&/span&&span class=&p&&,&/span& &span class=&m&&1f&/span&&span class=&p&&);&/span&
&span class=&n&&effectTime&/span&&span class=&p&&[&/span&&span class=&n&&currentIndex&/span&&span class=&p&&]&/span& &span class=&p&&=&/span& &span class=&n&&duration&/span&&span class=&p&&;&/span&
&span class=&n&&collisionPoints&/span&&span class=&p&&.&/span&&span class=&n&&SetRow&/span&&span class=&p&&(&/span&&span class=&n&&currentIndex&/span&&span class=&p&&,&/span& &span class=&n&&toShield&/span&&span class=&p&&);&/span&
&span class=&n&&material&/span&&span class=&p&&.&/span&&span class=&n&&SetMatrix&/span&&span class=&p&&(&/span&&span class=&s&&&_CollisionPoints&&/span&&span class=&p&&,&/span& &span class=&n&&collisionPoints&/span&&span class=&p&&);&/span&
&span class=&n&&material&/span&&span class=&p&&.&/span&&span class=&n&&SetVector&/span&&span class=&p&&(&/span&&span class=&s&&&_CollisionTime&&/span&&span class=&p&&,&/span& &span class=&n&&effectTime&/span&&span class=&p&&);&/span&
&span class=&n&&currentIndex&/span&&span class=&p&&++;&/span&
&span class=&n&&currentIndex&/span& &span class=&p&&%=&/span& &span class=&m&&4&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&我这里总共使用了一个4*4的矩阵, 因此可以用来表示4个碰撞点. 这实际上已经非常足够了, 因为我们可以将每个碰撞的持续时间缩短, 做到及时更新. 根据我的观察, TitanFall2中的Doom Shield应该也只使用了最多8个碰撞点. 我曾经用Legion(就是拿重机枪的那个, 一秒钟能打十几发子弹)泰坦扫射对面的Doom Shield, 感觉最多也只有6, 7个碰撞点的样子.&/p&&p&我这里的实现方案没有引入HeatWave, 也就是说护盾被击中后不会扭曲后面的背景. 这是因为在这款游戏中护盾是加在防御塔上的, 而防御塔占据整个屏幕的空间比较小, 因此并不需要将效果做得很精致; 而因为防御塔的数量可能比较多, 因此性能是更大的考量, 所以采用了直接Blend的方式. 如果想要扭曲背景的话, 则使用GrabPass[4], 然后为uv添加一层Bump Map过滤即可[5].&/p&&h2&Video Glitch (干扰特效)&/h2&&p&在TitanFall 2中, 游戏以让画面呈现电子干扰的方式来通知玩家泰坦正在承受强大的火力攻击.&/p&&img src=&/v2-bbadaf61fb_b.png& data-rawwidth=&1366& data-rawheight=&853& class=&origin_image zh-lightbox-thumb& width=&1366& data-original=&/v2-bbadaf61fb_r.png&&&p&在Alienation中, 游戏主界面也会不时地发生类似LCD显示屏模拟信号受到干扰的效果. (此处无图, 因为我在PS4上的截图无论如何也导不出来)&/p&&p&这种干扰特效归根到底可以分为两部分:&/p&&blockquote&&ol&&li&画面的扭曲.&/li&&li&颜色漂移.&/li&&/ol&&/blockquote&&p&其实这两步的实现都非常简单: 画面的扭曲可以通过更改采样的UV坐标来实现, 而颜色漂移则可以用另一UV坐标采样单独的某个颜色通道, 然后作为输出的颜色中对应的通道.&/p&&p&代码如下:&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&fixed4&/span& &span class=&n&&frag&/span& &span class=&p&&(&/span& &span class=&n&&v2f&/span& &span class=&n&&i&/span& &span class=&p&&)&/span& &span class=&o&&:&/span& &span class=&n&&COLOR&/span&
&span class=&p&&{&/span&
&span class=&k&&float&/span& &span class=&n&&u&/span& &span class=&o&&=&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&v&/span& &span class=&o&&=&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&horizonNoise&/span& &span class=&o&&=&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_NoiseTex&/span&&span class=&p&&,&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&n&&v&/span&&span class=&p&&,&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&x&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&mi&&2&/span& &span class=&o&&-&/span& &span class=&mi&&1&/span&&span class=&p&&;&/span&
&span class=&n&&horizonNoise&/span& &span class=&o&&*=&/span& &span class=&n&&step&/span& &span class=&p&&(&/span& &span class=&n&&_Threshold&/span&&span class=&p&&,&/span& &span class=&n&&abs&/span& &span class=&p&&(&/span& &span class=&n&&horizonNoise&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_Amount&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&shake&/span& &span class=&o&&=&/span& &span class=&p&&(&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_NoiseTex&/span&&span class=&p&&,&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&mi&&2&/span& &span class=&p&&)&/span& &span class=&o&&-&/span& &span class=&mf&&0.5&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_Shake&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&drift&/span& &span class=&o&&=&/span& &span class=&n&&sin&/span& &span class=&p&&(&/span& &span class=&n&&v&/span& &span class=&o&&+&/span& &span class=&n&&_DriftTime&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_DriftAmount&/span&&span class=&p&&;&/span&
&span class=&n&&half4&/span& &span class=&n&&color&/span& &span class=&o&&=&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_MainTex&/span&&span class=&p&&,&/span& &span class=&n&&frac&/span& &span class=&p&&(&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&n&&u&/span& &span class=&o&&+&/span& &span class=&n&&jitter&/span& &span class=&o&&+&/span& &span class=&n&&shake&/span&&span class=&p&&,&/span& &span class=&n&&v&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&n&&half4&/span& &span class=&n&&color1&/span& &span class=&o&&=&/span& &span class=&n&&tex2D&/span& &span class=&p&&(&/span& &span class=&n&&_MainTex&/span&&span class=&p&&,&/span& &span class=&n&&frac&/span& &span class=&p&&(&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&n&&u&/span& &span class=&o&&+&/span& &span class=&n&&jitter&/span& &span class=&o&&+&/span& &span class=&n&&shake&/span& &span class=&o&&+&/span& &span class=&n&&drift&/span&&span class=&p&&,&/span& &span class=&n&&v&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&n&&half4&/span& &span class=&p&&(&/span& &span class=&n&&color&/span&&span class=&p&&.&/span&&span class=&n&&r&/span&&span class=&p&&,&/span& &span class=&n&&color&/span&&span class=&p&&.&/span&&span class=&n&&g&/span&&span class=&p&&,&/span& &span class=&n&&co}