&img src=&/50/v2-d1ed56a34aca_b.png& data-rawwidth=&661& data-rawheight=&318& class=&origin_image zh-lightbox-thumb& width=&661& data-original=&/50/v2-d1ed56a34aca_r.png&&&p&&/p&&p&&b&简介：&/b&&/p&&p&在目前的游戏市场上，手游依然是市场上的主力军，而只有快速上线，玩法系统完善的游戏才能在国内市场中占据份额。而在手游开发过程中，搭建UI系统是非常基本且重要的技能，极端的说如果对Unity的UI系统熟悉，就可以去游戏公司上班了 ：）（笑~）。&/p&&p&但是就像蛋炒饭，最简单的事要做好也是非常困难的。UI这块的变动也经常是整个游戏最频繁的一块，如果没有一个合理的设计思路，和管理方案，后期将会陷入无止境的调试优化之中。&/p&&p&&br&&/p&&p&&br&&/p&&p&万丈高楼平地起，现在让我们开始从Unity中的UGUI系统进行讲解。&/p&&p&&br&&/p&&p&&br&&/p&&p&&b&创建一个UI画布&/b&&/p&&p&直接新建场景，右键Hierarchy窗口，选择UI选项，点击列表中出现的Canvas(画布)选项&/p&&p&&br&&/p&&img src=&/50/v2-16a0fc3c0ecce5035c2fb_b.png& data-rawwidth=&416& data-rawheight=&612& class=&content_image& width=&416&&&p&&br&&/p&&p&&br&&/p&&p&点击之后出现两个物体&/p&&p&&br&&/p&&img src=&/50/v2-b4bbf082e7_b.png& data-rawwidth=&554& data-rawheight=&314& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-b4bbf082e7_r.png&&&p&&br&&/p&&p&&b&Canvas：&/b&UI的画布，我们的UI图片都会在这下面渲染。&/p&&p&&b&EventSystem：&/b&UI的事件系统，很多新手都会选择遗忘掉这个组件，结果后来做了一个按钮出来不能点击，原因就是这个物体被误删了。&/p&&p&&br&&/p&&p&&br&&/p&&p&&b&创建一个Image组件&/b&&/p&&p&在Canvas上右键，选择UI选项中的Image选项&/p&&p&&br&&/p&&img src=&/50/v2-2c5a3d4ea2051bfd87a8a38f_b.png& data-rawwidth=&435& data-rawheight=&650& class=&origin_image zh-lightbox-thumb& width=&435& data-original=&/50/v2-2c5a3d4ea2051bfd87a8a38f_r.png&&&p&&br&&/p&&p&&br&&/p&&p&一个默认的Image图片出现在了游戏框之中&/p&&p&&br&&/p&&img src=&/50/v2-029bfc76f_b.png& data-rawwidth=&554& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-029bfc76f_r.png&&&p&&br&&/p&&p&&br&&/p&&p&注意：UI的图片只会在Canvas下才能看得见，这里我将Image移除了Cansvas，镜头内的图片消失了&/p&&p&&br&&/p&&img src=&/50/v2-69e0ee2b33f1068e27fe_b.png& data-rawwidth=&554& data-rawheight=&355& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-69e0ee2b33f1068e27fe_r.png&&&p&&br&&/p&&p&&br&&/p&&p&&b&RectTransform组件参数说明&/b&&/p&&p&UI的RectTransform组件中涵盖了位置，旋转，缩放，锚点等等信息&/p&&p&&br&&/p&&img src=&/50/v2-db4f6c14cf03e3f_b.png& data-rawwidth=&354& data-rawheight=&429& class=&content_image& width=&354&&&p&&br&&/p&&p&&br&&/p&&p&&b&Width和Height：&/b&一般UI里面放大和缩小图片的宽度和高度都是通过这里来控制的，而不是直接调整缩放值&/p&&p&&b&Anchors：&/b&锚点位置，屏幕的宽高变化时要让UI依然能按照预想的正常显示，就需要通过锚点来定位。&b&具体见后续文章中的屏幕自适应部分内容。&/b&&/p&&p&&b&Pivot：&/b&中心点，该属性定义图片的中心点位置，（0.5,0.5）改好为图片中心。若我们想左右拉长一个横条，想让它只在右边增长，修改中心店位置（0，0.5），中心点位在最左边，调整Width就会只看到横条在右方向的长度变化。&/p&&p&&br&&/p&&p&&b&Image组件的参数说明&/b&&/p&&p&Unity大多用于图片显示的UI组件都会有基础的Image组件&/p&&p&&br&&/p&&img src=&/50/v2-aff1757943fcee6dd25780a_b.png& data-rawwidth=&352& data-rawheight=&154& class=&content_image& width=&352&&&p&&br&&/p&&p&&br&&/p&&p&&b&SourceImage：&/b&该UI显示的图片资源，注意这里只能支持Sprite类型的图片，后面会介绍Sprite类型的图片怎么设置。&/p&&p&&b&Color:&/b&修改该图片的颜色。&/p&&p&&b&Material： &/b&Unity支持自定义图片材质来实现复杂的效果，不填的话默认只用unity已经设置好的UI材质效果。在游戏设计中几乎不会修改这里的内容。&/p&&p&&b&RaycastTarget：&/b& 勾选该选项后，该UI将会响应射线点击，鼠标点击到这个UI物体的时候事件管理器知道我们点击了什么物体，这个参数会和Button组件配合，完成我们的点击操作。&/p&&p&&br&&/p&&p&&br&&/p&&p&&b&创建一个UI图片&/b&&/p&&p&导入一张图片，选择TextureType的类型为Sprite（2D and UI）后，点击Apply。这时Unity会修改图片为Sprite类型的图片，只有这种类型才能放入Image组件中。&b&TextureType的其他参数会放在之后的UI图集知识点中说明。&/b&&/p&&p&&br&&/p&&img src=&/50/v2-6f81e22ad345f7fd89c368bb58291cad_b.png& data-rawwidth=&554& data-rawheight=&413& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-6f81e22ad345f7fd89c368bb58291cad_r.png&&&p&&br&&/p&&p&&br&&/p&&p&直接将图片拖入Image的SourceImage中，图片便渲染出来了，此时图片采用的像素是100X100的像素，只用点击Image新出来的按钮就可以设置为图片本身的像素尺寸。&/p&&p&&br&&/p&&img src=&/50/v2-300cdf070ef442a6060f_b.png& data-rawwidth=&189& data-rawheight=&32& class=&content_image& width=&189&&&p&&br&&/p&&p&&br&&/p&&p&现在图片已经显示出来了：&/p&&p&&br&&/p&&img src=&/50/v2-84d08df02db929db931320bef1dff342_b.png& data-rawwidth=&420& data-rawheight=&388& class=&content_image& width=&420&&&p&&br&&/p&&p&&br&&/p&&p&&b&创建一个Button按钮&/b&&/p&&p&右键选择UI中的Button选项&/p&&p&&br&&/p&&img src=&/50/v2-bfeca373da8cd74f55a00f9_b.png& data-rawwidth=&435& data-rawheight=&657& class=&origin_image zh-lightbox-thumb& width=&435& data-original=&/50/v2-bfeca373da8cd74f55a00f9_r.png&&&p&&br&&/p&&p&&br&&/p&&p&创建出来的Button只有Button和Text两个物体，Text是unity的文字显示组件，Button的功能本身和Text没有任何关联，因此这里可以将Text删除掉（Unity将Text和button一起创建主要是因为按钮带文字更加常见）&/p&&p&&br&&/p&&p&&br&&/p&&img src=&/50/v2-efaed54ec93_b.png& data-rawwidth=&554& data-rawheight=&416& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-efaed54ec93_r.png&&&p&&br&&/p&&p&Button物体上只有两个组件，一个组件是之前介绍过的Image组件，一个是按钮功能相关的Button组件。我们导入一张新的图进入工程，改变图片格式成Sprite格式后拖到Image上，然后点击SetNativeSize按钮修改RectTransform中的宽度高度和原图片相同。&/p&&p&&br&&/p&&img src=&/50/v2-e490a67c9fc840b948ad5b766a094bfd_b.png& data-rawwidth=&378& data-rawheight=&561& class=&content_image& width=&378&&&p&&br&&/p&&p&&br&&/p&&p&按钮UI显示了出来，运行游戏，点击这个按钮会发现UI颜色会变化，说明按钮功能生效了。&/p&&p&&br&&/p&&img src=&/50/v2-d45e8e19f22_b.png& data-rawwidth=&554& data-rawheight=&316& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-d45e8e19f22_r.png&&&p&&br&&/p&&p&&br&&/p&&p&&b&Button组件参数说明&/b&&/p&&p&&br&&/p&&p&&br&&/p&&img src=&/50/v2-3cdeb82f5c1f54a24313d5_b.png& data-rawwidth=&228& data-rawheight=&260& class=&content_image& width=&228&&&p&&br&&/p&&p&&b&Interactable：&/b&是否开启按钮交互，若取消则按钮会变成DisabledColor选择的颜色，此时按钮不会响应点击操作。&/p&&p&&b&TargetGraphic：&/b&Button组件绑定的Image组件，注意如果该项为空按钮点击事件将会失效，同时是有按钮绑定的Image组件勾选了RaycastTarget参数才能有点击效果。&/p&&p&&b&Transition：&/b&按钮的点击效果类型，unity自带了3种类型，分别为Color Tint(颜色变化），Sprite Swap(图片切换),Animation (动画变化)。不同类型对应的Normal XXX，Highlighted XXX，Pressed XXX，Disabled XXX，分别为按钮不点击时效果、鼠标移动到按钮时效果、点击时效果和未激活时效果。&/p&&p&&b&OnClick()：&/b& 点击事件，可以关联点击按钮后的行为至我们自己写的代码中。&b&后续的文章会继续讲解UGUI的事件处理&/b&&/p&&p&&br&&/p&&p&&b&创建一个Text文本框&/b&&/p&&p&右键Canvas，选择UI中的Text组件&/p&&p&&br&&/p&&img src=&/50/v2-9b75aefec0_b.png& data-rawwidth=&410& data-rawheight=&660& class=&content_image& width=&410&&&p&&br&&/p&&p&&br&&/p&&p&&b&Text组件的参数说明&/b&&/p&&p&&br&&/p&&img src=&/50/v2-0d60ea24f5c76e7ba8c807b03f7c8887_b.png& data-rawwidth=&554& data-rawheight=&290& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-0d60ea24f5c76e7ba8c807b03f7c8887_r.png&&&p&&br&&/p&&p&上面的text创建出来不明显，因为我们参数还未开始设置，首先我们来看下Text组件的参数：&/p&&p&&b&Font：&/b&字体设置，unity默认字体是Arial。可以从我的电脑中选取其他字体替换，也可以网上下载放在unity中替换。&/p&&p&&br&&/p&&img src=&/50/v2-e65880b5adbd4a4ff9f87_b.png& data-rawwidth=&554& data-rawheight=&228& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-e65880b5adbd4a4ff9f87_r.png&&&p&&br&&/p&&p&&br&&/p&&p&&b&FontStyle：&/b&字体的加粗，倾斜等设置。&/p&&p&&b&FontSize: &/b&字体大小设置，这里注意字体设置如果过大，超过了RectTransform设置的宽度或高度将不会显示字体(很多时候美术PS中的字体大小和unity的字体大小有区别的，应该统一用像素大小来统一)。&/p&&p&&b&LineSpacing：&/b&行间距，这个参数unity介绍的不清楚。其实他间隔的是你当前字体大小的倍数。&/p&&p&如果为1为以下效果：&/p&&p&&br&&/p&&img src=&/50/v2-4b47a2b46ba413a278f171_b.png& data-rawwidth=&506& data-rawheight=&64& class=&origin_image zh-lightbox-thumb& width=&506& data-original=&/50/v2-4b47a2b46ba413a278f171_r.png&&&p&&br&&/p&&p&&br&&/p&&p&如果为2则字体中间间隔了一个字体size的大小：&/p&&p&&br&&/p&&img src=&/50/v2-f9b1fc464ee58cc0277c1efcf8417dae_b.png& data-rawwidth=&398& data-rawheight=&88& class=&content_image& width=&398&&&p&&br&&/p&&p&&br&&/p&&p&&b&RichText：&/b&富文本选项，该选项如果勾选，可以通过加入颜色命令字符来修改字体颜色（例：&color=#525252&变色的内容&/color&）。游戏的公告的编辑就需要该功能。&/p&&p&&b&Paragraph：&/b&&/p&&p&Alignment为设置文件上下左右居中等对齐效果&/p&&p&AlignByGeometry为几何对齐，图文混排的时候需要该功能配合&/p&&p&HorizontalOverflow和VerticalOverflow分别为水平和竖直换行，如果Wrap和Truncate选项，内容将会束缚在设置定宽度高度之内，如果选项为Overflow内容将会超出设定的边界。&/p&&p&&b&BestFit：&/b&勾选这个选项，字体将会以RectTransform的宽度高度边界，动态修改字体大小让所有内容刚好填充满这个框。&/p&&p&&b&Color：&/b&字体颜色，若用了富文本修改颜色，则不会改变用到了富文本的字体颜色。&/p&&p&&br&&/p&&img src=&/50/v2-637c646da465b75f5837151bcaee0c86_b.png& data-rawwidth=&554& data-rawheight=&323& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-637c646da465b75f5837151bcaee0c86_r.png&&&p&&br&&/p&&p&&br&&/p&&p&&b&RaycastTarget：&/b&和Image一样，勾选该选项后，该UI会屏蔽射线，鼠标点击到这个字体的时候下面如果有按钮区域将会被中止响应。&/p&&p&&br&&/p&&img src=&/50/v2-bb4c1772_b.png& data-rawwidth=&387& data-rawheight=&590& class=&content_image& width=&387&&&p&&br&&/p&&p&&br&&/p&&p&&b&简单处理UI的遮挡关系&/b&&/p&&p&UGUI中的层级是根据Hierarchy中，物体的上下关系来决定的。&/p&&p&Button在Image的下面，所以游戏窗口中button遮挡了Image&/p&&p&&br&&/p&&img src=&/50/v2-784b34c846bab90c6d43f4f_b.png& data-rawwidth=&550& data-rawheight=&323& class=&origin_image zh-lightbox-thumb& width=&550& data-original=&/50/v2-784b34c846bab90c6d43f4f_r.png&&&p&&br&&/p&&p&&br&&/p&&p&若Image在button下面，Image将会遮挡button&/p&&p&&br&&/p&&img src=&/50/v2-b8204b9eca1b2c33d738e_b.png& data-rawwidth=&554& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-b8204b9eca1b2c33d738e_r.png&&&p&&br&&/p&&p&&br&&/p&&p&&b&创建一个界面&/b&&/p&&p&利用Image、Button和Text组件已经可以实现许多功能界面了，接下来用刚才讲到的内容拼接一个简单的音乐播放界面出来。&/p&&p&简单创建一个纯色的背景，暂定为灰黑色，宽度高度设置成屏幕的宽度高度分辨率，屏幕分辨率可以在Game窗口下设置。&/p&&p&&br&&/p&&img src=&/50/v2-cf3b3be8a7fe4ef6c00711c_b.png& data-rawwidth=&554& data-rawheight=&171& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-cf3b3be8a7fe4ef6c00711c_r.png&&&p&&br&&/p&&p&&br&&/p&&p&背景图片参数：&/p&&p&&br&&/p&&img src=&/50/v2-2e611fdae8f2_b.png& data-rawwidth=&383& data-rawheight=&422& class=&content_image& width=&383&&&p&&br&&/p&&p&&br&&/p&&p&添加三个按钮：&/p&&p&&br&&/p&&img src=&/50/v2-ffafdac47d_b.png& data-rawwidth=&554& data-rawheight=&214& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-ffafdac47d_r.png&&&p&&br&&/p&&p&&br&&/p&&p&相反的图片只用修改旋转值便可以了：&/p&&p&&br&&/p&&img src=&/50/v2-8df98ac17a1dd0f52cb2dd_b.png& data-rawwidth=&388& data-rawheight=&182& class=&content_image& width=&388&&&p&&br&&/p&&p&&br&&/p&&p&创建一个Text，大小调整好后摆一个喜欢的位置：&/p&&p&&br&&/p&&img src=&/50/v2-25a20fdcdad8be_b.png& data-rawwidth=&384& data-rawheight=&679& class=&content_image& width=&384&&&p&&br&&/p&&p&&br&&/p&&p&最后放上一个CD图标~&/p&&p&&br&&/p&&img src=&/50/v2-676bafd43cc8f4fb54ca12a_b.png& data-rawwidth=&382& data-rawheight=&441& class=&content_image& width=&382&&&p&&br&&/p&&p&&br&&/p&&p&整体界面完成：&/p&&p&注意我们应该注重层级窗口中，对GameObject的命名格式规范，这样我们便于在之后复杂的界面中去查找和修改我们的组件。&/p&&p&&br&&/p&&img src=&/50/v2-92c6f2f47d472e37bdc0_b.png& data-rawwidth=&554& data-rawheight=&374& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/50/v2-92c6f2f47d472e37bdc0_r.png&&&p&&br&&/p&&p&&br&&/p&&p&&b&总结：&/b&&/p&&p&这一篇的教程主要是基础组件的学习，可以说UGUI的其他组件都是根据Button，Image，Text组件拼接而成的。下一篇会针对UI的事件进行讲解，了解完后就能开始添加按钮功能，点击按钮完成界面变化和脚本功能的响应。&/p&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&p&对游戏开发感兴趣的同学，欢迎围观我们：【皮皮关游戏开发教育】 ，会定期更新各种教程干货，更有别具一格的线下小班教育。在你学习进步的路上，有皮皮关陪你！~&/p&&p&我们的官网地址：&u&&a href=&/?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&/u&&/p&&p&我们的游戏开发技术交流群：&/p&&p&我们的微信公众号：皮皮关&/p&
简介：在目前的游戏市场上，手游依然是市场上的主力军，而只有快速上线，玩法系统完善的游戏才能在国内市场中占据份额。而在手游开发过程中，搭建UI系统是非常基本且重要的技能，极端的说如果对Unity的UI系统熟悉，就可以去游戏公司上班了 ：）（笑~）。但…
&img src=&/50/v2-a125b857c1e96b95d43df9b7b155f780_b.jpg& data-rawwidth=&1500& data-rawheight=&848& class=&origin_image zh-lightbox-thumb& width=&1500& data-original=&/50/v2-a125b857c1e96b95d43df9b7b155f780_r.jpg&&&h2&&b&0x00 前言&/b&&/h2&&p&有一段时间没有更新博客了，在考虑写点什么的时候正好赶上了这个月我的书《Unity 3D脚本编程》又加印了。因此写篇小文聊聊利用shader来实现翻书的效果吧。&/p&&p&虽然本文是这个周日下午雨天的临时起意，而演示的Demo也有广告之嫌，但是还是希望各位看官如果觉得有收获的话能够点赞支持。&/p&&p&&br&&/p&&h2&&b&0x01 Vertex Shader&/b&&/h2&&p&之前看到过类似“Unity怎么实现类似书本的翻页效果”之类的问题，答案大多是利用现成的插件来实现，这听上去似乎并没有实际上解决这个问题。后来又看到过一些更靠谱的解决方案例如利用UGUI的vertex modifier修改顶点、或者使用骨骼动画。&/p&&p&等一下，修改顶点？&/p&&p&修改网格数据这事没有必要一定要在cpu上进行，我们把这活放到GPU上让它来实现顶点的修改是不是更有趣一点呢。&/p&&p&事实上我们只需要一个Plane，在vs中根据某个属性来修改它顶点的x值和y值。&/p&&p&&br&&/p&&img src=&/v2-3bf3eacbc021a45f_b.png& data-rawwidth=&1071& data-rawheight=&872& class=&origin_image zh-lightbox-thumb& width=&1071& data-original=&/v2-3bf3eacbc021a45f_r.png&&&p&而一个最简单的修改方案，就是根据玩家的翻页角度theta来更改顶点的坐标。 &/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span& float4 flip_book(float4 vertex)
temp.x = vertex.x * cos(theta);
temp.y = vertex.x * sin(theta);
&/code&&/pre&&/div&&p&那么theta的值是怎么来的呢？一页书的翻动角度在[0,180]之间，变成弧度值就是[0,π]，因此我们只需要在脚本中计算玩家拖动的距离和总长度的一个比例ratioValue，将这个ratioValue传递给vs后再和π相乘就求得了theta。&/p&&p&因此，在C#脚本中就需要使用这几个接口了。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&IDragHandler, IPointerDownHandler, IPointerUpHandler
&/code&&/pre&&/div&&p&这样，在只经过一个pass的情况下，翻页的初步效果已经实现了。&/p&&p&&br&&/p&&img src=&/v2-30bc10d44f19cd4b30a807dca74cdd37_b.jpg& data-rawwidth=&1084& data-rawheight=&844& data-thumbnail=&/v2-30bc10d44f19cd4b30a807dca74cdd37_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1084& data-original=&/v2-30bc10d44f19cd4b30a807dca74cdd37_r.gif&&&p&但是如果翻过90°，可以发现此时不仅第二页没有内容，而且第一页的背面也是空的。&/p&&p&&br&&/p&&img src=&/v2-4ec3e90fafe5d2f39d9e65_b.png& data-rawwidth=&1230& data-rawheight=&836& class=&origin_image zh-lightbox-thumb& width=&1230& data-original=&/v2-4ec3e90fafe5d2f39d9e65_r.png&&&p&因此，我们还需要另外2个Pass分别渲染第一页的背面和第二页的内容。&/p&&h2&&b&0x02 3个Pass&/b&&/h2&&p&ok，接下来我们就来完成第二个pass。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span& fixed4 frag_flip_back (v2f i) : SV_Target
i.uv.x = 1 - i.uv.x;
fixed4 col = tex2D(_BackTex, i.uv);
//翻起来的背面
Cull Front
#pragma vertex vert_flip
#pragma fragment frag_flip_back
&/code&&/pre&&/div&&p&其实很简单，只需要剔除正面，修改一下uv，然后正常的采用背面的纹理_BackTex就ok了。&/p&&img src=&/v2-aacabb999719_b.jpg& data-rawwidth=&1084& data-rawheight=&844& data-thumbnail=&/v2-aacabb999719_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1084& data-original=&/v2-aacabb999719_r.gif&&&p&可以看到当书页被翻过90°之后，书页的背面已经能够正确的显示了。&/p&&p&之后就是最后一个pass了，我们用这个pass来显示第二页的内容。&/p&&p&其实这个pass很简单，仍然是只需要正常的采用背面的纹理_BackTex就ok了。但是这里要注意一个问题，那就是深度的问题。还记得第一个pass吗？第一个pass绘制了第一页的内容。但是最后一个pass同样也要绘制页面的内容，而且默认情况下深度会覆盖第一个pass绘制的内容。&/p&&p&&br&&/p&&img src=&/v2-e8fd5b177b7db63ddc2896_b.png& data-rawwidth=&1032& data-rawheight=&845& class=&origin_image zh-lightbox-thumb& width=&1032& data-original=&/v2-e8fd5b177b7db63ddc2896_r.png&&&p&因此，我们要在最后一个pass中正确的处理深度问题，所以我在这里使用了Offset。&br&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span& //第二页
Offset 1, 1
#pragma vertex vert_next_page
#pragma fragment frag_flip_back
&/code&&/pre&&/div&&p&OK，shader部分完工了。之后我们只需要在C#脚本中简单的确定当前的页数，来设置相应的前页的tex和后页的tex给shader。&br&最后的结果大概是这个样子的。&/p&&p&&br&&/p&&img src=&/v2-668a45a565fdcdd69e900e9_b.jpg& data-rawwidth=&500& data-rawheight=&389& data-thumbnail=&/v2-668a45a565fdcdd69e900e9_b.jpg& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&/v2-668a45a565fdcdd69e900e9_r.gif&&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&h2&0x03 Update一下&/h2&&p&当然，为了让翻书的效果更自然，为翻动中的书页增加一些弧度似乎是一个不错的选择。&br&&br&其实原理也并不复杂，在vs修改顶点位置的时候处理就好了。首先来看看翻页时候页面弯曲的一个大概形状，似乎有点像钟型？&br&&br&而一说到钟型，各位应该能够想到高斯函数了吧？&br&&br&所以，接下来我们画一个简单的高斯函数图形。&br&&br&&/p&&img src=&/v2-d840e6e0c69_b.png& data-rawwidth=&1675& data-rawheight=&653& class=&origin_image zh-lightbox-thumb& width=&1675& data-original=&/v2-d840e6e0c69_r.png&&&p&（推荐一下这个&a href=&/?target=https%3A//www.geogebra.org/graphing& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在线图形计算器&i class=&icon-external&&&/i&&/a&）&br&&br&它大概就长这样。&br&&br&所以在vs修改顶点坐标时，把这个高斯函数考虑进去，就能够获取一个更自然的效果了。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&
float flipCurve = exp(-0.1 * pow(vertex.x - 0.5, 2)) * _CurPageA
theta += flipC
temp.x = vertex.x * cos(clamp(theta, 0, pi));
temp.y = vertex.x * sin(clamp(theta, 0, pi));
&/code&&/pre&&/div&&p&&br&&/p&&img src=&/v2-404d5937886cadc8c0e1bed91a75b6eb_b.jpg& data-rawwidth=&558& data-rawheight=&332& data-thumbnail=&/v2-404d5937886cadc8c0e1bed91a75b6eb_b.jpg& class=&origin_image zh-lightbox-thumb& width=&558& data-original=&/v2-404d5937886cadc8c0e1bed91a75b6eb_r.gif&&&p&&br&不过这里又有一个新的问题需要考虑，就是变成了弧形的书页可能会导致深度上的问题。&br&&br&这个问题主要是在第二个pass，在翻书和前一页快重合时，因为第二个pass中的某些顶点的深度要大于第一个pass的深度，从而造成穿帮。所以在第二个pass的时候就要加上Offset -1 -1了。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&
//翻起来的背面
Cull Front
Offset -1, -1
#pragma vertex vert_flip
#pragma fragment frag_flip_back
&/code&&/pre&&/div&&p&当然，这个demo的代码各位可以在这里获取：&/p&&p&&a href=&/?target=https%3A///chenjd/Unity-Flip-Book-With-Shader& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&chenjd/Unity-Flip-Book-With-Shader&i class=&icon-external&&&/i&&/a& &/p&&p&&br&&/p&&p&最后祝各位七夕节快乐。&/p&&p&&br&&/p&&p&-EOF-&br&最后打个广告，欢迎支持我的书&u&&a href=&/?target=https%3A///.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《Unity 3D脚本编程》&i class=&icon-external&&&/i&&/a&&/u&&/p&&p&&br&&/p&&img src=&/v2-aec4df4f86ae6a51ca6013e7deb5a9bc_b.jpg& data-rawwidth=&522& data-rawheight=&668& class=&origin_image zh-lightbox-thumb& width=&522& data-original=&/v2-aec4df4f86ae6a51ca6013e7deb5a9bc_r.jpg&&&p&&br&&/p&&p&欢迎大家关注我的公众号慕容的游戏编程：chenjd01&/p&&p&&br&&/p&&img src=&/v2-0c05b713cc4d73a5f79459eaf472c771_b.png& data-rawwidth=&400& data-rawheight=&400& class=&content_image& width=&400&&&p&&/p&&p&&/p&
0x00 前言有一段时间没有更新博客了，在考虑写点什么的时候正好赶上了这个月我的书《Unity 3D脚本编程》又加印了。因此写篇小文聊聊利用shader来实现翻书的效果吧。虽然本文是这个周日下午雨天的临时起意，而演示的Demo也有广告之嫌，但是还是希望各位看官…
&p&有个老外对于解剖泰拉瑞亚做了很多出色工作，这是他的博客&/p&&p&地形编辑器 &a href=&///?target=http%3A///terrafirma/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Terrafirma - Mapping for Terraria&i class=&icon-external&&&/i&&/a&&/p&&p&地表贴图uv分布 &a href=&///?target=http%3A///terrafirma/uvs.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/terrafirma&/span&&span class=&invisible&&/uvs.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&wld文件格式解析 &a href=&///?target=http%3A///terrafirma/world.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/terrafirma&/span&&span class=&invisible&&/world.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&github仓库 &a href=&///?target=https%3A///mrkite/TerraFirma& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mrkite/TerraFirma&i class=&icon-external&&&/i&&/a&&/p&
有个老外对于解剖泰拉瑞亚做了很多出色工作，这是他的博客地形编辑器 地表贴图uv分布 wld文件格式解析 github仓库
unity本来就是忽悠电影行业忽悠不成才来游戏行业发展的，为啥unity潜伏了10多年才爆发？因为终于有个行业，只要你能拿出Demo就能忽悠到钱了（特指2013到15年游戏行业）！&br&unity做东西很多时候就是一种it just work的味道，而恰好别的行业不好混的那批＂程序员＂也就擅长凑个效果忽悠啥也不懂只能吹逼的游戏策划（占行业游戏策划人口95％以上），于是一拍即合，马上火了！&br&现在你竟然指望它回归原方向？人自然还是懂得审时度势的才吃得开！
unity本来就是忽悠电影行业忽悠不成才来游戏行业发展的，为啥unity潜伏了10多年才爆发？因为终于有个行业，只要你能拿出Demo就能忽悠到钱了（特指2013到15年游戏行业）！ unity做东西很多时候就是一种it just work的味道，而恰好别的行业不好混的那批＂程序…
&img src=&/50/v2-bc95f0ffe2d0af54d7dc_b.png& data-rawwidth=&400& data-rawheight=&256& class=&content_image& width=&400&&&blockquote&此文为 &a href=&/taiyouxi& class=&internal&&钛核互动·喵小逗&/a& 原创文章，转载请注明出处。&/blockquote&&p&在Unity移动平台的游戏开发过程中，贴图资源是往往是占资源量最大的资源。如何在保证视觉效果的同时，尽可能的减少贴图资源，是开发团队会经常遇到的问题。通常来说，对于3D物体的纹理，是可以采用ETC/PVRTC等压缩比很大的算法处理的，但是对于细节要求很高的UI纹理，这样处理造成的失真往往达不到质量要求。对于这类的贴图，我们可以考虑使用失真较小的16位的贴图格式存储。&/p&&p&但是对于颜色数较高的纹理，Unity提供的默认转换方法会呈现明显的色带。针对该问题，keijiro实现了一种&a href=&/?target=https%3A///keijiro/unity-dither4444& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&dither4444的改进算法&i class=&icon-external&&&/i&&/a&。从图1上可以看到，对于画面细节比较平滑的图片，该算法虽然消除了色带现象，同时带来了肉眼可见的噪点。&/p&&img src=&/50/v2-56f3beaf025c1dce9af7af37c1850665_b.png& data-rawwidth=&513& data-rawheight=&258& class=&origin_image zh-lightbox-thumb& width=&513& data-original=&/50/v2-56f3beaf025c1dce9af7af37c1850665_r.png&&&p&&图1&
右:keijiro的dither4444示意图 &/p&&p&笔者在keijiro的算法基础上进行了改进，提供了一个将RGB24bit图dither之后转RGB565的方法，基本消除了肉眼可见的失真，实际效果见图2。 &/p&&img src=&/50/v2-95a3afd38501baad5c6d_b.png& data-rawwidth=&1666& data-rawheight=&564& class=&origin_image zh-lightbox-thumb& width=&1666& data-original=&/50/v2-95a3afd38501baad5c6d_r.png&&&p&&图2&
右:笔者的dither565示意图 &/p&&p&实际在我的项目的应用中，对于不适合ETC/PVRTC压缩的图片，都采用了该文章中的RGB565或者RGB565+A8的方式。在肉眼基本无失真的基础上，节省了部分资源。&/p&&p&最后附上OnPostprocessTexture代码&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&void&/span& &span class=&nf&&OnPostprocessTexture&/span& &span class=&p&&(&/span&&span class=&n&&Texture2D&/span& &span class=&n&&texture&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&assetPath&/span&&span class=&p&&.&/span&&span class=&n&&Contains&/span& &span class=&p&&(&/span&&span class=&s&&&_dither565&&/span&&span class=&p&&))&/span&
&span class=&p&&{&/span&
&span class=&kt&&var&/span& &span class=&n&&texw&/span& &span class=&p&&=&/span& &span class=&n&&texture&/span&&span class=&p&&.&/span&&span class=&n&&width&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&texh&/span& &span class=&p&&=&/span& &span class=&n&&texture&/span&&span class=&p&&.&/span&&span class=&n&&height&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&pixels&/span& &span class=&p&&=&/span& &span class=&n&&texture&/span&&span class=&p&&.&/span&&span class=&n&&GetPixels&/span& &span class=&p&&();&/span&
&span class=&kt&&var&/span& &span class=&n&&offs&/span& &span class=&p&&=&/span& &span class=&m&&0&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k1Per31&/span& &span class=&p&&=&/span& &span class=&m&&1.0f&/span& &span class=&p&&/&/span& &span class=&m&&31.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k1Per32&/span& &span class=&p&&=&/span& &span class=&m&&1.0f&/span& &span class=&p&&/&/span& &span class=&m&&32.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k5Per32&/span& &span class=&p&&=&/span& &span class=&m&&5.0f&/span& &span class=&p&&/&/span& &span class=&m&&32.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k11Per32&/span& &span class=&p&&=&/span& &span class=&m&&11.0f&/span& &span class=&p&&/&/span& &span class=&m&&32.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k15Per32&/span& &span class=&p&&=&/span& &span class=&m&&15.0f&/span& &span class=&p&&/&/span& &span class=&m&&32.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k1Per63&/span& &span class=&p&&=&/span& &span class=&m&&1.0f&/span& &span class=&p&&/&/span& &span class=&m&&63.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k3Per64&/span& &span class=&p&&=&/span& &span class=&m&&3.0f&/span& &span class=&p&&/&/span& &span class=&m&&64.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k11Per64&/span& &span class=&p&&=&/span& &span class=&m&&11.0f&/span& &span class=&p&&/&/span& &span class=&m&&64.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k21Per64&/span& &span class=&p&&=&/span& &span class=&m&&21.0f&/span& &span class=&p&&/&/span& &span class=&m&&64.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k29Per64&/span& &span class=&p&&=&/span& &span class=&m&&29.0f&/span& &span class=&p&&/&/span& &span class=&m&&64.0f&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&k_r&/span& &span class=&p&&=&/span& &span class=&m&&32&/span&&span class=&p&&;&/span& &span class=&c1&&//R&B压缩到5位，所以取2的5次方&/span&
&span class=&kt&&var&/span& &span class=&n&&k_g&/span& &span class=&p&&=&/span& &span class=&m&&64&/span&&span class=&p&&;&/span& &span class=&c1&&//G压缩到6位，所以取2的6次方&/span&
&span class=&k&&for&/span&&span class=&p&&(&/span&&span class=&kt&&var&/span& &span class=&n&&y&/span& &span class=&p&&=&/span& &span class=&m&&0&/span&&span class=&p&&;&/span& &span class=&n&&y&/span& &span class=&p&&&&/span& &span class=&n&&texh&/span&&span class=&p&&;&/span& &span class=&n&&y&/span&&span class=&p&&++){&/span&
&span class=&k&&for&/span&&span class=&p&&(&/span&&span class=&kt&&var&/span& &span class=&n&&x&/span& &span class=&p&&=&/span& &span class=&m&&0&/span&&span class=&p&&;&/span& &span class=&n&&x&/span& &span class=&p&&&&/span& &span class=&n&&texw&/span&&span class=&p&&;&/span& &span class=&n&&x&/span&&span class=&p&&++){&/span&
&span class=&kt&&float&/span& &span class=&n&&r&/span& &span class=&p&&=&/span& &span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&offs&/span&&span class=&p&&].&/span&&span class=&n&&r&/span&&span class=&p&&;&/span&
&span class=&kt&&float&/span& &span class=&n&&g&/span& &span class=&p&&=&/span& &span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&offs&/span&&span class=&p&&].&/span&&span class=&n&&g&/span&&span class=&p&&;&/span&
&span class=&kt&&float&/span& &span class=&n&&b&/span& &span class=&p&&=&/span& &span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&offs&/span&&span class=&p&&].&/span&&span class=&n&&b&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&r2&/span& &span class=&p&&=&/span& &span class=&n&&Mathf&/span&&span class=&p&&.&/span&&span class=&n&&Clamp01&/span& &span class=&p&&(&/span&&span class=&n&&Mathf&/span&&span class=&p&&.&/span&&span class=&n&&Floor&/span& &span class=&p&&(&/span&&span class=&n&&r&/span& &span class=&p&&*&/span& &span class=&n&&k_r&/span&&span class=&p&&)&/span& &span class=&p&&*&/span& &span class=&n&&k1Per31&/span&&span class=&p&&);&/span&
&span class=&kt&&var&/span& &span class=&n&&g2&/span& &span class=&p&&=&/span& &span class=&n&&Mathf&/span&&span class=&p&&.&/span&&span class=&n&&Clamp01&/span& &span class=&p&&(&/span&&span class=&n&&Mathf&/span&&span class=&p&&.&/span&&span class=&n&&Floor&/span& &span class=&p&&(&/span&&span class=&n&&g&/span& &span class=&p&&*&/span& &span class=&n&&k_g&/span&&span class=&p&&)&/span& &span class=&p&&*&/span& &span class=&n&&k1Per63&/span&&span class=&p&&);&/span&
&span class=&kt&&var&/span& &span class=&n&&b2&/span& &span class=&p&&=&/span& &span class=&n&&Mathf&/span&&span class=&p&&.&/span&&span class=&n&&Clamp01&/span& &span class=&p&&(&/span&&span class=&n&&Mathf&/span&&span class=&p&&.&/span&&span class=&n&&Floor&/span& &span class=&p&&(&/span&&span class=&n&&b&/span& &span class=&p&&*&/span& &span class=&n&&k_r&/span&&span class=&p&&)&/span& &span class=&p&&*&/span& &span class=&n&&k1Per31&/span&&span class=&p&&);&/span&
&span class=&kt&&var&/span& &span class=&n&&re&/span& &span class=&p&&=&/span& &span class=&n&&r&/span& &span class=&p&&-&/span& &span class=&n&&r2&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&ge&/span& &span class=&p&&=&/span& &span class=&n&&g&/span& &span class=&p&&-&/span& &span class=&n&&g2&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&be&/span& &span class=&p&&=&/span& &span class=&n&&b&/span& &span class=&p&&-&/span& &span class=&n&&b2&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&n1&/span& &span class=&p&&=&/span& &span class=&n&&offs&/span& &span class=&p&&+&/span& &span class=&m&&1&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&n2&/span& &span class=&p&&=&/span& &span class=&n&&offs&/span& &span class=&p&&+&/span& &span class=&n&&texw&/span& &span class=&p&&-&/span& &span class=&m&&1&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&n3&/span& &span class=&p&&=&/span& &span class=&n&&offs&/span& &span class=&p&&+&/span& &span class=&n&&texw&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&n4&/span& &span class=&p&&=&/span& &span class=&n&&offs&/span& &span class=&p&&+&/span& &span class=&n&&texw&/span& &span class=&p&&+&/span& &span class=&m&&1&/span&&span class=&p&&;&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&x&/span& &span class=&p&&&&/span& &span class=&n&&texw&/span& &span class=&p&&-&/span& &span class=&m&&1&/span&&span class=&p&&){&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n1&/span&&span class=&p&&].&/span&&span class=&n&&r&/span& &span class=&p&&+=&/span& &span class=&n&&re&/span& &span class=&p&&*&/span& &span class=&n&&k15Per32&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n1&/span&&span class=&p&&].&/span&&span class=&n&&g&/span& &span class=&p&&+=&/span& &span class=&n&&ge&/span& &span class=&p&&*&/span& &span class=&n&&k29Per64&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n1&/span&&span class=&p&&].&/span&&span class=&n&&b&/span& &span class=&p&&+=&/span& &span class=&n&&be&/span& &span class=&p&&*&/span& &span class=&n&&k15Per32&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&y&/span& &span class=&p&&&&/span& &span class=&n&&texh&/span& &span class=&p&&-&/span& &span class=&m&&1&/span&&span class=&p&&){&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n3&/span&&span class=&p&&].&/span&&span class=&n&&r&/span& &span class=&p&&+=&/span& &span class=&n&&re&/span& &span class=&p&&*&/span& &span class=&n&&k11Per32&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n3&/span&&span class=&p&&].&/span&&span class=&n&&g&/span& &span class=&p&&+=&/span& &span class=&n&&ge&/span& &span class=&p&&*&/span& &span class=&n&&k21Per64&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n3&/span&&span class=&p&&].&/span&&span class=&n&&b&/span& &span class=&p&&+=&/span& &span class=&n&&be&/span& &span class=&p&&*&/span& &span class=&n&&k11Per32&/span&&span class=&p&&;&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&x&/span& &span class=&p&&&&/span& &span class=&m&&0&/span&&span class=&p&&){&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n2&/span&&span class=&p&&].&/span&&span class=&n&&r&/span& &span class=&p&&+=&/span& &span class=&n&&re&/span& &span class=&p&&*&/span& &span class=&n&&k5Per32&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n2&/span&&span class=&p&&].&/span&&span class=&n&&g&/span& &span class=&p&&+=&/span& &span class=&n&&ge&/span& &span class=&p&&*&/span& &span class=&n&&k11Per64&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n2&/span&&span class=&p&&].&/span&&span class=&n&&b&/span& &span class=&p&&+=&/span& &span class=&n&&be&/span& &span class=&p&&*&/span& &span class=&n&&k5Per32&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&x&/span& &span class=&p&&&&/span& &span class=&n&&texw&/span& &span class=&p&&-&/span& &span class=&m&&1&/span&&span class=&p&&){&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n4&/span&&span class=&p&&].&/span&&span class=&n&&r&/span& &span class=&p&&+=&/span& &span class=&n&&re&/span& &span class=&p&&*&/span& &span class=&n&&k1Per32&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n4&/span&&span class=&p&&].&/span&&span class=&n&&g&/span& &span class=&p&&+=&/span& &span class=&n&&ge&/span& &span class=&p&&*&/span& &span class=&n&&k3Per64&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&n4&/span&&span class=&p&&].&/span&&span class=&n&&b&/span& &span class=&p&&+=&/span& &span class=&n&&be&/span& &span class=&p&&*&/span& &span class=&n&&k1Per32&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&offs&/span&&span class=&p&&].&/span&&span class=&n&&r&/span& &span class=&p&&=&/span& &span class=&n&&r2&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&offs&/span&&span class=&p&&].&/span&&span class=&n&&g&/span& &span class=&p&&=&/span& &span class=&n&&g2&/span&&span class=&p&&;&/span&
&span class=&n&&pixels&/span& &span class=&p&&[&/span&&span class=&n&&offs&/span&&span class=&p&&].&/span&&span class=&n&&b&/span& &span class=&p&&=&/span& &span class=&n&&b2&/span&&span class=&p&&;&/span&
&span class=&n&&offs&/span&&span class=&p&&++;&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&n&&texture&/span&&span class=&p&&.&/span&&span class=&n&&SetPixels&/span& &span class=&p&&(&/span&&span class=&n&&pixels&/span&&span class=&p&&);&/span&
&span class=&n&&EditorUtility&/span&&span class=&p&&.&/span&&span class=&n&&CompressTexture&/span& &span class=&p&&(&/span&&span class=&n&&texture&/span&&span class=&p&&,&/span& &span class=&n&&TextureFormat&/span&&span class=&p&&.&/span&&span class=&n&&RGB565&/span&&span class=&p&&,&/span& &span class=&n&&TextureCompressionQuality&/span&&span class=&p&&.&/span&&span class=&n&&Best&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&&/p&
原创文章，转载请注明出处。在Unity移动平台的游戏开发过程中，贴图资源是往往是占资源量最大的资源。如何在保证视觉效果的同时，尽可能的减少贴图资源，是开发团队会经常遇到的问题。通常来说，对于3D物体的纹理，是可以采用ETC/P…
&p&我来说说让我震惊到的几位大美术神吧，国际的和国内的。&/p&&p& Koola：配色完美，灯光精致，第一眼看到肯定认为是 Vray 神作，还乐于分享经验。必须接受我最大的崇拜之意。&/p&&img src=&/v2-04e8d3d2a76bd68a7c20c4_b.jpg& data-rawwidth=&640& data-rawheight=&361& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/v2-04e8d3d2a76bd68a7c20c4_r.jpg&&&p&&br&&/p&&img src=&/v2-dd7fb58d5f7f1b7b36ac1fecaa88a1af_b.jpg& data-rawwidth=&640& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/v2-dd7fb58d5f7f1b7b36ac1fecaa88a1af_r.jpg&&&p&&br&&/p&&img src=&/v2-e5b4d42df58c6_b.jpg& data-rawwidth=&1280& data-rawheight=&1586& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-e5b4d42df58c6_r.jpg&&&p&&br&&/p&&p&国际上都这么厉害，国内有没有捏，当然有，我关注的是除了技术厉害更愿意分享的，这种才是好态度啊。&/p&&p&杨冰：Lost Soul Aside 一个人做一个游戏，美术这么棒，你还要说啥，从美术设计，场景搭配，动作（我最爱）。&a href=&///?target=https%3A///video/avFfrom%3Dsearch%26seid%3D9954005& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Lost Soul Aside 独立游戏&i class=&icon-external&&&/i&&/a&&/p&&p&一个人两年的课余时间，不泡妞，用来做游戏，这是何等宅啊，，，，所以我也超级期待这个作品。&/p&&img src=&/v2-43dbc6abdeb0fbb1cee1_b.jpg& data-rawwidth=&1280& data-rawheight=&800& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-43dbc6abdeb0fbb1cee1_r.jpg&&&p&&br&&/p&&p&王赫赫：Artstation 红人，作品入了 allegorithmic 作品库，polycount 上口碑不错。也是非常乐于分享经验。 &a href=&///?target=https%3A///z& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Y.H. wang&i class=&icon-external&&&/i&&/a&&/p&&img src=&/v2-20bbf6f9556_b.jpg& data-rawwidth=&1920& data-rawheight=&759& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-20bbf6f9556_r.jpg&&&p&&br&&/p&&p&临时想到这些，有序有时间再补充。&/p&&p&&/p&
我来说说让我震惊到的几位大美术神吧，国际的和国内的。 Koola：配色完美，灯光精致，第一眼看到肯定认为是 Vray 神作，还乐于分享经验。必须接受我最大的崇拜之意。 国际上都这么厉害，国内有没有捏，当然有，我关注的是除了技术厉害更愿意分享的，这种才…
Stain System&br&&br&&img data-rawwidth=&750& data-rawheight=&1334& src=&/v2-fdcc611b7dae3dda9f9f_b.png& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-fdcc611b7dae3dda9f9f_r.png&&&br&题主可以参考一下assetstore里面的这个插件 只有2.3M 里面demo挺全的 有一次gamejam用这个插件做了个小游戏 很好用。&br&不过跟喷射战士比起来可能有点差距，算是个参考吧。&br&&br&&img data-rawwidth=&750& data-rawheight=&1334& src=&/v2-ac7f59c5839b0_b.png& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-ac7f59c5839b0_r.png&&&br&&img data-rawwidth=&750& data-rawheight=&1334& src=&/v2-bb2eeda4e17e48fc2f50bc2_b.png& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-bb2eeda4e17e48fc2f50bc2_r.png&&&br&喷射战士那个感觉是把3d粒子效果用的溜溜的...
Stain System 题主可以参考一下assetstore里面的这个插件 只有2.3M 里面demo挺全的 有一次gamejam用这个插件做了个小游戏 很好用。 不过跟喷射战士比起来可能有点差距，算是个参考吧。 喷射战士那个感觉是把3d粒子效果用的溜溜的...
&img src=&/50/v2-7670ccd92f4d56e34a9a6383cffb705b_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/50/v2-7670ccd92f4d56e34a9a6383cffb705b_r.png&&&p&Unity《亚当》这部实时渲染影片引起了国内外的一致好评，大家或许不知道，场景与角色的模型制作全部由blender建模加blender雕刻完成，unity支持blender源文件热导，这意味着blender只需要保存即可同步到unity中，无需再借助于其他三维格式的支持。&/p&&a class=&video-box& href=&/?target=https%3A///video/290880& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&/v2-950debd0f331f19479d15c.jpg& data-lens-id=&290880&&
&img class=&thumbnail& src=&/v2-950debd0f331f19479d15c.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&/video/290880&/span&
Unity《亚当》这部实时渲染影片引起了国内外的一致好评，大家或许不知道，场景与角色的模型制作全部由blender建模加blender雕刻完成，unity支持blender源文件热导，这意味着blender只需要保存即可同步到unity中，无需再借助于其他三维格式的支持。
&img src=&/50/v2-89a620e5e89aa3db2df4_b.png& data-rawwidth=&933& data-rawheight=&402& class=&origin_image zh-lightbox-thumb& width=&933& data-original=&/50/v2-89a620e5e89aa3db2df4_r.png&&&p&在准备这篇文章的时候，无意之中发现了一个讲不同渲染通道(Rendering Path)的文章，讲了Forward，Deferred 和 Forward+ 三种渲染的流程，而且还附了特别详尽的代码，于是就浪费掉了两个晚上去学习/(ㄒoㄒ)/~~。&/p&&p&千万别错过，要是我当年看过这篇文章说不定就可以把大神们秒了，趁热打铁，那我们就先上算法吧。&/p&&h2&&b&渲染通道（Rendering Path）&/b&&/h2&&p&（这部分的图片均来自以下网站）
&/p&&p&&a href=&/?target=https%3A///forward-plus/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Forward+ Rendering&i class=&icon-external&&&/i&&/a&&/p&&p&&b&向前（Forward）&/b& : 简单粗暴的蛮力算法。对于屏幕上的每个像素，映射到对应物体上，得到投影点，材质，法线以及一系列的数据。然后遍历灯光，计算所有灯光对于该点的作用的光照的数据（简单来说就是一个颜色值），然后进行线性叠加，最后得到该像素点颜色。当然真实的计算中并不是这么简单，还需要考虑反射光等等情况，这里需要用到光线跟踪的技巧，就不展开了。&/p&&p&&b&延迟（Deferred）&/b& : 这个算法核心的思想就是对场景进行预处理。把每个像素点对应的实体物体（opaque objects）上的深度(depth)，法线(normal)，颜色(diffuse)，亮度(specular)和发光环境光(Light Accumulation）等等系数计算好，存放在若干张缓存图中（这里使用的是经典的漫反射模型），&u&由于缓存图的寄存器等级比较高，那么就把多次读取物体信息的时间给省下来了&/u&。还有一个简化思想是，灯光是有影响范围的，把超过影响范围的空间（光强度过小）内的物体剔除掉。比如点光源的影响空间就可以视为一个球，球外面的物体视为不被该光源影响。&/p&&p&值得一提的是在对透明物体（Transparent Objects）的渲染中，该方法退回到向前渲染。&/p&&p&参考网站：&a href=&/?target=https%3A///%23%21Advanced-Lighting/Deferred-Shading& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learn OpenGL, extensive tutorial resource for learning Modern OpenGL&i class=&icon-external&&&/i&&/a&&/p&&p&&b&向前加（Forward+） :&/b& 对向前算法的优化。&u&这个算法的基本思想就是给像素点分组，给每组像素进行统一的光线剔除，这样就把在一个组内的像素判断是否被某光源影响的时间给省掉了，并且可以进行并行计算&/u&。这个算法首先把屏幕上的像素点切分成一些列的网格(grid)，大概是这样：&/p&&p&&br&&/p&&img src=&/v2-be0d7e446eae354f755f6_b.png& data-rawwidth=&900& data-rawheight=&666& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&/v2-be0d7e446eae354f755f6_r.png&&&p&&br&&/p&&p&然后对于每一个大块的网格，分透明和不透明物体进行渲染深度的计算，也就是在这个网格对应的网格视锥（Grid Frustum，也就是这个网格的面和视点连起来然后反向无线延伸形成的一个无限延伸的棱锥）里，需要渲染物体的所有物体的最近和最远的深度（也就是眼睛在这个网格上能看到的物体的最近和最远的距离）。下图中蓝色是不透明物体，黄色是光源，灰色区域是该网格视锥需要考虑的渲染范围。左图是不透明物体，右图是透明物体。&/p&&p&&br&&/p&&img src=&/v2-0889dea3ee234c38a00963eed6bf9ec0_b.png& data-rawwidth=&500& data-rawheight=&241& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&/v2-0889dea3ee234c38a00963eed6bf9ec0_r.png&&&p&&br&&/p&&p&参考延迟渲染的部分，每个光源都是有一个作用范围的。对于每个网格，遍历光源，若是某个光源作用范围进入到了该网格的渲染范围（上图灰色的部分），则该光源被列入该网格的光源列表里。最后对于每个网格内的像素，只用该网格的光源列表进行向前渲染的计算。&/p&&p&（在文章中还有一些存储格式，空间几何算法的说明，这里就不再赘述了）&/p&&p&&b&复杂度&/b&&/p&&p&最后考查一下各个算法的复杂度，光源数为L，物体数为O，屏幕像素数为P×P。&/p&&p&Forward : LOPP&/p&&p&Deferred：(L+O)PP&/p&&p&Forward+：（最坏）LOPP (最好) L+O&/p&&p&&br&&/p&&p&Forward+其实是一个并不是很稳定的算法，但越是复杂的场景，小灯光越多越能够体现Forward+的优势。另外由于算法的原理，Forward+实际上对于方向光源是没有优化的。&/p&&p&以下是实测数据：&/p&&p&对于大灯光为主的场景，延迟（Deferred） 和 向前加（Forward+）的效率相当，比向前（Forward）效果明显的更好。&/p&&p&对于小光源多的场景，向前加（Forward+）的效果明显更好，注意上图的横坐标的数字是指数增加的，用Forward +可以把灯光堆到5000个，我的天！&/p&&p&PS : 根据 Charlie 的评论，这里再给出一个Deferred Rendering的优化：TBDR&/p&&p&这个博客好像写得也比较详细了，我就不再赘述，直接上链接：&/p&&p&&a href=&/?target=https%3A//chengkehan.github.io/TBDR.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Jim's GameDev Blog&i class=&icon-external&&&/i&&/a&&/p&&p&&br&&/p&&h2&&b&光照烘焙&/b&&/h2&&p&把场景中各个物体设置为静态（static），至少是光照贴图静态（light map static）。&/p&&p&&br&&/p&&img src=&/v2-82b100a9edd_b.png& data-rawwidth=&714& data-rawheight=&275& class=&origin_image zh-lightbox-thumb& width=&714& data-original=&/v2-82b100a9edd_r.png&&&p&设置场景的光源属性为烘焙。这里以场景中的方向光源(directional light)为例。设置如下：&/p&&p&&br&&/p&&img src=&/v2-07baa12d6c295732cdf20489_b.png& data-rawwidth=&706& data-rawheight=&557& class=&origin_image zh-lightbox-thumb& width=&706& data-original=&/v2-07baa12d6c295732cdf20489_r.png&&&p&&b&Mode :&/b& 渲染模式。可选的模式为Realtime, Baked, Mixed. Realtime即为实时渲染，Baked为影响烘焙，Mixed为同时影响烘焙和实时。&/p&&p&&b&Indirect Multiplier&/b&: 就是前几个版本里的 bounce intense。在渲染的时候，物体会接收到一些不是直接从光源发射出来的光线，比如从其他物体反射过来的光线。这些光线叫做Indirect light。对这种光线的计算会在一定程度上的影响效率。这里可以把Indirect Multiplier设为0避免这种反射光的计算，然后用其他技术来补充环境反射光。&/p&&p&&b&Shadow Type: &/b&有No shadow, Hard Shadow 和 Soft Shadow三个选项。&u&我们这里选择Soft Shadow, 并且把下面的Baked Shadow Angle 设为15。&/u&由于实际生活中的阳光/灯光并不是方向光/点光源，而是某种体积光，所以会产生软阴影，原理大概如下：&/p&&img src=&/v2-cb705e7b8fb999c747a356_b.png& data-rawwidth=&530& data-rawheight=&283& class=&origin_image zh-lightbox-thumb& width=&530& data-original=&/v2-cb705e7b8fb999c747a356_r.png&&&p&（图片出处&a href=&/?target=https%3A//www.cs.unc.edu/%7Edm/UNC/COMP236/LECTURES/SoftShadows.pdf& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&cs.unc.edu/~dm/UNC/COMP&/span&&span class=&invisible&&236/LECTURES/SoftShadows.pdf&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&/p&&p&投影的计算方法比较有名的有Shadow volume和Shadow mapping。提供一个解释Shadow mapping的传送门：&/p&&p&&a href=&/?target=https%3A///%23%21Advanced-Lighting/Shadows/Shadow-Mapping& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learn OpenGL, extensive tutorial resource for learning Modern OpenGL&i class=&icon-external&&&/i&&/a&&/p&&p&然后打开光照设置窗口，Windows=&Lighting=&Settings&/p&&p&&br&&/p&&img src=&/v2-bf8fcc7c289e1a88cb23d68_b.png& data-rawwidth=&508& data-rawheight=&899& class=&origin_image zh-lightbox-thumb& width=&508& data-original=&/v2-bf8fcc7c289e1a88cb23d68_r.png&&&p&在弹出窗口的Scene框下，设置如上图。&/p&&p&&b&Mixed Lighting - Lighting Mode &/b&这个选项共有四个，分别对应了场景在多大的程度上使用Light Map。比如Backed Indirect表示所有的静态和动态物体都用实时光，Subtractive表示静态和动态物体都用烘焙光（表达不准确，但是大概是这个意思）。下面的链接提供了关于这四个选项的详细说明。&/p&&p&&a href=&/?target=https%3A///threads/lighting-modes-in-5-6-beta-2.447337/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Lighting Modes in 5.6 Beta 2&i class=&icon-external&&&/i&&/a&&/p&&p&&b&Lightmap Resolution&/b& 这个选项决定了光照烘焙的清晰度，要是觉得烘焙光照锯齿严重，可以调高这个参数。&/p&&p&&b&Ambient Occlusion &/b&环境遮挡，这个技术的概念就是，物体的表面会由于其物理上的凹凸导致接收到光线强度的变化。原理如下图所示，在P点接收到的光线由于附近物理表面的遮挡而减少了。&/p&&p&&br&&/p&&img src=&/v2-cefd6b7791_b.png& data-rawwidth=&329& data-rawheight=&211& class=&content_image& width=&329&&&p&其效果嘛，简单来说，就是给物体加上一层阴影，使其棱角更加清晰，明暗交界的部分更加的明显。AO一般分为Object Space和Screen Space两种实现。Object Space 有通过材质贴图的（比如上一节讲的PBR中的AO贴图），或者光照贴图。这里计算的就是Object Space Ambient Occlusion中光照贴图的部分。&/p&&p&其下的参数，distance表示了检测的范围。Indirect Contribution和Direct Contribution分别表示环境光和光源的影响系数。&/p&&p&&b&Final Gather &/b&&u&这个选项需要打开，并且把Ray Count调高到一个合适的数值。&/u&Final Gather 是一个计算非直接光源（也就是环境光，indirect light）的一个技巧。它的主要原理是在受到光照的点向不同角度发射一定数量的射线，计算射线方向的光强度然后求平均。其直观效果是能够增加光照贴图的分辨率。这里找到一篇在Maya里的FG分析的文章，勉强凑合一下吧：&/p&&p&&a href=&/?target=http%3A///tutorials/mentalray_gi_rev2/indoor01.htm& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/tuto&/span&&span class=&invisible&&rials/mentalray_gi_rev2/indoor01.htm&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&这里的Ray Count 就是指射线的数量了。&/p&&p&点击最下面的按钮Generate Lighting。等待数分钟后场景的光照贴图便生成好了。&/p&&p&最终效果如下：&/p&&img src=&/v2-dbae1b9f2b5_b.jpg& data-rawwidth=&1208& data-rawheight=&618& class=&origin_image zh-lightbox-thumb& width=&1208& data-original=&/v2-dbae1b9f2b5_r.jpg&&&p&&/p&&p&&/p&&p&&/p&
在准备这篇文章的时候，无意之中发现了一个讲不同渲染通道(Rendering Path)的文章，讲了Forward，Deferred 和 Forward+ 三种渲染的流程，而且还附了特别详尽的代码，于是就浪费掉了两个晚上去学习/(ㄒoㄒ)/~~。千万别错过，要是我当年看过这篇文章说不定就…
&p&图形学圈子里最近几年还真没什么人做爆炸。能找到的最新的是2011年的procedural生成爆炸效果的文章：&a href=&///?target=http%3A//graphics.c.u-tokyo.ac.jp/hp/en/archives/790& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&graphics.c.u-tokyo.ac.jp&/span&&span class=&invisible&&/hp/en/archives/790&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&img src=&/v2-a45d0fc6b6e1c0c3f8e76643_b.png& data-rawwidth=&700& data-rawheight=&524& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&/v2-a45d0fc6b6e1c0c3f8e76643_r.png&&&br&&p&网站上有视频，还可以控制爆炸形状。&/p&&p&VFX工业界一般是拿做好的爆炸片段直接拼，一般是直接存好的volume时间序列；模拟的话会用射速很快的烟雾模拟，然后调调shader作出内部在燃烧的效果。&/p&&a href=&///?target=http%3A///video/av3895827/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【Houdini 教学】真实爆炸特效制作 Pyro explosion shader&i class=&icon-external&&&/i&&/a&&br&&br&&p&不过找一下最新的文章，做CFD的最近几年倒是一直有相关的paper，目前集中在大规模（exa-scale）模拟和对金属的冲击变形上。要是再深入做的话，大概得从物质燃烧入手，模拟燃烧时候的化学变化了。对于燃烧理论、连续介质力学，以及最近比较流行的离散化方法，比如Material Point Method都得有了解吧。&/p&
图形学圈子里最近几年还真没什么人做爆炸。能找到的最新的是2011年的procedural生成爆炸效果的文章： 网站上有视频，还可以控制爆炸形状。VFX工业界一般是拿做好的爆炸片段直接拼，一般是直接存好的volume时间序列；模拟的话会用射速很…
已有帐号？
无法登录？
社交帐号登录
20716 人关注
1204 条内容
150 人关注
1144 人关注
819 条内容
651 人关注
108 条内容
4427 人关注
222 条内容