着色器实现海水效果

清疚 2022-09-09 13:58 202阅读 0赞

# 前言 #

[个人网站][Link 1]

# HLSL实现 #

## VS ##

uniform float4 gl_HalfPixel;
    
    static float4 gl_Position;
    static float2 pos;
    static float2 outUV;
    static float2 uv;
    
    struct SPIRV_Cross_Input
    {
        
        float2 pos : TEXCOORD0;
        float2 uv : TEXCOORD1;
    };
    
    struct SPIRV_Cross_Output
    {
        
        float2 outUV : TEXCOORD0;
        float4 gl_Position : POSITION;
    };
    
    void vert_main()
    {
        
        gl_Position = float4(pos, 0.0f, 1.0f);
        outUV = uv;
        gl_Position.x = gl_Position.x - gl_HalfPixel.x * gl_Position.w;
        gl_Position.y = gl_Position.y + gl_HalfPixel.y * gl_Position.w;
    }
    
    SPIRV_Cross_Output main(SPIRV_Cross_Input stage_input)
    {
        
        pos = stage_input.pos;
        uv = stage_input.uv;
        vert_main();
        SPIRV_Cross_Output stage_output;
        stage_output.gl_Position = gl_Position;
        stage_output.outUV = outUV;
        return stage_output;
    }

## PS ##

uniform float iTime;
    uniform float2 iResolution;
    uniform float4 iMouse;
    uniform float iTimeDelta;
    uniform int iFrame;
    uniform sampler2D iChannel0;
    uniform sampler2D iChannel1;
    uniform sampler2D iChannel2;
    uniform sampler2D iChannel3;
    
    static float4 gl_FragCoord;
    static float4 shadertoy_outcolor;
    
    struct SPIRV_Cross_Input
    {
        
        float4 gl_FragCoord : VPOS;
    };
    
    struct SPIRV_Cross_Output
    {
        
        float4 shadertoy_outcolor : COLOR0;
    };
    
    float3x3 fromEuler(float3 ang)
    {
        
        float2 a1 = float2(sin(ang.x), cos(ang.x));
        float2 a2 = float2(sin(ang.y), cos(ang.y));
        float2 a3 = float2(sin(ang.z), cos(ang.z));
        float3x3 m;
        m[0] = float3((a1.y * a3.y) + ((a1.x * a2.x) * a3.x), ((a1.y * a2.x) * a3.x) + (a3.y * a1.x), (-a2.y) * a3.x);
        m[1] = float3((-a2.y) * a1.x, a1.y * a2.y, a2.x);
        m[2] = float3(((a3.y * a1.x) * a2.x) + (a1.y * a3.x), (a1.x * a3.x) - ((a1.y * a3.y) * a2.x), a2.y * a3.y);
        return m;
    }
    
    float hash(float2 p)
    {
        
        float h = dot(p, float2(127.09999847412109375f, 311.70001220703125f));
        return frac(sin(h) * 43758.546875f);
    }
    
    float _noise(float2 p)
    {
        
        float2 i = floor(p);
        float2 f = frac(p);
        float2 u = (f * f) * (3.0f.xx - (f * 2.0f));
        float2 param = i + 0.0f.xx;
        float2 param_1 = i + float2(1.0f, 0.0f);
        float2 param_2 = i + float2(0.0f, 1.0f);
        float2 param_3 = i + 1.0f.xx;
        return (-1.0f) + (2.0f * lerp(lerp(hash(param), hash(param_1), u.x), lerp(hash(param_2), hash(param_3), u.x), u.y));
    }
    
    float sea_octave(inout float2 uv, float choppy)
    {
        
        float2 param = uv;
        uv += _noise(param).xx;
        float2 wv = 1.0f.xx - abs(sin(uv));
        float2 swv = abs(cos(uv));
        wv = lerp(wv, swv, wv);
        return pow(1.0f - pow(wv.x * wv.y, 0.64999997615814208984375f), choppy);
    }
    
    float map(float3 p)
    {
        
        float freq = 0.1599999964237213134765625f;
        float amp = 0.60000002384185791015625f;
        float choppy = 4.0f;
        float2 uv = p.xz;
        uv.x *= 0.75f;
        float h = 0.0f;
        for (int i = 0; i < 3; i++)
        {
        
            float2 param = (uv + (1.0f + (iTime * 0.800000011920928955078125f)).xx) * freq;
            float param_1 = choppy;
            float _400 = sea_octave(param, param_1);
            float d = _400;
            float2 param_2 = (uv - (1.0f + (iTime * 0.800000011920928955078125f)).xx) * freq;
            float param_3 = choppy;
            float _412 = sea_octave(param_2, param_3);
            d += _412;
            h += (d * amp);
            uv = mul(float2x2(float2(1.60000002384185791015625f, 1.2000000476837158203125f), float2(-1.2000000476837158203125f, 1.60000002384185791015625f)), uv);
            freq *= 1.89999997615814208984375f;
            amp *= 0.2199999988079071044921875f;
            choppy = lerp(choppy, 1.0f, 0.20000000298023223876953125f);
        }
        return p.y - h;
    }
    
    float heightMapTracing(float3 ori, float3 dir, inout float3 p)
    {
        
        float tm = 0.0f;
        float tx = 1000.0f;
        float3 param = ori + (dir * tx);
        float hx = map(param);
        if (hx > 0.0f)
        {
        
            return tx;
        }
        float3 param_1 = ori + (dir * tm);
        float hm = map(param_1);
        float tmid = 0.0f;
        for (int i = 0; i < 8; i++)
        {
        
            tmid = lerp(tm, tx, hm / (hm - hx));
            p = ori + (dir * tmid);
            float3 param_2 = p;
            float hmid = map(param_2);
            if (hmid < 0.0f)
            {
        
                tx = tmid;
                hx = hmid;
            }
            else
            {
        
                tm = tmid;
                hm = hmid;
            }
        }
        return tmid;
    }
    
    float map_detailed(float3 p)
    {
        
        float freq = 0.1599999964237213134765625f;
        float amp = 0.60000002384185791015625f;
        float choppy = 4.0f;
        float2 uv = p.xz;
        uv.x *= 0.75f;
        float h = 0.0f;
        for (int i = 0; i < 5; i++)
        {
        
            float2 param = (uv + (1.0f + (iTime * 0.800000011920928955078125f)).xx) * freq;
            float param_1 = choppy;
            float _477 = sea_octave(param, param_1);
            float d = _477;
            float2 param_2 = (uv - (1.0f + (iTime * 0.800000011920928955078125f)).xx) * freq;
            float param_3 = choppy;
            float _489 = sea_octave(param_2, param_3);
            d += _489;
            h += (d * amp);
            uv = mul(float2x2(float2(1.60000002384185791015625f, 1.2000000476837158203125f), float2(-1.2000000476837158203125f, 1.60000002384185791015625f)), uv);
            freq *= 1.89999997615814208984375f;
            amp *= 0.2199999988079071044921875f;
            choppy = lerp(choppy, 1.0f, 0.20000000298023223876953125f);
        }
        return p.y - h;
    }
    
    float3 getNormal(float3 p, float eps)
    {
        
        float3 param = p;
        float3 n;
        n.y = map_detailed(param);
        float3 param_1 = float3(p.x + eps, p.y, p.z);
        n.x = map_detailed(param_1) - n.y;
        float3 param_2 = float3(p.x, p.y, p.z + eps);
        n.z = map_detailed(param_2) - n.y;
        n.y = eps;
        return normalize(n);
    }
    
    float3 getSkyColor(inout float3 e)
    {
        
        e.y = ((max(e.y, 0.0f) * 0.800000011920928955078125f) + 0.20000000298023223876953125f) * 0.800000011920928955078125f;
        return float3(pow(1.0f - e.y, 2.0f), 1.0f - e.y, 0.60000002384185791015625f + ((1.0f - e.y) * 0.4000000059604644775390625f)) * 1.10000002384185791015625f;
    }
    
    float diffuse(float3 n, float3 l, float p)
    {
        
        return pow((dot(n, l) * 0.4000000059604644775390625f) + 0.60000002384185791015625f, p);
    }
    
    float specular(float3 n, float3 l, float3 e, float s)
    {
        
        float nrm = (s + 8.0f) / 25.1327362060546875f;
        return pow(max(dot(reflect(e, n), l), 0.0f), s) * nrm;
    }
    
    float3 getSeaColor(float3 p, float3 n, float3 l, float3 eye, float3 dist)
    {
        
        float fresnel = clamp(1.0f - dot(n, -eye), 0.0f, 1.0f);
        fresnel = pow(fresnel, 3.0f) * 0.5f;
        float3 param = reflect(eye, n);
        float3 _529 = getSkyColor(param);
        float3 reflected = _529;
        float3 param_1 = n;
        float3 param_2 = l;
        float param_3 = 80.0f;
        float3 refracted = float3(0.0f, 0.0900000035762786865234375f, 0.180000007152557373046875f) + ((float3(0.4799999892711639404296875f, 0.540000021457672119140625f, 0.36000001430511474609375f) * diffuse(param_1, param_2, param_3)) * 0.119999997317790985107421875f);
        float3 color = lerp(refracted, reflected, fresnel.xxx);
        float atten = max(1.0f - (dot(dist, dist) * 0.001000000047497451305389404296875f), 0.0f);
        color += (((float3(0.4799999892711639404296875f, 0.540000021457672119140625f, 0.36000001430511474609375f) * (p.y - 0.60000002384185791015625f)) * 0.180000007152557373046875f) * atten);
        float3 param_4 = n;
        float3 param_5 = l;
        float3 param_6 = eye;
        float param_7 = 60.0f;
        color += specular(param_4, param_5, param_6, param_7).xxx;
        return color;
    }
    
    float3 getPixel(float2 coord, float time)
    {
        
        float2 uv = coord / iResolution;
        uv = (uv * 2.0f) - 1.0f.xx;
        uv.x *= (iResolution.x / iResolution.y);
        float3 ang = float3(sin(time * 3.0f) * 0.100000001490116119384765625f, (sin(time) * 0.20000000298023223876953125f) + 0.300000011920928955078125f, time);
        float3 ori = float3(0.0f, 3.5f, time * 5.0f);
        float3 dir = normalize(float3(uv, -2.0f));
        dir.z += (length(uv) * 0.14000000059604644775390625f);
        float3 param = ang;
        dir = mul(fromEuler(param), normalize(dir));
        float3 param_1 = ori;
        float3 param_2 = dir;
        float3 param_3;
        float _759 = heightMapTracing(param_1, param_2, param_3);
        float3 p = param_3;
        float3 dist = p - ori;
        float3 param_4 = p;
        float param_5 = dot(dist, dist) * (0.100000001490116119384765625f / iResolution.x);
        float3 n = getNormal(param_4, param_5);
        float3 light = float3(0.0f, 0.780868828296661376953125f, 0.6246950626373291015625f);
        float3 param_6 = dir;
        float3 _783 = getSkyColor(param_6);
        float3 param_7 = p;
        float3 param_8 = n;
        float3 param_9 = light;
        float3 param_10 = dir;
        float3 param_11 = dist;
        return lerp(_783, getSeaColor(param_7, param_8, param_9, param_10, param_11), pow(smoothstep(0.0f, -0.0199999995529651641845703125f, dir.y), 0.20000000298023223876953125f).xxx);
    }
    
    void mainImage(inout float4 fragColor, float2 fragCoord)
    {
        
        float time = (iTime * 0.300000011920928955078125f) + (iMouse.x * 0.00999999977648258209228515625f);
        float3 color = 0.0f.xxx;
        for (int i = -1; i <= 1; i++)
        {
        
            for (int j = -1; j <= 1; j++)
            {
        
                float2 uv = fragCoord + (float2(float(i), float(j)) / 3.0f.xx);
                float2 param = uv;
                float param_1 = time;
                color += getPixel(param, param_1);
            }
        }
        color /= 9.0f.xxx;
        fragColor = float4(pow(color, 0.64999997615814208984375f.xxx), 1.0f);
    }
    
    void frag_main()
    {
        
        float2 param_1 = gl_FragCoord.xy;
        float4 param;
        mainImage(param, param_1);
        shadertoy_outcolor = param;
    }
    
    SPIRV_Cross_Output main(SPIRV_Cross_Input stage_input)
    {
        
        gl_FragCoord = stage_input.gl_FragCoord + float4(0.5f, 0.5f, 0.0f, 0.0f);
        frag_main();
        SPIRV_Cross_Output stage_output;
        stage_output.shadertoy_outcolor = float4(shadertoy_outcolor);
        return stage_output;
    }

# GLSL #

## VS ##

#version 330
    
    layout (location = 0) in vec2 pos;
    layout (location = 1) in vec2 uv;
    
    out vec2 outUV;
    
    void main() {
        
    	gl_Position = vec4(pos, 0.0, 1.0);
    	outUV = uv;
    }

## PS ##

#version 330
    
    uniform vec2 iResolution;
    uniform float iTime;
    uniform float iTimeDelta;
    uniform int iFrame;
    uniform vec4 iMouse;
    uniform sampler2D iChannel0;
    uniform sampler2D iChannel1;
    uniform sampler2D iChannel2;
    uniform sampler2D iChannel3;
    out vec4 shadertoy_outcolor;
    
    const int NUM_STEPS = 8;
    const float PI	 	= 3.141592;
    const float EPSILON	= 1e-3;
    #define EPSILON_NRM (0.1 / iResolution.x)
    #define AA
    
    // sea
    const int ITER_GEOMETRY = 3;
    const int ITER_FRAGMENT = 5;
    const float SEA_HEIGHT = 0.6;
    const float SEA_CHOPPY = 4.0;
    const float SEA_SPEED = 0.8;
    const float SEA_FREQ = 0.16;
    const vec3 SEA_BASE = vec3(0.0,0.09,0.18);
    const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6)*0.6;
    #define SEA_TIME (1.0 + iTime * SEA_SPEED)
    const mat2 octave_m = mat2(1.6,1.2,-1.2,1.6);
    
    // math
    mat3 fromEuler(vec3 ang) {
        
    	vec2 a1 = vec2(sin(ang.x),cos(ang.x));
        vec2 a2 = vec2(sin(ang.y),cos(ang.y));
        vec2 a3 = vec2(sin(ang.z),cos(ang.z));
        mat3 m;
        m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x);
    	m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x);
    	m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y);
    	return m;
    }
    float hash( vec2 p ) {
        
    	float h = dot(p,vec2(127.1,311.7));	
        return fract(sin(h)*43758.5453123);
    }
    float noise( in vec2 p ) {
        
        vec2 i = floor( p );
        vec2 f = fract( p );	
    	vec2 u = f*f*(3.0-2.0*f);
        return -1.0+2.0*mix( mix( hash( i + vec2(0.0,0.0) ), 
                         hash( i + vec2(1.0,0.0) ), u.x),
                    mix( hash( i + vec2(0.0,1.0) ), 
                         hash( i + vec2(1.0,1.0) ), u.x), u.y);
    }
    
    // lighting
    float diffuse(vec3 n,vec3 l,float p) {
        
        return pow(dot(n,l) * 0.4 + 0.6,p);
    }
    float specular(vec3 n,vec3 l,vec3 e,float s) {
            
        float nrm = (s + 8.0) / (PI * 8.0);
        return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
    }
    
    // sky
    vec3 getSkyColor(vec3 e) {
        
        e.y = (max(e.y,0.0)*0.8+0.2)*0.8;
        return vec3(pow(1.0-e.y,2.0), 1.0-e.y, 0.6+(1.0-e.y)*0.4) * 1.1;
    }
    
    // sea
    float sea_octave(vec2 uv, float choppy) {
        
        uv += noise(uv);        
        vec2 wv = 1.0-abs(sin(uv));
        vec2 swv = abs(cos(uv));    
        wv = mix(wv,swv,wv);
        return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
    }
    
    float map(vec3 p) {
        
        float freq = SEA_FREQ;
        float amp = SEA_HEIGHT;
        float choppy = SEA_CHOPPY;
        vec2 uv = p.xz; uv.x *= 0.75;
        
        float d, h = 0.0;    
        for(int i = 0; i < ITER_GEOMETRY; i++) {
                
        	d = sea_octave((uv+SEA_TIME)*freq,choppy);
        	d += sea_octave((uv-SEA_TIME)*freq,choppy);
            h += d * amp;        
        	uv *= octave_m; freq *= 1.9; amp *= 0.22;
            choppy = mix(choppy,1.0,0.2);
        }
        return p.y - h;
    }
    
    float map_detailed(vec3 p) {
        
        float freq = SEA_FREQ;
        float amp = SEA_HEIGHT;
        float choppy = SEA_CHOPPY;
        vec2 uv = p.xz; uv.x *= 0.75;
        
        float d, h = 0.0;    
        for(int i = 0; i < ITER_FRAGMENT; i++) {
                
        	d = sea_octave((uv+SEA_TIME)*freq,choppy);
        	d += sea_octave((uv-SEA_TIME)*freq,choppy);
            h += d * amp;        
        	uv *= octave_m; freq *= 1.9; amp *= 0.22;
            choppy = mix(choppy,1.0,0.2);
        }
        return p.y - h;
    }
    
    vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) {
          
        float fresnel = clamp(1.0 - dot(n,-eye), 0.0, 1.0);
        fresnel = pow(fresnel,3.0) * 0.5;
            
        vec3 reflected = getSkyColor(reflect(eye,n));    
        vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12; 
        
        vec3 color = mix(refracted,reflected,fresnel);
        
        float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0);
        color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;
        
        color += vec3(specular(n,l,eye,60.0));
        
        return color;
    }
    
    // tracing
    vec3 getNormal(vec3 p, float eps) {
        
        vec3 n;
        n.y = map_detailed(p);    
        n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y;
        n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y;
        n.y = eps;
        return normalize(n);
    }
    
    float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) {
          
        float tm = 0.0;
        float tx = 1000.0;    
        float hx = map(ori + dir * tx);
        if(hx > 0.0) return tx;   
        float hm = map(ori + dir * tm);    
        float tmid = 0.0;
        for(int i = 0; i < NUM_STEPS; i++) {
        
            tmid = mix(tm,tx, hm/(hm-hx));                   
            p = ori + dir * tmid;                   
        	float hmid = map(p);
    		if(hmid < 0.0) {
        
            	tx = tmid;
                hx = hmid;
            } else {
        
                tm = tmid;
                hm = hmid;
            }
        }
        return tmid;
    }
    
    vec3 getPixel(in vec2 coord, float time) {
            
        vec2 uv = coord / iResolution.xy;
        uv = uv * 2.0 - 1.0;
        uv.x *= iResolution.x / iResolution.y;    
            
        // ray
        vec3 ang = vec3(sin(time*3.0)*0.1,sin(time)*0.2+0.3,time);    
        vec3 ori = vec3(0.0,3.5,time*5.0);
        vec3 dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.14;
        dir = normalize(dir) * fromEuler(ang);
        
        // tracing
        vec3 p;
        heightMapTracing(ori,dir,p);
        vec3 dist = p - ori;
        vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM);
        vec3 light = normalize(vec3(0.0,1.0,0.8)); 
                 
        // color
        return mix(
            getSkyColor(dir),
            getSeaColor(p,n,light,dir,dist),
        	pow(smoothstep(0.0,-0.02,dir.y),0.2));
    }
    
    // main
    void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
        
        float time = iTime * 0.3 + iMouse.x*0.01;
    	
    #ifdef AA
        vec3 color = vec3(0.0);
        for(int i = -1; i <= 1; i++) {
        
            for(int j = -1; j <= 1; j++) {
        
            	vec2 uv = fragCoord+vec2(i,j)/3.0;
        		color += getPixel(uv, time);
            }
        }
        color /= 9.0;
    #else
        vec3 color = getPixel(fragCoord, time);
    #endif
        
        // post
    	fragColor = vec4(pow(color,vec3(0.65)), 1.0);
    }
    void main()
    {
        
    	mainImage(shadertoy_outcolor, gl_FragCoord.xy);
    }

# 效果 #

![在这里插入图片描述][3b2bad65bb644e3586126a027d330766.png]

[Link 1]: https://yangshuohao.com/
[3b2bad65bb644e3586126a027d330766.png]: /images/20220829/459d26f0faeb45f682d4dc3d2e2f3a36.png