gsap+webgl实现鼠标交互早餐煎鸡蛋液态融合动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+webgl实现鼠标交互早餐煎鸡蛋液态融合动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
body, html {
    margin: 0;
    padding: 0;
    background-color: #bfd1e5;
    font-family: "Georgia", serif;
}

canvas#eggs {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    pointer-events: none;
}

.page-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    pointer-events: none;
    width: 95%;
    max-width: 700px;
    opacity: .7;
}

.page-title > * {
    font-size: 6vh;
    padding: 0;
    margin: 0;
}

.page-title h1 {
    font-size: 14vh;
}

.page-title .sub-title {
    font-size: 4vh;
    font-style: italic;
}
</style>


  
  
</head>

<body translate="no">
  <div class="page-title">
    <h1>Breakfast</h1>
    <p>&#47;&#712;br&#x025B;kf&#x0259;st&#47;</p>
    <p class="sub-title">noun</p>
    <p>a meal eaten in the morning, the first of the day.</p>
</div>

<canvas id="eggs"></canvas>

<script type="x-shader/x-fragment" id="vertShader">
    precision mediump float;

    varying vec2 vUv;
    attribute vec2 a_position;

    void main() {
        vUv = .5 * (a_position + 1.);
        gl_Position = vec4(a_position, 0.0, 1.0);
    }
</script>

<script type="x-shader/x-fragment" id="fragShader">
    precision mediump float;

    varying vec2 vUv;
    uniform float u_time;
    uniform float u_ratio;
    uniform float u_resolution_scale;
    uniform sampler2D u_click_data_texture;

    #define TWO_PI 6.28318530718

    float rand(float n){ return fract(sin(n) * 43758.5453123); }

    vec3 mod289(vec3 x) { return x - floor(x * (1. / 289.)) * 289.; }
    vec2 mod289(vec2 x) { return x - floor(x * (1. / 289.)) * 289.; }
    vec3 permute(vec3 x) { return mod289(((x*34.)+1.)*x); }
    float snoise(vec2 v) {
        const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
        vec2 i = floor(v + dot(v, C.yy));
        vec2 x0 = v - i + dot(i, C.xx);
        vec2 i1;
        i1 = (x0.x > x0.y) ? vec2(1., 0.) : vec2(0., 1.);
        vec4 x12 = x0.xyxy + C.xxzz;
        x12.xy -= i1;
        i = mod289(i);
        vec3 p = permute(permute(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));
        vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.);
        m = m*m;
        m = m*m;
        vec3 x = 2. * fract(p * C.www) - 1.;
        vec3 h = abs(x) - 0.5;
        vec3 ox = floor(x + 0.5);
        vec3 a0 = x - ox;
        m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
        vec3 g;
        g.x = a0.x * x0.x + h.x * x0.y;
        g.yz = a0.yz * x12.xz + h.yz * x12.yw;
        return 130. * dot(m, g);
    }

    vec2 hash(vec2 p) {
        p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
        return fract(sin(p)*18.5453);
    }

    vec2 rotateUV(vec2 uv, float angle) {
        float s = sin(angle), c = cos(angle);
        return mat2(c, -s, s, c) * uv;
    }

    float get_cell_sectors(float angle, vec2 radomizer, float t) {
        float sectors = .5 * (1. + sin((2. + floor(radomizer.y * 2.)) * angle));
        sectors *= (.7 + .5 * sin(angle - 2. * t + radomizer.x));
        sectors *= (.5 + .5 * cos(angle + t));
        return sectors;
    }

    float get_area_around_yellow(float old_area_around_yellow, float dist, float angle, float sectors) {
        float area_around_yellow = max(old_area_around_yellow, .3 * dist * (1. + sin(angle - .6)));
        area_around_yellow += .1 * smoothstep(.0, .3, dist * (1. + 10. * sectors));
        return area_around_yellow;
    }

    float get_yellow(float dist, float radomizer) {
        return (.8 + .6 * radomizer) * dist;
    }

    float get_yellow_hit_area(float old_yellow_hit_area, float dist, float scale) {
        float yellow_hit_area = max(old_yellow_hit_area, dist);
        yellow_hit_area -= .12 * scale * dist;
        return yellow_hit_area;
    }

    float get_yellow_light(float dist, float angle, float radius, float radomizer) {
        float side_arc_light = dist;
        side_arc_light *= (.5 * (1. + sin(angle - .6)));
        side_arc_light *= (1. - smoothstep(.999, 1., radius));
        return radomizer * side_arc_light;
    }

    float get_blick(float old_yellow_blick, float dist, float angle, float radius) {
        float side_arc_blick = dist;
        side_arc_blick *= (.5 * (1. + sin(angle + 3.)));
        side_arc_blick *= (1. - smoothstep(.9994, 1., radius));
        return max(old_yellow_blick, side_arc_blick);
    }

    void main() {

        vec2 uv = vUv;
        uv *= u_resolution_scale;
        uv.y = 1. - uv.y;

        float white = 0.;
        float white_shadow = 0.;
        float area_around_yellow = 0.;
        float yellow = 0.;
        float yellow_hit_area = 0.;
        float yellow_light = 0.;
        float yellow_blick = 0.;

        uv.x *= u_ratio;
        uv.x *= .9;

        float t = u_time;

        for (int i = 0; i < 4; i++) {

            vec2 layer_randomizer = hash(vec2(10. * float(i), 200. * float(i)));
            vec2 layer_offset = hash(vec2(-100. * float(i), 2. * float(i))) - .5;
            float layer_scale = 1.1 - .1 * layer_randomizer.x;

            vec2 layer_uv = rotateUV(uv, layer_randomizer.y * TWO_PI);
            layer_uv += layer_offset;
            layer_uv *= layer_scale;

            vec2 i_uv = floor(layer_uv);
            vec2 f_uv = fract(layer_uv);

            vec2 cell_randomizer = vec2(0.);
            float cell_radius = 1.;
            float cell_angle_local = 0.;

            for (int y = -1; y <= 1; y++) {
                for (int x = -1; x <= 1; x++) {
                    vec2 tile_offset = vec2(float(x), float(y));
                    vec2 o = hash(i_uv + tile_offset);

                    tile_offset += (.5 + .3 * sin(.4 * t + TWO_PI * o)) - f_uv;

                    float dist = dot(tile_offset, tile_offset);
                    if (dist < cell_radius) {
                        cell_radius = dist;
                        cell_angle_local = atan(tile_offset.x, tile_offset.y);
                        cell_randomizer = o;
                    }
                }
            }

            cell_radius = 1. - cell_radius;
            float sectors = get_cell_sectors(cell_angle_local, cell_randomizer, t);
            float cell_angle_global = cell_angle_local - layer_randomizer.y * TWO_PI;
            float wavy_cell_distance = cell_radius + .015 * sectors;
            wavy_cell_distance = pow(wavy_cell_distance, 50. + 100. * cell_randomizer.x);
            float round_cell_distance = cell_radius;
            round_cell_distance = pow(round_cell_distance, 600. - 200. * layer_scale);
            white_shadow += (smoothstep(.0, 1.5, wavy_cell_distance + round_cell_distance));
            white += wavy_cell_distance;
            yellow_hit_area = get_yellow_hit_area(yellow_hit_area, round_cell_distance, layer_scale);
            yellow += get_yellow(round_cell_distance, cell_randomizer.y);
            yellow_light += get_yellow_light(round_cell_distance, cell_angle_global, cell_radius, cell_randomizer.x);
            yellow_blick = get_blick(yellow_blick, round_cell_distance, cell_angle_global, cell_radius);
            area_around_yellow = get_area_around_yellow(area_around_yellow, round_cell_distance, cell_angle_global, sectors);
        }


        for (int i = 0; i < 15; i++) {

            float row = floor(float(i) / 10.) / 2.;
            float col = (float(i) - 10. * floor(float(i) / 10.)) / 10.;
            vec4 data = texture2D(u_click_data_texture, vec2(col, row));

            float x = data[0];
            float y = data[1];
            float pos_offset = data[2];
            float scale = data[3];

            vec2 center = vec2(x, y);

            vec2 layer_uv = vUv - center;
            layer_uv *= (.9 + .4 * rand(center.x));
            layer_uv.x *= u_ratio;
            layer_uv.x *= .9;

            vec2 layer_offset = hash(data.rg + 100.) - .5;
            layer_uv += .25 * pos_offset * sin(.2 * t + 10. * layer_offset);

            float cell_angle = atan(laye.........完整代码请登录后点击上方下载按钮下载查看