three打造水渍滑动效果-html代码-BFW代码库

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>  Soothe</title>
    <style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap');

        * {
            margin: 0;
            border: 0;
            box-sizing:
            border-box;
        }

        body {

            margin: 0;
            position: fixed;
            overflow: hidden;
            background-color: #090d13;
            user-select: none;

        }

        canvas {

            width: 100%;
            height: 100%;

        }
    </style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>

    <script>
        //
        // shaders
        //
        const basic_vert = `
        precision highp float;

        void main() {
        gl_Position = vec4( position, vec2(1.0) );
        }
        `;

        const prep_frag = `
        precision highp float;

        void main() {
        gl_FragColor.z = 0.012;
        }
        `;

        const physics_frag = `
        precision highp float;

        uniform vec3 mouse;
        uniform vec3 pmouse;
        uniform vec2 resolution;
        uniform sampler2D texture;

        float distToSegment( vec2 x1, vec2 x2, vec2 p ) {

        vec2 v = x2 - x1;
        vec2 w = p - x1;

        float c1 = dot(w,v);
        float c2 = dot(v,v);

        // if c2 <= c1 == c1
        // if c2 >  c1 == c2
        float div = mix( c2, c1, step( c2, c1 ) );

        // if c1 < 0 == 0.0
        float mult = step( 0.0, c1 );

        float b = c1 * mult / div;
        vec2 pb = x1 + b*v;

        return distance( p, pb );

        }

        vec3 computeNormal( vec4 n ) {

        // pixel scale
        vec2 un = 1. / resolution;
        vec2 uv = gl_FragCoord.xy * un;

        // tex sample neighbour-4;
        vec3 n_r = texture2D( texture, uv + vec2( 1, 0 ) * un ).xyz;
        vec3 n_l = texture2D( texture, uv - vec2( 1, 0 ) * un ).xyz;
        vec3 n_u = texture2D( texture, uv + vec2( 0, 1 ) * un ).xyz;
        vec3 n_d = texture2D( texture, uv - vec2( 0, 1 ) * un ).xyz;

        // partial differences n-4;
        vec4 dn = vec4( n.z );
        dn -= vec4( n_r.z, n_l.z, n_u.z, n_d.z );

        // right - left, up - down;
        vec2 xy = vec2( dn.x - dn.y, dn.z - dn.w );
        xy += n_r.xy + n_l.xy + n_u.xy + n_d.xy;
        xy *= 0.972; // energy dissipation

        float z;
        z += dot( n_r.xy, - vec2( 1, 0 ) );
        z += dot( n_l.xy, + vec2( 1, 0 ) );
        z += dot( n_u.xy, - vec2( 0, 1 ) );
        z += dot( n_d.xy, + vec2( 0, 1 ) );

        return vec3( xy , z ) * 0.25;

        }


        void main() {

        vec2 uv = gl_FragCoord.xy / resolution;
        float asp = resolution.x / resolution.y; // aspect

        // normal sampling
        vec4 h = texture2D( texture, uv );

        // previous velocity
        float vel = h.a;
        // apply elastic-viscous acceleration
        // acc = - offset*elasticity - vel*viscosity
        vel += - ( h.z - 0.012 ) * 0.016 - vel * 0.059;

        // compute normal advection
        vec3 f = computeNormal( h );
        f.z += h.z + vel;

        // mouse interaction - continuous distance from mouse
        float dist = distToSegment(
        vec2( pmouse.x * asp, pmouse.y), // previous mouse
        vec2( mouse.x * asp, mouse.y), // current mouse
        vec2( uv.x * asp, uv.y) // fragcoord
        );

        float mSize = 0.065; // mouse radius
        float peak = 0.9; // max-height

        float isDisp = step( 0.5, mouse.z ); // is displaced

        if ( mouse.z > 0.5 && dist <= mSize ) {

        float dst = ( mSize - dist ) / mSize;
        f.z += pow( abs(dst), 1.9 ) * peak * 2.5;
        f.xy -= f.xy * pow( abs(dst), 3.9 ) * 0.1;
        f.z = min( peak, f.z );

        }

        gl_FragColor = clamp( vec4( f, vel ), -1.0, 1.0);

        }
        `;

        const light_frag = `
        precision highp float;

        #define RECIPROCAL_PI 0.31830988618

        uniform vec2 resolution;
        uniform sampler2D texture;

        float rand(vec2 co){
        return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
        }

        // based on https://www.shadertoy.com/view/MslGR8
        vec3 dithering( vec3 color ) {
        //Calculate grid position
        float grid_position = rand( gl_FragCoord.xy );
        //Shift the individual colors differently, thus making it even harder to see the dithering pattern
        vec3 dither_shift_RGB = vec3( 0.25 / 255.0, -0.25 / 255.0, 0.25 / 255.0 );
        //modify shift acording to grid position.
        dither_shift_RGB = mix( 2.0 * dither_shift_RGB, -2.0 * dither_shift_RGB, grid_position );
        //shift the color by dither_shift
        return color + dither_shift_RGB;
        }

        void main() {

        vec2 uv = gl_FragCoord.xy / resolution.xy;

        vec3 N = texture2D( texture, uv ).xyz;

        vec3 viewPos = vec3( 0.0, 0.0, 1.2 );
        vec3 lightPos = vec3( 0.0, 1.5, 0.98 );
        vec3 fragPos = vec3( ( 2.0 * uv - 1.0 ), N.z );

        vec3 L = normalize( lightPos - fragPos );
        vec3 H = normalize( L + normalize( viewPos - fragPos ) );
        vec3 dN = vec3( N.xy, N.z/2.0 + 0.28 );

        float dif = max( dot( dN, L ), 0.0 );
        float spec = clamp( dot( normalize(N), H ), 0.0, 1.0 );

        float attenuation = 1.0 - length( lightPos - fragPos ) / 3.1;
        vec3 dif_int = vec3( dif * 0.056 * attenuation  );

        float shininess = 4.8;
        float ref = RECIPROCAL_PI * ( shininess * 0.5 + 1.0 ) * pow( spec, shininess );
        vec3 spec_int = vec3( ref * 0.38 * .........完整代码请登录后点击上方下载按钮下载查看