&figure&&img src=&https://pic4.zhimg.com/50/v2-070ca1f047bd0d25db1cfd35_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&4032& data-rawheight=&3024& class=&origin_image zh-lightbox-thumb& width=&4032& data-original=&https://pic4.zhimg.com/50/v2-070ca1f047bd0d25db1cfd35_r.jpg&&&/figure&&p&
针对这个问题具体聊一聊，因为我的客户大多数都存在这种体态，就像上图右侧照片中的，，就是因为长期久坐伏案，低头玩手机、看电脑、跷二郎腿、半躺靠床，单肩背、学生发育期长期背很重的书包，等等都能够引起脊柱形态以及肌肉的损伤。&/p&&p&
驼背耸肩形态变化，大家可以看下，&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-d48a09ef2a3e98a71a886_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&400& data-rawheight=&232& class=&content_image& width=&400&&&/figure&&p&脊柱形态的改变会引起整个胸廓的改变，会压迫胸腔器官，引起心肺问题，可能引起胸闷气短、血压问题。也会使出现一系列的颈椎胸椎问题。&/p&&p&
驼背耸肩会伴有头前伸，这种体态会出现颈椎失稳的现象，颈椎出现问题，头晕头痛 失眠 注意力不集中 嗜睡 记忆力下降都会出现只不过因人而异。&/p&&figure&&img src=&https://pic1.zhimg.com/50/v2-d7cae4ff359cf30a47b4826_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&333& data-rawheight=&230& class=&content_image& width=&333&&&/figure&&p&看上图，肌肉力量的前后失衡是占很大因素的，斜方肌上部也就是肩颈结合部、胸肌过度紧张，深层颈部肌肉、斜方肌下部也就是下胸椎段肌肉群较弱。&/p&&p&
所以综上所述，必须拉伸松解过度紧张的胸肌以及肩颈部，着重训练斜方肌中下部以及颈椎的核心力量。十次交叉的力量平衡了，体态也就正常了。&/p&&p&
当然有明显症状的也必须通过专业的矫正后再结合运动康复训练，这样才能够达到科学有效的康复。&/p&&p& 下面教朋友们在家练习的一套动作，坚持会有很好的效果的。&/p&&p&
1、我们先要整体的拉伸后背，增加脊柱（颈椎 胸椎 腰椎）关节的灵活度&/p&&a class=&video-box& href=&//link.zhihu.com/?target=https%3A//www.zhihu.com/video/453248& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic4.zhimg.com/80/v2-70e0eb6a22e88cac8bfbd3d7f20faa87_b.jpg& data-lens-id=&453248&&
&img class=&thumbnail& src=&https://pic4.zhimg.com/80/v2-70e0eb6a22e88cac8bfbd3d7f20faa87_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/453248&/span&
&/a&&p&2、然后拉伸过度紧张的胸肌&/p&&a class=&video-box& href=&//link.zhihu.com/?target=https%3A//www.zhihu.com/video/462720& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic4.zhimg.com/80/v2-39b21dd13e3bd555c28c3_b.jpg& data-lens-id=&462720&&
&img class=&thumbnail& src=&https://pic4.zhimg.com/80/v2-39b21dd13e3bd555c28c3_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/462720&/span&
&/a&&p&3、练习胸椎以及肩颈后部肌肉群，可以借助瑜伽球练习&/p&&figure&&img src=&https://pic4.zhimg.com/50/v2-a8a3204bcdb0c89b694fadb42aeefb8e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic4.zhimg.com/50/v2-a8a3204bcdb0c89b694fadb42aeefb8e_r.jpg&&&/figure&&p&4、加强整个脊柱核心力量，激活整个脊柱，对颈椎酸痛僵硬以及腰椎酸软都能够起到很好的效果的。&/p&&a class=&video-box& href=&//link.zhihu.com/?target=https%3A//www.zhihu.com/video/999744& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic4.zhimg.com/80/v2-37c4db00cae2fe8b6c52e7_b.jpg& data-lens-id=&999744&&
&img class=&thumbnail& src=&https://pic4.zhimg.com/80/v2-37c4db00cae2fe8b6c52e7_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/999744&/span&
&/a&&p&然后重点加强颈椎核心练习&/p&&a class=&video-box& href=&//link.zhihu.com/?target=https%3A//www.zhihu.com/video/318848& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic2.zhimg.com/80/v2-2bce00aed2c9aa5_b.jpg& data-lens-id=&318848&&
&img class=&thumbnail& src=&https://pic2.zhimg.com/80/v2-2bce00aed2c9aa5_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/318848&/span&
&/a&&p&5弹力带练习后背肌肉目的是加强后背肌肉的肌力。&/p&&p&注意:腕关节、肘关节、肩关节在同一平面上，两手指勾住弹力带，发力的时候是靠后背肌肉，也就是肩胛骨的收缩完成的。带动弹力带拉长并且向身体一侧靠近，到最大限度保持十秒，然后缓慢放松。&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-ac54f3d952ad36bbeafaa_b.jpg& data-caption=&& data-size=&normal& class=&content_image&&&/figure&&p&这些都是我在治疗体态问题中经常教客户去练习的，都会收到很好的效果的。&/p&&p&
感谢朋友们的支持。&/p&
针对这个问题具体聊一聊，因为我的客户大多数都存在这种体态，就像上图右侧照片中的，，就是因为长期久坐伏案，低头玩手机、看电脑、跷二郎腿、半躺靠床，单肩背、学生发育期长期背很重的书包，等等都能够引起脊柱形态以及肌肉的损伤。 驼背耸肩形态变化，…
&ol&&li&&b&沉溺于「轻易获得高成就感」的事情&/b&：有意无意地寻求用很小付出获得很大「回报」的偏方，哪怕回报是虚拟的。这种行为会提升自己的「兴奋阈值」，让人越来越不容易拥有成就感，从而越来越依赖虚拟的成就感，陷入恶性循环。症状轻的：&b&沉溺游戏&/b&（在虚拟世界中加快时间流逝的速度，使得「成功」来得更快）、&b&种马小说&/b&（意淫人能轻易获得想要的东西）；症状重甚至犯法的：&b&赌博&/b&（轻易获得「金钱」）、&b&吸毒&/b&（轻易获得「爽」的感觉）等。&/li&&li&&b&只接收「低信息密度」的信息源&/b&：只愿意接收信息密度低的信息（如无需太多动脑的视频、图片，以及深度较浅的娱乐、八卦、体育新闻等），不愿意接收信息密度高、需要思考后才能吸收的信息（如课程、知识框架、分析报告等）。由于真正有价值、能让人进步的信息大多是需要思考和消化的，所以如果完全隔离了这部分内容，基本也就隔离了进步的可能。&/li&&li&&b&习惯用「错位成就感」麻痹自己&/b&：有两类：① 习惯于拿自己擅长的东西和别人不擅长的东西比较，从来获得「比别人强」的错觉（如：和运动员比学习成绩，和学霸比体育）；② 习惯于拿别人做事情 A 的时间来做事情 B，来假装自己在事情 B 上做得好（如：「炫耀」自己在节假日做了比别人更多的工作，但也仅仅是在节假日才能如此）。&/li&&li&&b&过度依赖「既有可行路径」&/b&：在工作中，习惯了一件事情的流程后再也没想过如何改进，只会机械地重复，然后骗自己很充实。没有改进，便也没有剔除糟粕的意识，于是需要重复的东西越来越多，消耗时间也越来越长，到最后，看上去每天做了很多事情，但其实不仅一点进步都没有，还挤占了进步的空间。&/li&&li&&b&封闭「强化学习」的通道&/b&：在学习或接受信息中，只愿意执行最简单的第一步，却不愿意执行接下来更为复杂的巩固和应用流程，只听不说、只看不写、只学不练，还麻痹自己说学到了很多东西，而实际上，这种「浅层」的学习遗忘极快，有时还不如不学。比如，天天学英语，却从不写英语文章；再比如，天天花大量时间刷知乎，却从不写答案、写总结。&/li&&/ol&
沉溺于「轻易获得高成就感」的事情：有意无意地寻求用很小付出获得很大「回报」的偏方，哪怕回报是虚拟的。这种行为会提升自己的「兴奋阈值」，让人越来越不容易拥有成就感，从而越来越依赖虚拟的成就感，陷入恶性循环。症状轻的：沉溺游戏（在虚拟世界中加…
&figure&&img src=&https://pic1.zhimg.com/v2-285d715b1f62bd6fe6ca90_b.jpg& data-rawwidth=&1682& data-rawheight=&945& class=&origin_image zh-lightbox-thumb& width=&1682& data-original=&https://pic1.zhimg.com/v2-285d715b1f62bd6fe6ca90_r.jpg&&&/figure&&p&Journey里面的沙丘渲染是很久之前一直想做的，但总是没时间。最近因为项目中在做一个沙丘的场景，所以趁这个机会来做一下。&/p&&p&（在这里事先声明，在场景再现中所用到的技术基本上是在尊重Journey原作的精神下进行的个人创作。由于素材，参数以及个人能力等原因，要完全重现Journey里面的场景十分困难，也没有意义。另外在制作时不会考虑开销，一切以效果为重。本作仅希望通过场景复原过程分享与收获一些风格化渲染的经验。）&/p&&p&场景最终效果：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-285d715b1f62bd6fe6ca90_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1682& data-rawheight=&945& class=&origin_image zh-lightbox-thumb& width=&1682& data-original=&https://pic1.zhimg.com/v2-285d715b1f62bd6fe6ca90_r.jpg&&&/figure&&p&官方参考图，是游戏里的实景：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-720e830c4b4c3bc76ebd_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&960& data-rawheight=&540& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&https://pic2.zhimg.com/v2-720e830c4b4c3bc76ebd_r.jpg&&&/figure&&p&图片来源：&a href=&http://link.zhihu.com/?target=https%3A//www.gdcvault.com/play/1017742/Sand-Rendering-in& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sand Rendering in Journey&/a&&/p&&p&这是GDC的一个讲座，现在已经可以免费观看了。讲座用的PPT下载链接：&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//advances.realtimerendering.com/s2012/thatgamecompany/SandRenderingInJourney_thatgamecompany.pptx& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&advances.realtimerendering.com&/span&&span class=&invisible&&/s2012/thatgamecompany/SandRenderingInJourney_thatgamecompany.pptx&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&啊 还是忍不住多方几张官方的插图，因为实在是太漂亮了：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-214bded4f2c018f0c2ffb_b.jpg& data-size=&normal& data-rawwidth=&960& data-rawheight=&540& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&https://pic4.zhimg.com/v2-214bded4f2c018f0c2ffb_r.jpg&&&figcaption&沙子上有blingbling的闪光&/figcaption&&/figure&&figure&&img src=&https://pic3.zhimg.com/v2-22375f4bbc1b9fc90e5115a6fffd08f2_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&960& data-rawheight=&540& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&https://pic3.zhimg.com/v2-22375f4bbc1b9fc90e5115a6fffd08f2_r.jpg&&&/figure&&p&（知乎好像会莫名其妙的降低图片的分辨率，建议下载ppt观看）&/p&&p&好的，鉴赏完毕，接下来是正片。&/p&&h2&建模 Modeling&/h2&&p&讲座里说了是用一个高度贴图height map进行建模。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-aea5b69e1d2a71d832982_b.jpg& data-size=&normal& data-rawwidth=&240& data-rawheight=&480& class=&content_image& width=&240&&&figcaption&用于建模的height map&/figcaption&&/figure&&p&基本方法是把图片下载下来之后，在Maya新建一个平面，把面片数调节为50*50：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b2e0dbf6f1a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&960& data-rawheight=&491& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&https://pic3.zhimg.com/v2-b2e0dbf6f1a_r.jpg&&&/figure&&p&然后打开Surfaces-&Sculpt Geometry Tool。打开小窗后，选择Attribute Maps-&Import 点击import，然后在路径导航窗口中选中刚才我们使用的height map。导入后每个点的高度变化可能有些小，所以我做了沿Y轴的缩放，完成后效果如下：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-ad381b79ceeafc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&869& data-rawheight=&424& class=&origin_image zh-lightbox-thumb& width=&869& data-original=&https://pic1.zhimg.com/v2-ad381b79ceeafc_r.jpg&&&/figure&&p&讲座中提到了他们使用B-spline让模型更加平滑。这部分内容主要和建模有关系，这里就不作展开了。&/p&&p&我希望进行渲染的为该场景内的一小部分，所以单独为这个镜头建了一个模，长这样：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-7dba6a20abf351d00cae05c7_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1036& data-rawheight=&516& class=&origin_image zh-lightbox-thumb& width=&1036& data-original=&https://pic4.zhimg.com/v2-7dba6a20abf351d00cae05c7_r.jpg&&&/figure&&p&基本上就是用Maya的Sculpting工具修修改改一点点捏出来的。Journey风格的山丘，特点就是山头很尖，一定要尖，做山头的时候可以改用soft select 来调节vertex。&/p&&p&改完后把模型导入Unity，打上背光：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-c2c2e08bac4b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&588& data-rawheight=&331& class=&origin_image zh-lightbox-thumb& width=&588& data-original=&https://pic4.zhimg.com/v2-c2c2e08bac4b_r.jpg&&&/figure&&p&阳光的颜色为（253，208，179）。背景的日光有些丑，所以替换成Jouney的抱抱山和游戏场景中灰黄色的天空。山是游戏截图（估计真实的游戏也就是一个图片( :3 )），天空是一个外部剔除的球体，大概长这样：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-e53a832cadf9dbf31a01_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&557& data-rawheight=&564& class=&origin_image zh-lightbox-thumb& width=&557& data-original=&https://pic2.zhimg.com/v2-e53a832cadf9dbf31a01_r.jpg&&&/figure&&p&修改过后镜头里的画面：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-0b7b33326efd6d8c18cec0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&590& data-rawheight=&325& class=&origin_image zh-lightbox-thumb& width=&590& data-original=&https://pic1.zhimg.com/v2-0b7b33326efd6d8c18cec0_r.jpg&&&/figure&&p&这里还导入了一个Unity自带的FirstPersonController。这样就可以愉快的在沙丘上跑了。写shader前的准备工作基本完成。接下来本文将会以讲座所讲内容的倒叙的进行实现（谁叫讲座也是倒过来讲的呢）。&/p&&h2&基本的明暗 Diffuse&/h2&&p&新建一个新的Unlit Shader，建好后加上材质给我们的模型贴上。&/p&&p&首先是一些基本的向量转换的工作，这里贴一下顶点函数：&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&k&&struct&/span& &span class=&n&&appdata&/span&
&span class=&p&&{&/span&
&span class=&n&&float4&/span& &span class=&n&&vertex&/span& &span class=&o&&:&/span& &span class=&n&&POSITION&/span&&span class=&p&&;&/span&
&span class=&n&&float2&/span& &span class=&n&&uv&/span& &span class=&o&&:&/span& &span class=&n&&TEXCOORD0&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&normal&/span& &span class=&o&&:&/span& &span class=&n&&NORMAL&/span&&span class=&p&&;&/span&
&span class=&n&&float4&/span& &span class=&n&&tangent&/span& &span class=&o&&:&/span&&span class=&n&&TANGENT&/span&&span class=&p&&;&/span&
&span class=&p&&};&/span&
&span class=&k&&struct&/span& &span class=&n&&v2f&/span&
&span class=&p&&{&/span&
&span class=&n&&float2&/span& &span class=&n&&uv&/span& &span class=&o&&:&/span& &span class=&n&&TEXCOORD0&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&worldPos&/span& &span class=&o&&:&/span& &span class=&n&&TEXCOORD1&/span&&span class=&p&&;&/span&
&span class=&c1&&// position of this vertex in world &/span&
&span class=&n&&float3&/span& &span class=&n&&view&/span& &span class=&o&&:&/span& &span class=&n&&TEXCOORD2&/span&&span class=&p&&;&/span&
&span class=&c1&&// view direction, from this vertex to viewer&/span&
&span class=&n&&float3&/span& &span class=&n&&tangentDir&/span& &span class=&o&&:&/span& &span class=&n&&TEXCOORD3&/span&&span class=&p&&;&/span&
&span class=&c1&&// tangent direction in world &/span&
&span class=&n&&float3&/span& &span class=&n&&bitangentDir&/span& &span class=&o&&:&/span& &span class=&n&&TEXCOORD4&/span&&span class=&p&&;&/span&
&span class=&c1&&// bitangent direction in world&/span&
&span class=&n&&float3&/span& &span class=&n&&normal&/span& &span class=&o&&:&/span& &span class=&n&&NORMAL&/span&&span class=&p&&;&/span&
&span class=&n&&UNITY_FOG_COORDS&/span&&span class=&p&&(&/span&&span class=&mi&&5&/span&&span class=&p&&)&/span&
&span class=&n&&float4&/span& &span class=&n&&vertex&/span& &span class=&o&&:&/span& &span class=&n&&SV_POSITION&/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&/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&&vertex&/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&&uv&/span&&span class=&p&&;&/span& &span class=&c1&&// here we don't want the main texture to affect the uv&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&worldPos&/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&&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&&o&/span&&span class=&p&&.&/span&&span class=&n&&view&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span&&span class=&n&&WorldSpaceViewDir&/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&&normal&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&mul&/span&&span class=&p&&(&/span& &span class=&n&&unity_ObjectToWorld&/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&&xyz&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&tangentDir&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/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=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&tangent&/span&&span class=&p&&.&/span&&span class=&n&&xyz&/span&&span class=&p&&,&/span& &span class=&mo&&0&/span&&span class=&p&&)&/span& &span class=&p&&).&/span&&span class=&n&&xyz&/span& &span class=&p&&);&/span&
&span class=&n&&o&/span&&span class=&p&&.&/span&&span class=&n&&bitangentDir&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&cross&/span&&span class=&p&&(&/span& &span class=&n&&o&/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&&tangentDir&/span&&span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&v&/span&&span class=&p&&.&/span&&span class=&n&&tangent&/span&&span class=&p&&.&/span&&span class=&n&&w&/span& &span class=&p&&);&/span&
&span class=&n&&UNITY_TRANSFER_FOG&/span&&span class=&p&&(&/span&&span class=&n&&o&/span&&span class=&p&&,&/span&&span class=&n&&o&/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&
&/code&&/pre&&/div&&p&视线向量view direction和法线向量normal基本上是做渲染必须的。uv的话没有做转换，因为除了MainTexture之外还有贴图需要使用，所以就不作转换了。world position是一个还算比较常用的向量，所以这里就顺手写了。之后需要使用Normal Map，所以这里需要引入tangent和bitangent向量。&/p&&p&&br&&/p&&p&基本的明暗关系，作者使用的是OrenNayar模型，具体的代码在PPT里罗列如下：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-d51ea3ff074a32e37cfa126b9a0e2806_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&695& data-rawheight=&378& class=&origin_image zh-lightbox-thumb& width=&695& data-original=&https://pic3.zhimg.com/v2-d51ea3ff074a32e37cfa126b9a0e2806_r.jpg&&&/figure&&p&并且用如下方法增加对比度：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-d0d776e0ec_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&670& data-rawheight=&139& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic2.zhimg.com/v2-d0d776e0ec_r.jpg&&&/figure&&p&嗯，所以勤勤恳恳的科学家们呀，你们辛辛苦苦总结的公式，可是会被艺术家们一言不合就改掉的哟~&/p&&p&最后公式修改如下：&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&k&&fixed&/span& &span class=&n&&OrenNayarDiffuse&/span&&span class=&p&&(&/span& &span class=&n&&fixed3&/span& &span class=&n&&light&/span&&span class=&p&&,&/span& &span class=&n&&fixed3&/span& &span class=&n&&view&/span&&span class=&p&&,&/span& &span class=&n&&fixed3&/span& &span class=&n&&norm&/span&&span class=&p&&,&/span& &span class=&k&&fixed&/span& &span class=&n&&roughness&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&half&/span& &span class=&n&&VdotN&/span& &span class=&o&&=&/span& &span class=&n&&dot&/span&&span class=&p&&(&/span& &span class=&n&&view&/span& &span class=&p&&,&/span& &span class=&n&&norm&/span& &span class=&p&&);&/span&
&span class=&c1&&// the function is modifed here&/span&
&span class=&c1&&// the original one is LdotN = saturate( dot ( light , norm ))&/span&
&span class=&k&&half&/span& &span class=&n&&LdotN&/span& &span class=&o&&=&/span& &span class=&n&&saturate&/span&&span class=&p&&(&/span& &span class=&mi&&4&/span& &span class=&o&&*&/span& &span class=&n&&dot&/span&&span class=&p&&(&/span& &span class=&n&&light&/span&&span class=&p&&,&/span& &span class=&n&&norm&/span& &span class=&o&&*&/span& &span class=&n&&float3&/span&&span class=&p&&(&/span& &span class=&mi&&1&/span& &span class=&p&&,&/span& &span class=&mf&&0.3&/span& &span class=&p&&,&/span& &span class=&mi&&1&/span& &span class=&p&&)&/span& &span class=&p&&));&/span&
&span class=&k&&half&/span& &span class=&n&&cos_theta_i&/span& &span class=&o&&=&/span& &span class=&n&&LdotN&/span&&span class=&p&&;&/span&
&span class=&k&&half&/span& &span class=&n&&theta_r&/span& &span class=&o&&=&/span& &span class=&n&&acos&/span&&span class=&p&&(&/span& &span class=&n&&VdotN&/span& &span class=&p&&);&/span&
&span class=&k&&half&/span& &span class=&n&&theta_i&/span& &span class=&o&&=&/span& &span class=&n&&acos&/span&&span class=&p&&(&/span& &span class=&n&&cos_theta_i&/span& &span class=&p&&);&/span&
&span class=&k&&half&/span& &span class=&n&&cos_phi_diff&/span& &span class=&o&&=&/span& &span class=&n&&dot&/span&&span class=&p&&(&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&view&/span& &span class=&o&&-&/span& &span class=&n&&norm&/span& &span class=&o&&*&/span& &span class=&n&&VdotN&/span& &span class=&p&&),&/span&
&span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&light&/span& &span class=&o&&-&/span& &span class=&n&&norm&/span& &span class=&o&&*&/span& &span class=&n&&LdotN&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&k&&half&/span& &span class=&n&&alpha&/span& &span class=&o&&=&/span& &span class=&n&&max&/span&&span class=&p&&(&/span& &span class=&n&&theta_i&/span&&span class=&p&&,&/span& &span class=&n&&theta_r&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&k&&half&/span& &span class=&n&&beta&/span& &span class=&o&&=&/span& &span class=&n&&min&/span&&span class=&p&&(&/span& &span class=&n&&theta_i&/span&&span class=&p&&,&/span& &span class=&n&&theta_r&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&k&&half&/span& &span class=&n&&sigma2&/span& &span class=&o&&=&/span& &span class=&n&&roughness&/span& &span class=&o&&*&/span& &span class=&n&&roughness&/span&&span class=&p&&;&/span&
&span class=&k&&half&/span& &span class=&n&&A&/span& &span class=&o&&=&/span& &span class=&mf&&1.0&/span& &span class=&o&&-&/span& &span class=&mf&&0.5&/span& &span class=&o&&*&/span& &span class=&n&&sigma2&/span& &span class=&o&&/&/span& &span class=&p&&(&/span&&span class=&n&&sigma2&/span& &span class=&o&&+&/span& &span class=&mf&&0.33&/span&&span class=&p&&);&/span&
&span class=&k&&half&/span& &span class=&n&&B&/span& &span class=&o&&=&/span& &span class=&mf&&0.45&/span& &span class=&o&&*&/span& &span class=&n&&sigma2&/span& &span class=&o&&/&/span& &span class=&p&&(&/span&&span class=&n&&sigma2&/span& &span class=&o&&+&/span& &span class=&mf&&0.09&/span&&span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&n&&saturate&/span&&span class=&p&&(&/span& &span class=&n&&cos_theta_i&/span& &span class=&p&&)&/span& &span class=&o&&*&/span&
&span class=&p&&(&/span&&span class=&n&&A&/span& &span class=&o&&+&/span& &span class=&p&&(&/span&&span class=&n&&B&/span& &span class=&o&&*&/span& &span class=&n&&saturate&/span&&span class=&p&&(&/span& &span class=&n&&cos_phi_diff&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&sin&/span&&span class=&p&&(&/span&&span class=&n&&alpha&/span&&span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&tan&/span&&span class=&p&&(&/span&&span class=&n&&beta&/span&&span class=&p&&)));&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&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&&SV_Target&/span&
&span class=&p&&{&/span&
&span class=&n&&float4&/span& &span class=&n&&mainColor&/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&&_MainTex_ST&/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&&uv&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+&/span& &span class=&n&&_MainTex_ST&/span&&span class=&p&&.&/span&&span class=&n&&zw&/span& &span class=&p&&);&/span&
&span class=&n&&float3&/span& &span class=&n&&lightDirection&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&UnityWorldSpaceLightDir&/span&&span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&worldPos&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&n&&float4&/span& &span class=&n&&lightColor&/span& &span class=&o&&=&/span& &span class=&n&&_LightColor0&/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&&i&/span&&span class=&p&&.&/span&&span class=&n&&view&/span& &span class=&p&&);&/span&
&span class=&n&&float3&/span& &span class=&n&&halfDirection&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&viewDirection&/span& &span class=&o&&+&/span& &span class=&n&&lightDirection&/span&&span class=&p&&);&/span&
&span class=&n&&float4&/span& &span class=&n&&ambientCol&/span& &span class=&o&&=&/span& &span class=&n&&unity_AmbientSky&/span&&span class=&p&&;&/span&
&span class=&n&&float4&/span& &span class=&n&&diffuseColor&/span& &span class=&o&&=&/span& &span class=&n&&lightColor&/span& &span class=&o&&*&/span& &span class=&n&&mainColor&/span& &span class=&o&&*&/span& &span class=&n&&OrenNayarDiffuse&/span&&span class=&p&&(&/span& &span class=&n&&lightDirection&/span& &span class=&p&&,&/span& &span class=&n&&viewDirection&/span& &span class=&p&&,&/span& &span class=&n&&normal&/span& &span class=&p&&,&/span& &span class=&n&&_Roughness&/span&&span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&diffuseColor&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&实现效果如下：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-c2f74cfacfc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&482& data-rawheight=&261& class=&origin_image zh-lightbox-thumb& width=&482& data-original=&https://pic1.zhimg.com/v2-c2f74cfacfc_r.jpg&&&/figure&&p&嗯，只有单光源看起来效果不是很好呀，所以多光源支持写起来~&/p&&p&首先在Pass头部，CGPROGRAM之前写上Lighting On。&/p&&p&然后在面片着色器里加上循环代码：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&for ( int k = 1 ; k & 4 ; ++k ) { // handle up to 4 lights
float4 lightColork = unity_LightColor[k];
float3 lightDirectionk = unity_LightPosition[k].xyz - i.worldPos * unity_LightPosition[k].w;
if ( lightColork.x + lightColork.y + lightColork.z &0 )
float4 diffuseColk = lightColork * mainColor * ( OrenNayarDiffuse( lightDirectionk , viewDirection ,
normal , _Roughness) );
diffuseCol += diffuseC
&/code&&/pre&&/div&&p&接下来是打光环节，本人也不是专业的灯光，并且在制作过程中灯光也会不断的进行调整。所以这部分仅供参考。主光源（Key Light）不变，是一个从远处往回打的灯光（就是背光的角度），然后Fill Light 打在侧面，做到让场景变得柔和。Rim Light 把山的轮廓强调一下。三个灯光的按添加顺序展示效果如下。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-235f5bfaff206eb56ad8_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1436& data-rawheight=&260& class=&origin_image zh-lightbox-thumb& width=&1436& data-original=&https://pic1.zhimg.com/v2-235f5bfaff206eb56ad8_r.jpg&&&/figure&&p&然后是不同Roughness的对比图，左边是Roughness 为0，右边是Roughness为1。好像没什么区别喉。其实更主要的区别会在之后添加specualar的时候看到，在这里我们选择Roughness为0.5。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-5ccaa13c7d738ac82f3e515a970ce8c2_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1436& data-rawheight=&266& class=&origin_image zh-lightbox-thumb& width=&1436& data-original=&https://pic3.zhimg.com/v2-5ccaa13c7d738ac82f3e515a970ce8c2_r.jpg&&&/figure&&p&&br&&/p&&h2&沙丘表面纹理 Height Map&/h2&&p&原作者的方法是把下述的四个高度贴图（Height Map）整合起来做成沙丘表面的纹理。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-8f0a28fe11efbfdd31db7_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&516& data-rawheight=&363& class=&origin_image zh-lightbox-thumb& width=&516& data-original=&https://pic4.zhimg.com/v2-8f0a28fe11efbfdd31db7_r.jpg&&&/figure&&p&x z 方向的贴图用于不同法线朝向的表面，Steep 和 Shallow贴图分别用于不同的坡度的表面。（原话为：For each vertex of the detail heightmap, we&br&chose the X- or the Z-column based on which derivative was greater, and we lerped&br&between the shallow and steep rows based on the total steepness of the terrain.）&/p&&p&嗯，这么来说的确有些难理解，实际上我们做一下实验就知道了。&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&k&&if&/span& &span class=&p&&(&/span& &span class=&n&&_IsNormalXZ&/span& &span class=&o&&&&/span& &span class=&mo&&0&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span& &span class=&n&&abs&/span&&span class=&p&&(&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&z&/span& &span class=&o&&/&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&x&/span& &span class=&p&&)&/span& &span class=&o&&&&/span& &span class=&mi&&1&/span&
&span class=&p&&)&/span&
&span class=&k&&return&/span& &span class=&n&&float3&/span&&span class=&p&&(&/span& &span class=&n&&abs&/span&&span class=&p&&(&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&z&/span& &span class=&p&&)&/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=&k&&else&/span&
&span class=&k&&return&/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=&n&&abs&/span&&span class=&p&&(&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&x&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&figure&&img src=&https://pic1.zhimg.com/v2-c3f05a0faee28_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&391& data-rawheight=&308& class=&content_image& width=&391&&&/figure&&p&这里根据模型法向的xz分量大小，对模型进行红色和蓝色的着色，可以看到，这样的的分类把模型按方向分成了四份。&/p&&p&然后上实景的参考图：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-03c1e8bd485e8e87aca6_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&550& data-rawheight=&367& class=&origin_image zh-lightbox-thumb& width=&550& data-original=&https://pic3.zhimg.com/v2-03c1e8bd485e8e87aca6_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-a2c9cf252f7398bfea0d94_b.jpg& data-caption=&& data-size=&small& data-rawwidth=&880& data-rawheight=&587& class=&origin_image zh-lightbox-thumb& width=&880& data-original=&https://pic1.zhimg.com/v2-a2c9cf252f7398bfea0d94_r.jpg&&&/figure&&p&可以看到沙丘的纹路总是沿着沙丘的斜面出现。再看看高度贴图，都是有方向性的，是不是可以理解为，X Z 方向的高度贴图实际上是对应不同方向的纹路？实验的结果如下：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-9a079d41f3d4a4f0ce530_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1089& data-rawheight=&240& class=&origin_image zh-lightbox-thumb& width=&1089& data-original=&https://pic1.zhimg.com/v2-9a079d41f3d4a4f0ce530_r.jpg&&&/figure&&p&中间是带有纹理方向选择的，左右是只含单个方向的纹理的，对比来看的确中间的纹理比较有立体感。不过这个纹理的衔接处还是比较突兀，所以我用了一个atan函数平滑了一下，代码如下：&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&float3&/span& &span class=&n&&GetSurfaceNormal&/span&&span class=&p&&(&/span& &span class=&n&&float2&/span& &span class=&n&&uv&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&temNormal&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&c1&&// get the power of xz direction &/span&
&span class=&k&&float&/span& &span class=&n&&xzRate&/span& &span class=&o&&=&/span& &span class=&n&&atan&/span&&span class=&p&&(&/span& &span class=&n&&abs&/span&&span class=&p&&(&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&z&/span& &span class=&o&&/&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&steepX&/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&&_NormalMapSteepX&/span& &span class=&p&&,&/span& &span class=&n&&_NormalMapSteepX_ST&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&*&/span& &span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+&/span& &span class=&n&&_NormalMapSteepX_ST&/span&&span class=&p&&.&/span&&span class=&n&&zw&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&steepZ&/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&&_NormalMapSteepZ&/span& &span class=&p&&,&/span& &span class=&n&&_NormalMapSteepZ_ST&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&*&/span& &span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+&/span& &span class=&n&&_NormalMapSteepZ_ST&/span&&span class=&p&&.&/span&&span class=&n&&zw&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&lerp&/span&&span class=&p&&(&/span& &span class=&n&&steepX&/span& &span class=&p&&,&/span& &span class=&n&&steepZ&/span& &span class=&p&&,&/span& &span class=&n&&xzRate&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&figure&&img src=&https://pic2.zhimg.com/v2-69cbba779a345dc677683eed_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&769& data-rawheight=&277& class=&origin_image zh-lightbox-thumb& width=&769& data-original=&https://pic2.zhimg.com/v2-69cbba779a345dc677683eed_r.jpg&&&/figure&&p&和视频中介绍的高度贴图不同，我使用的是法向贴图，嗯，好像法向贴图的代码写起来比较简单。我用的贴图长这样（都是网上可以搜到的图）：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0a21b135f8f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&404& data-rawheight=&346& class=&content_image& width=&404&&&/figure&&p&再导入贴图后，要确认贴图的类型（Texture Type）勾选为Normal map。并且使用的时候需要进行一个坐标转换，转换方法如下：&/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&&SV_Target&/span& &span class=&p&&{&/span&
&span class=&p&&...&/span&
&span class=&c1&&// Get the surface normal detected by the normal map&/span&
&span class=&n&&float3&/span& &span class=&n&&normalSurface&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span&&span class=&n&&GetSurfaceNormal&/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&&i&/span&&span class=&p&&.&/span&&span class=&n&&normal&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&c1&&// 'TBN' transform the world space into a tangent space&/span&
&span class=&c1&&// with the inverse matrix, we can transport the normal from tangent space to world&/span&
&span class=&n&&float3x3&/span& &span class=&n&&TBN&/span& &span class=&o&&=&/span& &span class=&n&&float3x3&/span&&span class=&p&&(&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&tangentDir&/span& &span class=&p&&)&/span& &span class=&p&&,&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&bitangentDir&/span& &span class=&p&&)&/span& &span class=&p&&,&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&normal&/span& &span class=&p&&));&/span&
&span class=&n&&TBN&/span& &span class=&o&&=&/span& &span class=&n&&transpose&/span&&span class=&p&&(&/span& &span class=&n&&TBN&/span&&span class=&p&&);&/span&
&span class=&c1&&// equals to i.tangent * ns.x + i.bitangent * ns.y + i.normal * ns.z&/span&
&span class=&n&&float3&/span& &span class=&n&&normal&/span& &span class=&o&&=&/span& &span class=&n&&mul&/span&&span class=&p&&(&/span& &span class=&n&&TBN&/span& &span class=&p&&,&/span& &span class=&n&&normalSurface&/span& &span class=&p&&);&/span&
&span class=&c1&&// Merge the surface normal with the model normal&/span&
&span class=&n&&normal&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&normal&/span& &span class=&o&&*&/span& &span class=&n&&_SurfaceNormalScale&/span& &span class=&o&&+&/span& &span class=&n&&i&/span&&span class=&p&&.&/span&&span class=&n&&normal&/span&&span class=&p&&);&/span&
&span class=&p&&...&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&这个转换简单来说就是把在表面坐标系（以Tangent, Bitangent 和 Normal为轴）里的法线向量转换为在世界坐标系（以XYZ为轴）里的法线向量。这个法线方向转换很重要，不然光照效果就会乱了套（不要问我是怎么发现的）。同时这里加入了_SurfaceNormalScale参数，来控制山体表面纹路的深浅。完成后山的法线分布应该是这样的：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-946ac6ff6fae3315910bef818aa442e6_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&564& data-rawheight=&224& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&https://pic3.zhimg.com/v2-946ac6ff6fae3315910bef818aa442e6_r.jpg&&&/figure&&p&之后要做斜度的方向上的分解，和xz方向类似，同样使用了atan函数进行平滑，具体的代码如下：&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&float3&/span& &span class=&n&&GetSurfaceNormal&/span&&span class=&p&&(&/span& &span class=&n&&float2&/span& &span class=&n&&uv&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&temNormal&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&c1&&// get the power of xz direction&/span&
&span class=&c1&&// it repersent the how much we should show the x or z texture&/span&
&span class=&k&&float&/span& &span class=&n&&xzRate&/span& &span class=&o&&=&/span& &span class=&n&&atan&/span&&span class=&p&&(&/span& &span class=&n&&abs&/span&&span class=&p&&(&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&z&/span& &span class=&o&&/&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&n&&xzRate&/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&&xzRate&/span& &span class=&p&&,&/span& &span class=&mi&&9&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&c1&&// get the steepness&/span&
&span class=&c1&&// the shallow and steep texture will be lerped based on this value&/span&
&span class=&k&&float&/span& &span class=&n&&steepness&/span& &span class=&o&&=&/span& &span class=&n&&atan&/span&&span class=&p&&(&/span& &span class=&mi&&1&/span&&span class=&o&&/&/span& &span class=&n&&temNormal&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&p&&);&/span&
&span class=&n&&steepness&/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&&steepness&/span& &span class=&p&&,&/span& &span class=&mi&&2&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&n&&float3&/span& &span class=&n&&shallowX&/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&&_NormalMapShallowX&/span& &span class=&p&&,&/span& &span class=&n&&_NormalMapShallowX_ST&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&*&/span& &span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+&/span& &span class=&n&&_NormalMapShallowX_ST&/span&&span class=&p&&.&/span&&span class=&n&&zw&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&shallowZ&/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&&_NormalMapShallowZ&/span& &span class=&p&&,&/span& &span class=&n&&_NormalMapShallowZ_ST&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&*&/span& &span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+&/span& &span class=&n&&_NormalMapShallowZ_ST&/span&&span class=&p&&.&/span&&span class=&n&&zw&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&shallow&/span& &span class=&o&&=&/span& &span class=&n&&shallowX&/span& &span class=&o&&*&/span& &span class=&n&&shallowZ&/span& &span class=&o&&*&/span& &span class=&n&&_ShallowBumpScale&/span&&span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&steepX&/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&&_NormalMapSteepX&/span& &span class=&p&&,&/span& &span class=&n&&_NormalMapSteepX_ST&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&*&/span& &span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+&/span& &span class=&n&&_NormalMapSteepX_ST&/span&&span class=&p&&.&/span&&span class=&n&&zw&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&steepZ&/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&&_NormalMapSteepZ&/span& &span class=&p&&,&/span& &span class=&n&&_NormalMapSteepZ_ST&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&*&/span& &span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+&/span& &span class=&n&&_NormalMapSteepZ_ST&/span&&span class=&p&&.&/span&&span class=&n&&zw&/span& &span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&n&&float3&/span& &span class=&n&&steep&/span& &span class=&o&&=&/span& &span class=&n&&lerp&/span&&span class=&p&&(&/span& &span class=&n&&steepX&/span& &span class=&p&&,&/span& &span class=&n&&steepZ&/span& &span class=&p&&,&/span& &span class=&n&&xzRate&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&lerp&/span&&span class=&p&&(&/span& &span class=&n&&shallow&/span& &span class=&p&&,&/span& &span class=&n&&steep&/span& &span class=&p&&,&/span& &span class=&n&&steepness&/span& &span class=&p&&)&/span& &span class=&p&&);&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&好了，这部分完成以后，场景的渲染效果如下（_SurfaceNormalScale分别为0.1,0.5和2） ：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-0f8f18f45e174c62b461fde60e47e71c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1434& data-rawheight=&267& class=&origin_image zh-lightbox-thumb& width=&1434& data-original=&https://pic1.zhimg.com/v2-0f8f18f45e174c62b461fde60e47e71c_r.jpg&&&/figure&&h2&风格化高光 Ocean Specualar&/h2&&p&首先真的很感慨前辈们在那个光照理论还不很成熟的年代能够做出这么好的艺术效果。在讲座中作者表示这个像海洋高光一样的效果其实是不真实的，但是他们试验之后觉得这个效果好，所以在游戏里就加上了（渲染这种东西有时候真的是凭感觉的呀）。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-5c81af3d96224ffb8d1f51_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&960& data-rawheight=&540& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&https://pic2.zhimg.com/v2-5c81af3d96224ffb8d1f51_r.jpg&&&/figure&&p&所谓海面高光是什么意思呢，大概就是这样子的吧：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a8c9b1b1f1b3909ffee3fee6b0d5475c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&600& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic1.zhimg.com/v2-a8c9b1b1f1b3909ffee3fee6b0d5475c_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-e77ec12aa0a08eaeb7a00_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1024& data-rawheight=&768& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&https://pic1.zhimg.com/v2-e77ec12aa0a08eaeb7a00_r.jpg&&&/figure&&p&嗯，大概就是有中间的一条光束。&/p&&p&所以那要怎么实现呢。。。讲座里没给出具体的算法。。。所以这部分本人基本靠蒙的。&/p&&p&先是实验了一些Smith GGX，Beckman之类的模型，效果都不是很好。后来突然想起，之前在做水特效的时候，有出现过类似的效果，所以就去查看了一下。发现好像就是最基本的Blinn模型。。。对，就是Blinn，效果反而意外的不错：&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&k&&float&/span& &span class=&n&&MySpecularDistribution&/span&&span class=&p&&(&/span& &span class=&k&&float&/span& &span class=&n&&roughness&/span&&span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&lightDir&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&view&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&normal&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&normalDetail&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&c1&&// using the blinn model&/span&
&span class=&c1&&// base shine come use the normal of the object&/span&
&span class=&c1&&// detail shine use the normal from the detail normal image&/span&
&span class=&n&&float3&/span& &span class=&n&&halfDirection&/span& &span class=&o&&=&/span& &span class=&n&&normalize&/span&&span class=&p&&(&/span& &span class=&n&&view&/span& &span class=&o&&+&/span& &span class=&n&&lightDir&/span&&span class=&p&&);&/span&
&span class=&k&&float&/span& &span class=&n&&baseShine&/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=&mo&&0&/span& &span class=&p&&,&/span& &span class=&n&&dot&/span&&span class=&p&&(&/span& &span class=&n&&halfDirection&/span& &span class=&p&&,&/span& &span class=&n&&normal&/span&
&span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&,&/span& &span class=&mi&&10&/span& &span class=&o&&/&/span& &span class=&n&&baseRoughness&/span& &span class=&p&&);&/span&
&span class=&k&&float&/span& &span class=&n&&shine&/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=&mo&&0&/span& &span class=&p&&,&/span& &span class=&n&&dot&/span&&span class=&p&&(&/span& &span class=&n&&halfDirection&/span& &span class=&p&&,&/span& &span class=&n&&normalDetail&/span&
&span class=&p&&)&/span& &span class=&p&&)&/span& &span class=&p&&,&/span& &span class=&mi&&10&/span& &span class=&o&&/&/span& &span class=&n&&roughness&/span& &span class=&p&&)&/span&
&span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&baseShine&/span& &span class=&o&&*&/span& &span class=&n&&shine&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&这里的高光分为baseShine和shine。baseShine是用来确定高光的边界，使用的法线是之前所说的加上Normal Map之后的Normal。shine是用来做纹理，就是做出那种波光粼粼的效果，这里的normal实际上是使用了一个新的细节纹理法向贴图，并且把贴图缩小来做到细小的纹理效果。不过由于素材的原因，和目标效果始终有一些微小的差距。最终效果如下：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a026cd3f85a027a29fc33cbe4b410633_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1435& data-rawheight=&266& class=&origin_image zh-lightbox-thumb& width=&1435& data-original=&https://pic4.zhimg.com/v2-a026cd3f85a027a29fc33cbe4b410633_r.jpg&&&/figure&&p&使用的细节纹理：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-485b110f13a3a9f76cb2_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&285& data-rawheight=&285& class=&content_image& width=&285&&&/figure&&p&和之前的diffuse叠加（线性叠加）在一起后，下过如下：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-ce29dc70b20d79f637cfb50b7f106eeb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&477& data-rawheight=&269& class=&origin_image zh-lightbox-thumb& width=&477& data-original=&https://pic4.zhimg.com/v2-ce29dc70b20d79f637cfb50b7f106eeb_r.jpg&&&/figure&&p&后期处理的时候加一些bloom效果会进一步提高整体的视觉效果，先卖个关子~&/p&&p&然后我也试着结合BRDF的知识手动添加了一些高光，但是效果也一般，所以这里就不展开说明了，只是上个效果图：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-ffc08a9b22d9a7d1187cdfc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&955& data-rawheight=&268& class=&origin_image zh-lightbox-thumb& width=&955& data-original=&https://pic1.zhimg.com/v2-ffc08a9b22d9a7d1187cdfc_r.jpg&&&/figure&&p&&br&&/p&&h2&贴图过滤 Anisotropic Filtering（略）&/h2&&p&这部分的作用是让在远距离的贴图能够更加清晰，一个比较典型的例子是这样的（注意看远处部分的瓷砖）：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-e777cac8eed3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&400& data-rawheight=&189& class=&content_image& width=&400&&&/figure&&p&这个算法在Unity里已经被整合好了。在Editor-&Quality Settings里面有一个Anisotropic Textures的选项用于开关这个效果，默认打开。这部分也就不详细说明了（感觉当年Journey团队真辛苦，连这个也要自己做）。&/p&&h2&亮片效果 Glitter&/h2&&p&亮片效果是什么呢，就是在沙子上blingbling的那种效果：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f32ebc8e4366afd5bfb629_b.jpg& data-caption=&& data-size=&small& data-rawwidth=&960& data-rawheight=&540& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&https://pic2.zhimg.com/v2-f32ebc8e4366afd5bfb629_r.jpg&&&/figure&&p&单拎出来是这样滴：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a87cae750a517ad9e82aac24f2d9ca6b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1318& data-rawheight=&737& class=&origin_image zh-lightbox-thumb& width=&1318& data-original=&https://pic4.zhimg.com/v2-a87cae750a517ad9e82aac24f2d9ca6b_r.jpg&&&/figure&&p&按照讲座中作者的话来说，他们理解的亮片就是沙堆中有一部分的沙子正好朝向观察者，那么它们就会朝你发射光线，从而产生blingbling的效果。嗯，理论上是这样没错，但是这叫我怎么写呀。关于Glitter的效果可以参考2017的siggraph里的这篇文章：&/p&&a href=&http://link.zhihu.com/?target=http%3A//blog.selfshadow.com/publications/s2017-shading-course/dreamworks/s2017_pbs_dreamworks_notes.pdf& data-draft-node=&block& data-draft-type=&link-card& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&blog.selfshadow.com/pub&/span&&span class=&invisible&&lications/s2017-shading-course/dreamworks/s2017_pbs_dreamworks_notes.pdf&/span&&span class=&ellipsis&&&/span&&/a&&p&个人总结下来，做Glitter效果可以分为两个步骤，&b&一个是噪点的制作，另一个是高光的制作&/b&。&/p&&p&在讲座中，作者讲了他们的高光制作的过程，一个灰常任性的制作过程。因为传统的高光函数为的参数为pow(N·H，n)，这个公式在上面的海洋高光中也用到了。作者觉得Glitter需要的更多关于人眼方位的信息，所以就把这个公式里的H换成了V，即观察者方向向量。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-46d245ded2b1d830d251b1_b.jpg& data-caption=&& data-size=&small& data-rawwidth=&634& data-rawheight=&345& class=&origin_image zh-lightbox-thumb& width=&634& data-original=&https://pic2.zhimg.com/v2-46d245ded2b1d830d251b1_r.jpg&&&/figure&&p&两者的对比大概是这样的：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-a124efa5befa25f0cddbed_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&950& data-rawheight=&268& class=&origin_image zh-lightbox-thumb& width=&950& data-original=&https://pic2.zhimg.com/v2-a124efa5befa25f0cddbed_r.jpg&&&/figure&&p&嗯。。。。。。。开心就好。&/p&&p&不过光有高光函数是不够的，因为闪光点并不是在沙子上均匀的出现的，相反，它们的分布十分随机，这就需要我们设计一个随机分布的函数来获取这些亮点分布的位置。在讲座中没有说明噪点函数的生成具体方法，所以接下来又要进入瞎蒙时间。&/p&&p&首先准备一个噪点图，这次我用的图大概长这样：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-55c2a66ff4df10c9c65a2_b.jpg& data-caption=&& data-size=&small& data-rawwidth=&1017& data-rawheight=&1017& class=&origin_image zh-lightbox-thumb& width=&1017& data-original=&https://pic3.zhimg.com/v2-55c2a66ff4df10c9c65a2_r.jpg&&&/figure&&p&然后根据这个噪点图，进行噪点的处理。这个函数是凭经验试验出来的，放在这里仅供参考：&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&n&&float3&/span& &span class=&n&&GetGlitterNoise&/span&&span class=&p&&(&/span& &span class=&n&&float2&/span& &span class=&n&&uv&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&n&&tex2D&/span&&span class=&p&&(&/span& &span class=&n&&_GlitterTex&/span& &span class=&p&&,&/span& &span class=&n&&_GlitterTex_ST&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&*&/span& &span class=&n&&uv&/span&&span class=&p&&.&/span&&span class=&n&&xy&/span& &span class=&o&&+&/span& &span class=&n&&_GlitterTex_ST&/span&&span class=&p&&.&/span&&span class=&n&&zw&/span& &span class=&p&&)&/span& &span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&float&/span& &span class=&n&&GliterDistribution&/span&&span class=&p&&(&/span& &span class=&k&&float&/span& &span class=&n&&Glitterness&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&lightDir&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&normal&/span&&span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&view&/span& &span class=&p&&,&/span& &span class=&n&&float2&/span& &span class=&n&&uv&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&pos&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&p&&...&/span&
&span class=&k&&float&/span& &span class=&n&&p1&/span& &span class=&o&&=&/span& &span class=&n&&GetGlitterNoise&/span&&span class=&p&&(&/span& &span class=&n&&uv&/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&&y&/span& &span class=&o&&*&/span& &span class=&mf&&0.0005&/span& &span class=&o&&+&/span& &span class=&n&&view&/span&&span class=&p&&.&/span&&span class=&n&&x&/span& &span class=&o&&*&/span& &span class=&mf&&0.0050&/span&
&span class=&p&&)).&/span&&span class=&n&&r&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&p2&/span& &span class=&o&&=&/span& &span class=&n&&GetGlitterNoise&/span&&span class=&p&&(&/span& &span class=&n&&uv&/span& &span class=&o&&+&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&o&&*&/span&&span class=&mf&&0.001&/span& &span class=&p&&,&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&o&&*&/span& &span class=&mf&&0.001&/span& &span class=&o&&+&/span& &span class=&n&&view&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&o&&*&/span& &span class=&mf&&0.003&/span& &span class=&p&&)).&/span&&span class=&n&&g&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&sum&/span& &span class=&o&&=&/span& &span class=&n&&p1&/span& &span class=&o&&*&/span& &span class=&n&&p2&/span&&span class=&p&&;&/span&
&span class=&c1&&// making discrete noise &/span&
&span class=&k&&float&/span& &span class=&n&&glitter&/span& &span class=&o&&=&/span& &span class=&n&&max&/span&&span class=&p&&(&/span& &span class=&mo&&0&/span& &span class=&p&&,&/span& &span class=&n&&pow&/span&&span class=&p&&(&/span& &span class=&n&&sum&/span& &span class=&p&&,&/span& &span class=&n&&_Glitterness&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&n&&_GlitterMutiplyer&/span& &span class=&o&&-&/span& &span class=&mf&&0.5&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&mi&&2&/span&&span class=&p&&;&/span&
&span class=&p&&...&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&制作噪点的效果：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-70aa707dbadbf9fff64dee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&882& data-rawheight=&489& class=&origin_image zh-lightbox-thumb& width=&882& data-original=&https://pic3.zhimg.com/v2-70aa707dbadbf9fff64dee_r.jpg&&&/figure&&p&颗粒感可以做到这样，而且在场景走起来的时候blingbling的感觉还是有的，不过闪光点的密度太大了。之前不是有一个用N·V求出来的分布函数嘛，那我们就把它拿来当做蒙版吧（这一趴系完全的瞎蒙，如果有读者知道具体的算法可以留言处告诉我）。完整的代码是这样的：&/p&&div class=&highlight&&&pre&&code class=&language-glsl&&&span&&/span&&span class=&k&&float&/span& &span class=&n&&GliterDistribution&/span&&span class=&p&&(&/span& &span class=&n&&float3&/span& &span class=&n&&lightDir&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&normal&/span&&span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&view&/span& &span class=&p&&,&/span& &span class=&n&&float2&/span& &span class=&n&&uv&/span& &span class=&p&&,&/span& &span class=&n&&float3&/span& &span class=&n&&pos&/span& &span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&float&/span& &span class=&n&&specBase&/span& &span class=&o&&=&/span& &span class=&n&&saturate&/span&&span class=&p&&(&/span& &span class=&mi&&1&/span& &span class=&o&&-&/span& &span class=&n&&dot&/span&&span class=&p&&(&/span& &span class=&n&&normal&/span& &span class=&p&&,&/span& &span class=&n&&view&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&mi&&2&/span& &span class=&p&&);&/span&
&span class=&k&&float&/span& &span class=&n&&specPow&/span& &span class=&o&&=&/span& &span class=&n&&pow&/span&&span class=&p&&(&/span& &span class=&n&&specBase&/span& &span class=&p&&,&/span& &span class=&mi&&10&/span& &span class=&o&&/&/span& &span class=&n&&_GlitterRange&/span& &span class=&p&&);&/span&
&span class=&c1&&//
A very random function to modify the glitter noise &/span&
&span class=&k&&float&/span& &span class=&n&&p1&/span& &span class=&o&&=&/span& &span class=&n&&GetGlitterNoise&/span&&span class=&p&&(&/span& &span class=&n&&uv&/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&&y&/span& &span class=&o&&*&/span& &span class=&mf&&0.001&/span& &span class=&o&&+&/span& &span class=&n&&view&/span&&span class=&p&&.&/span&&span class=&n&&x&/span& &span class=&o&&*&/span& &span class=&mf&&0.006&/span& &span class=&p&&)).&/span&&span class=&n&&r&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&p2&/span& &span class=&o&&=&/span& &span class=&n&&GetGlitterNoise&/span&&span class=&p&&(&/span& &span class=&n&&uv&/span& &span class=&o&&+&/span& &span class=&n&&float2&/span& &span class=&p&&(&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&o&&*&/span& &span class=&mf&&0.0006&/span& &span class=&p&&,&/span& &span class=&n&&_Time&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&o&&*&/span& &span class=&mf&&0.0005&/span& &span class=&o&&+&/span& &span class=&n&&view&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&o&&*&/span& &span class=&mf&&0.004&/span&
&span class=&p&&)).&/span&&span class=&n&&g&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&sum&/span& &span class=&o&&=&/span& &span class=&mi&&4&/span& &span class=&o&&*&/span& &span class=&n&&p1&/span& &span class=&o&&*&/span& &span class=&n&&p2&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&glitter&/span& &span class=&o&&=&/span& &span class=&n&&pow&/span&&span class=&p&&(&/span& &span class=&n&&sum&/span& &span class=&p&&,&/span& &span class=&n&&_Glitterness&/span& &span class=&p&&);&/span&
&span class=&n&&glitter&/span& &span class=&o&&=&/span& &span class=&n&&max&/span&&span class=&p&&(&/span& &span class=&mo&&0&/span& &span class=&p&&,&/span& &span class=&n&&glitter&/span& &span class=&o&&*&/span& &span class=&n&&_GlitterMutiplyer&/span& &span class=&o&&-&/span& &span class=&mf&&0.5&/span& &span class=&p&&)&/span& &span class=&o&&*&/span& &span class=&mi&&2&/span&&span class=&p&&;&/span&
&span class=&k&&float&/span& &span class=&n&&sparkle&/span& &span class=&o&&=&/span& &span class=&n&&glitter&/span& &span class=&o&&*&/span& &span class=&n&&specPow&/span&&span class=&p&&;&/span&
&span class=&k&&return&/span& &span class=&n&&sparkle&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&添加了Glitter效果的沙丘：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-32e06e73dbff476a7b368_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1655& data-rawheight=&540& class=&origin_image zh-lightbox-thumb& width=&1655& data-original=&https://pic1.zhimg.com/v2-32e06e73dbff476a7b368_r.jpg&&&/figure&&h2&Mips Map&/h2&&p&这是一个在Texture上的类似于LOD的系统，在讲座中有提到，这个技术能够让沙子颗粒感更强。这里就略过了。&/p&&h2&距离雾 Fog&/h2&&p&通过调用宏实现，在新建Shader的时候自带的代码，这里沿用下来。&/p&&h2&后期调整 Post Effect&/h2&&p&目前来说渲染的场景长这样：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-0d3ba88152d7baeef623fe7e36ccea1a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&957& data-rawheight=&528& class=&origin_image zh-lightbox-thumb& width=&957& data-original=&https://pic3.zhimg.com/v2-0d3ba88152d7baeef623fe7e36ccea1a_r.jpg&&&/figure&&p&和Journey游戏里的场景好像还有点距离，不过其实只要加上一些些Camera特效就会好很多了。&/p&&p&首先是Bloom，把高光部分的光照质感做出来。这里使用的是Unity官方出的Post Processing Stack插件(&a href=&http://link.zhihu.com/?target=https%3A//assetstore.unity.com/packages/essentials/post-processing-stack-83912& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Post Processing Stack - Asset Store&/a&)。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-56b275e176d0b1c3e0da8570368bdeee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&971& data-rawheight=&541& class=&origin_image zh-lightbox-thumb& width=&971& data-original=&https://pic3.zhimg.com/v2-56b275e176d0b1c3e0da8570368bdeee_r.jpg&&&/figure&&p&然后调一下颜色：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a9a7595ceb22b691cf17_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&971& data-rawheight=&541& class=&origin_image zh-lightbox-thumb& width=&971& data-original=&https://pic4.zhimg.com/v2-a9a7595ceb22b691cf17_r.jpg&&&/figure&&p&这里是把Post Processing里的ToneMap 调成Natural，并添加了一个LUT：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-b20f1c8b8a4e5c6fa118997f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1024& data-rawheight=&32& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&https://pic4.zhimg.com/v2-b20f1c8b8a4e5c6fa118997f_r.jpg&&&/figu}