中级Shader教程19 动态雾

---

layout: post
title: “中级Shader教程19 动态雾”
date: 2018-04-23 16:09:03
author: Jiepeng Tan
categories:

• shader tutorial
  tags: shader_tutorial UI shader fog noise
  mathjax: true

---

Shader 视频教程

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

1.前置知识链接

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

2.实现原理

1.利用FBM来模拟空间雾的密度分布
2.通过raymarch 距离根据密度从前到后多层颜色混合

这里的Noise 使用triNoise,其实PerlinNoise 也行，不过perlinNoise,需要的指令较多

3.源码实现

1.noise 模拟 fog 浓度

1.noise

float _tri(in float x){
   return abs(frac(x)-.5);}
float2 _tri2(in float2 p){
   return float2(_tri(p.x+_tri(p.y*2.)), _tri(p.y+_tri(p.x*2.)));}
float3 _tri3(in float3 p){
   return float3(_tri(p.z+_tri(p.y*1.)), _tri(p.z+_tri(p.x*1.)), _tri(p.y+_tri(p.x*1.)));}

//https://www.shadertoy.com/view/4ts3z2 
float TNoise(in float3 p, float time,float spd)
{
   
    float z=1.4;
    float rz = 0.;
    float3 bp = p;
    //类似FBM 效果 但是指令更少
    for (float i=0.; i<=3.; i++ )
    {
   
        float3 dg =