layout: post
title: “中级Shader教程17 海洋渲染”
date: 2018-04-23 16:09:03
author: Jiepeng Tan
categories:

shader tutorial
tags: shader_tutorial theory shader
img_path: /assets/img/blog/ShaderTutorial2D/Snow
mathjax: true

Shader 视频教程

shader基础教程（超多案例）

1.前置知识链接

1.Noise和FBM请参考这篇文章中给出的链接
2.ranymarching 框架

2.海浪型状的构造

1.基本形状构造

1.基本周期函数
2.扩散方向
3.Noise扰动

2.性能分析

1.还是和地形渲染一样，我们这里采用多种分辨率的地形函数
2.性能关键
.基本周期函数
.Nolise函数的实现

3.实现

0.基本框架

1.基本raymarching

#define Waves(pos,NUM)\float2 uv = pos.xz;\....//不同的实现float2 TerrainL(float3 pos){ Waves(pos,5.);
}
float2 TerrainM(float3 pos){Waves(pos,9.);
}
float2 TerrainH(float3 pos){Waves(pos,24.);
} float RaycastTerrain(float3 ro, float3 rd) { _MRCRO_RAY_CAST(ro,rd,10000.,TerrainL);
}
float3 NormalTerrian( in float3 pos, float rz ){_MACRO_CALC_NORMAL(pos,rz,TerrainH);
}float SoftShadow(in float3 ro, in float3 rd,float tmax){    _MACRO_SOFT_SHADOW(ro,rd,tmax,TerrainM);
}

2.水渲染

海水渲染需要考虑的有diffuse,specular,reflect,refract,fresnel这集中不同的效应

//基本渲染
float3 RenderSea(float3 pos, float3 rd,float rz, float3 nor, float3 lightDir) {  float fresnel = clamp(1.0 - dot(nor,-rd), 0.0, 1.0);fresnel = pow(fresnel,3.0) * 0.65;float3 reflected = Sky(pos,reflect(rd,nor),lightDir);    float3 diff = pow(dot(nor,lightDir) * 0.4 + 0.6,3.);float3 refracted = _SeaBaseColor + diff * _SeaWaterColor * 0.12;float3 col = lerp(refracted,reflected,fresnel);float spec=  pow(max(dot(reflect(rd,nor),lightDir),0.0),60.) * 3.;col += float3(spec,spec,spec);return col;
}

3.海天的处理

在海水和天空之间过渡

float4 ProcessRayMarch(float2 uv,float3 ro,float3 rd,inout float sceneDep,float4 sceneCol){ float rz = RaycastTerrain(ro,rd).x; float3 pos = ro + rd *rz;float3 nor = NormalTerrian(pos,rz);// colorfloat3 skyCol = Sky(pos,rd,_LightDir);float3 seaCol = RenderSea(pos,rd,rz,nor,_LightDir);//让海水和天空的过渡平和点float3 col = lerp(skyCol,seaCol,pow(smoothstep(0.0,-0.05,rd.y),0.3));col = pow( col, float3(0.4545,0.4545,0.4545) );sceneCol.xyz = col;return sceneCol;
}

这里介绍两种方式来够着波浪：
1.使用多个发射点(圆形)发射不同频率，振幅的波来合成最终效果
2.使用多个放射方向(直线)发射不同频率，振幅的波来合成最终效果

1.圆形波

#define Waves(pos,NUM)\float2 uv = pos.xz;\float w = 0.0,sw = 0.0;\float iter = 0.0, ww = 1.0;\uv += ftime * 0.5;\// 类FBM 波合成for(int i=0;i<NUM;i++){\w += ww * Wave(uv * 0.06 , float2(sin(iter), cos(iter)) * 10.0, 2.0 + iter * 0.08, 2.0 + iter * 3.0);\sw += ww;\ww = lerp(ww, 0.0115, 0.4);\iter += 2.39996;\}\return float2(pos.y- w / sw*_SeaWaveHeight,1.);\float Wave(float2 uv, float2 emitter, float speed, float phase){ //uv += Noise(uv);// 是否使用noise 来扭曲采样点float dst = distance(uv, emitter);//圆形扩散 极坐标return pow((0.5 + 0.5 * sin(dst * phase - ftime * speed)), 5.0);
}

两个sin波叠加的效果

多个sin波叠加的效果

最终效果

1.方向波

#define Waves(pos,_LOOP_NUM)\float2 uv = pos.xz;\//float2x2(0.8,0.6,-0.6,0.8) * 2.0float2x2 octave_m = float2x2(1.6,1.2,-1.2,1.6);\float freq = _SeaFreq;\float amp = _SeaWaveHeight;\float choppy = _SeaChoppy;\uv.x *= 0.75;\float d, h = 0.0;   \//类FBM效果  for(int i = 0; i < _LOOP_NUM; i++) {        \//让波浪相交d = Wave((uv+SEA_TIME)*freq,choppy);\d += Wave((uv-SEA_TIME)*freq,choppy);\h += d * amp;  \uv = mul(octave_m,uv); freq *= 1.9; amp *= 0.22;\choppy = lerp(choppy,1.0,0.2);\}\return float2(pos.y - h,1.0);// sea
float Wave(float2 uv, float choppy) {uv += Noise(uv);   // 是否使用noise 来扭曲采样点float2 wv = 1.0-abs(sin(uv));//让波尖锐float2 swv = abs(cos(uv));   //方型wv = lerp(wv,swv,wv);return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
}

两个方向波的效果

多个方向波的效果

2.随机化

float Wave(float2 uv, float choppy) {uv += Noise(uv);   // 是否使用noise 来扭曲采样点...
}

添加Noise来增加波浪的随机行为