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 视频教程
本篇主要技术点有:
- sin波函数的理解和应用
- 极坐标+sin 对于波动圆环的实现
- 2D模拟3D中"分层"的概念
1.原理:
sin函数是周期函数,对于无限重复的现象是一种很好的模拟
类似傅里叶变换一样,复杂的函数可以用简单的sin cos 组合进行比逼近
波浪这种效果是一种典型。
2.分析:
1.云的实现
- 形状:多个不同大小,偏移的圆,通过mix的方式合成云朵
- 动态:简单的走UV
当然你也可以使用类似太阳光晕的那种方式实现
2.太阳的实现
- 形状:光的边缘是通过极坐标中的角度带入多个不同频率的sin函数中是实现
- 动态:不同频率的sin函数不同的相位偏移速度来实现
3. 海洋的实现
- 原理:观察海洋,海浪的变化是连续的,随机的,而且是相似的。
这几个特点是不是非常像前面文章提到过的Noise的感觉,局部是连续的,但整体的感觉又是随机的。
很类似对吧,后面我们实现山脉(FBM)和3D海洋(FFT)的时候,再回过头来看待这两种方式,会发现他们的合成形式是一样的,这里我们使用多个频率,振幅不同的Sin函数海实现对波浪的模拟。
我们通过"多层"的方式来模拟3D效果,同样需要考虑透视对于图像大小,范围,清晰度的影响 - 形态:分层实现,单层中叠加不同频率,振幅,偏移的方式sin函数
- 动态:不同的层不同的频率,同一层中,不同频率之间拥有不同的相位偏移速度
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