中级Shader教程04 2D海洋

---

layout: post
title: “中级Shader教程04 2D海洋”
date: 2018-03-27 16:09:03
author: Jiepeng Tan
categories:

• shader tutorial
  tags: shader_tutorial sea wave shader
  img_path: /assets/img/blog/ShaderTutorial2D/Snow
  mathjax: true

---

Shader 视频教程

• shader基础教程（超多案例）

本篇主要技术点有：

1. sin波函数的理解和应用
2. 极坐标+sin 对于波动圆环的实现
3. 2D模拟3D中"分层"的概念

1.原理：

sin函数是周期函数，对于无限重复的现象是一种很好的模拟
类似傅里叶变换一样，复杂的函数可以用简单的sin cos 组合进行比逼近
波浪这种效果是一种典型。

2.分析：

1.云的实现

1. 形状:多个不同大小，偏移的圆，通过mix的方式合成云朵
2. 动态:简单的走UV
   当然你也可以使用类似太阳光晕的那种方式实现

2.太阳的实现

1. 形状:光的边缘是通过极坐标中的角度带入多个不同频率的sin函数中是实现
2. 动态:不同频率的sin函数不同的相位偏移速度来实现

3. 海洋的实现

0. 原理：观察海洋，海浪的变化是连续的，随机的，而且是相似的。
   这几个特点是不是非常像前面文章提到过的Noise的感觉，局部是连续的，但整体的感觉又是随机的。
   很类似对吧，后面我们实现山脉(FBM)和3D海洋(FFT)的时候，再回过头来看待这两种方式，会发现他们的合成形式是一样的，这里我们使用多个频率，振幅不同的Sin函数海实现对波浪的模拟。
   我们通过"多层"的方式来模拟3D效果,同样需要考虑透视对于图像大小，范围，清晰度的影响
1. 形态：分层实现，单层中叠加不同频率，振幅，偏移的方式sin函数
2. 动态：不同的层不同的频率，同一层中，不同频率之间拥有不同的相位偏移速度

3.代码实现：

为了方便画圆，调整UV为(-0.5,-0.5,0.5,0.5)

1.云朵

通过不同的圆来合成云朵

float Circle(fixed2 uv,fixed2 center,float size,float blur){
   
    uv = uv - center;
    uv /= size;
    float len = length(uv);
    return smoothstep(1.,1.-blur,len);
}
//简单直观的合成方式
float DrawCloud(fixed2 uv,fixed2 center,float size){
   
    uv = uv - center;
    uv /= size;
    float col = Circle(uv,fixed2(0.,0.),0.2,0.05);
    col =col *  smoothstep(-0.1,-0.1+0.01,uv.y);//将圆中不想要的的部分给剪切掉
    col += Circle(uv,fixed2