京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。

注：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。

京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。

划线价：商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或其他真实有依据的价格；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。

折扣：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。

异常问题：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。

上次说到了水渲所涉及到的技术分类的内容，之后的技术分享会大致按照这样的方向来展开。

作为水渲的开篇第一个技术分享，我想先从比较基础的、基本的、也可以说是简单的水技术开始说起。后续能看到很多市面上的水渲算法和应用，都多多少少用到了以下技术为基础，并在此基础上添加更多锦上添花的其他技术。由浅入深，我想每一个技术点都是值得深挖和探究的。

本节会介绍一些水渲中比较基础的、常用的贴图类型和技术，以及他们在制作水形状时候的应用。所以这里本节先将这些作详细介绍，为后面的其他算法作铺垫。

作为一个早期的水体模拟方案，凹凸纹理贴图主要是通过扰动光照计算的法向量，再通过纹理的随时间移动来模拟海浪移动。它并没有改变顶点位置，就能通过视觉效果来让人觉得模型本身是凹凸不平的。这个技术常常用来模拟水面垂直方向上的凹凸感，可以通过生成对应的法线贴图来改变水面和光的交互。凹凸纹理贴图成为了实时水面渲染必不可少的一部分，在大规模水面渲染上，也会在原先波形模拟基础上使用一层细节法线贴图来增加水面细节。

这两张图有什么区别呢，可以通过生成第一个的噪声灰度图（noise map/bump map）进而生成下面的法线贴图（normal map）。第一个凹凸贴图（bump map），存储了凹凸信息，它存储的是高度图，也就是灰度信息，越白的地方越突。凹凸贴图是通过灰度表现进而来修改法线。

第二个法线贴图（normal map）是直接将法线信息存储到法线贴图中，存储的是角度信息，即R、G、B三个通道储存的角度信息表示了该面的方向和陡峭程度。可以直接可以获取法线信息来进行改变表面的凹凸。

顺便提一下这里的法线贴图存在三种不同的空间法线贴图：Tangent切线空间、Object对象空间、World世界空间，这里不过多赘述详细的介绍了。可以看一下大佬们的总结：

下面这张图应该更能清楚每种凹凸贴图之间的区别了：

现在一般模拟水面细节凹凸的方法就是通过一个bump map生成对应的normal map 从而直接来改变法线来直接计算光照，从而达到想要的效果。实际运用上可以用这个技术添加到原有的水体材质上作为细节法线来，来丰富细节。

下例我参照冯乐乐入门指南15章的水，用了差不多的这个技术，得到的效果。是在切线空间计算法线，从而来计算光照的。

能够看出多亏矢量位移贴图的精度，构造出的海面可以拥有较多细节，但同时也会有一定的性能消耗的问题。

Simulation这篇论文中，给出了一个基于FFT的水体渲染流程。它通过使用phillips频谱和高斯随机数构造出海洋频谱之后，使用离散逆傅里叶变换（IDFT）来得到时域频谱，这个时域频谱可以得到高度频谱和水平频谱，从而整合在一起得到一个偏移纹理（Vector Displacement map），再从而得到法线和泡沫纹理。而这个IDFT使用FFT算法来进行加速。运行时候进行使用实时计算并加载贴图来实现海面波浪的效果。如下图所示：

这里的实时计算，之前都是在CPU端的，出现compute shader之后开发者们可以将这部分计算分配给GPU端进行并行运算，这大大提升了效率和时间。但这部分提高当然也是远远不够的，在手机端更是十分吃力。

于是就有《刺客信条3》团队的基于离线FFT烘焙的水面技术，通过预烘焙出一系列矢量位移贴图、法线贴图，从而构造水体，节省出实时计算FFT的耗时。

Map，并储存，在运行的时候运行序列帧，运行时候采样数据，引用于顶点上。这里的不过多描述离线FFT烘焙预渲染的方法，会放到之后的系列里统一再讲一下。上面这些有关FFT水渲方面的内容在之后的水波浪分享中也会更详细的讲解一下。

流型图（Flow map），是一种基于2D矢量场平移法线贴图来达到流动效果的一种技术，可以被理解为是一种纹理化的UV坐标动画。它将能控制流向方向和速度的矢量存储在Flow Map中，比如将矢量的U分量存储在R通道，V分量存储在G通道中。这个技术由是由Valve的Alex Vlachos在SIGGRAPH 2010的《Portal 2》中首次公开详细描述的。同时也描述了他们如何使用Houdini来制作地形、力场、遮罩和大范围法线贴图。

Flow map也属于预渲染技术，它预烘焙2D方向信息到纹理中，进行两次UV采样，通过使用两种方向向量的结合，得到一个变形的纹理。然后再加上让它随着时间进行相对的流动变换，可以得到一个相对真实的水表现。但是，flow map局限于对于整个表面都使用同一种流动，对于开放水域或者直线流水是足够的，但是对于更多复杂情况的细节表现还是不足够的。

输入Flow map和一个噪声贴图，将这个噪声贴图进行扭曲来当作水流场，也就是可以将Albedo/Diffuse的量设置为该噪声贴图。然后随着时间变化，通过2D的flow map来设置UV偏移量。

更多具体的实现可以参考catlikecoding Flow的第一章，是使用这篇论文里谈及的技术来做的水面模拟。

我参考catlikecoding教程，在unity里大致实现出来的效果如下：

结合Flow map的使用方法和catlikecoding Flow的后面几章的内容，来将上面的效果调整为一个好看一点的、有流向、扭曲效果和水浪效果的水。调整一些参数，叠加上几个Gerstner波，可以做出个较为真实的的水体效果。如下图：

流型图也适用于很多其他的流体，云、沙子等各种流动的流体。

其他使用到Flow map的有神秘海域系列的水，其中一个是使用Flow map和Displacement map的水体效果。主要用在了《神秘海域:德雷克的宝藏》中，并发布在了Real-time Rendering 2010中。下面放出的图是GDC