webgl实现可调节参数的西瓜切开效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：webgl实现可调节参数的西瓜切开效果代码

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

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

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

  
  
<style>
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

canvas#watermelons {
    display: block;
    width: 100%;
}

.lil-gui {
    --width: 300px;
    max-width: 90%;
    --widget-height: 20px;
    font-size: 15px;
    --input-font-size: 15px;
    --padding: 10px;
    --spacing: 10px;
    --slider-knob-width: 5px;
    --background-color: rgba(5, 0, 15, .8);
    --widget-color: rgba(255, 255, 255, .3);
    --focus-color: rgba(255, 255, 255, .4);
    --hover-color: rgba(255, 255, 255, .5);
    --font-family: monospace;
}


</style>


  
  
</head>

<body>
  <canvas id="watermelons"></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 vec2 u_pointer;
    uniform float u_seed_size;
    uniform float u_ripeness;

    #define TWO_PI 6.28318530718
    #define PI 3.14159265358979323846


    float rand(vec2 n) {
        return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
    }
    float noise(vec2 n) {
        const vec2 d = vec2(0.0, 1.0);
        vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
        return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
    }
    float fbm(vec2 n) {
        float total = 0.0, amplitude = .4;
        for (int i = 0; i < 4; i++) {
            total += noise(n) * amplitude;
            n += n;
            amplitude *= 0.6;
        }
        return total;
    }

    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);
    }

    float get_circle_shape(vec2 uv, float pwr, float mult) {
        float pointer_shape = 1. - length(uv);
        pointer_shape = clamp(pointer_shape, 0., 1.);
        pointer_shape = mult * pow(pointer_shape, pwr);
        return pointer_shape;
    }


    float get_seeds_shape(vec2 uv, float r, float speed, float scale) {
        uv *= (1. - .5 * r);
        uv *= scale * u_seed_size;

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

        float randomizer = 1.;
        float d = 1.;
        float cell_angle = 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 += .3 * (1. + sin(speed * u_time + TWO_PI * o)) - f_uv;
                float dist = dot(tile_offset, tile_offset);
                if (d > min(d, dist)) {
                    d = min(d, dist);
                    randomizer = o.x;
                }
            }
        }

        float visibility = step(.4, randomizer);
        visibility *= (1. - smoothstep(.5 - .07 * (u_ripeness - 1.), .6 - .07 * (u_ripeness - 1.), r));
        visibility *= smoothstep(.3, .4, r);

        d = smoothstep(0., .1 * visibility, d);
        return 1. - d;
    }

    float get_sector(float v, float border) {
        float d = 1. - pow(2. * v - 1., 2.);
        d = smoothstep(border, border + .04, d);
        return d;
    }

    float get_slice_shape(vec2 uv, float sector, float rotation) {
        float angle = atan(uv.y, uv.x) / TWO_PI;
        float angle_animated = fract(angle + rotation);
        return 1. - get_sector(angle_animated, sector);
    }

    float get_circular_noise(vec2 uv, vec2 point) {
        vec2 polar_uv = uv - normalize(uv) + .15 * fbm(uv + .0005 * u_time);
        vec2 noise_uv = 10. * (polar_uv - .1 * point);
        float noise_left = fbm(noise_uv);
        polar_uv.x = mod(noise_uv.x, TWO_PI);
        float noise_right = fbm(noise_uv);
        return mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));
    }

    vec4 get_watermelon(vec2 uv, float scale, float reaction, vec2 point, float sector, float rotation) {

        vec2 center = reaction * point;

        uv *= scale;
        uv -= center;

        float rad = length(uv);

        float noise = get_circular_noise(uv, point);
        float mid_noise_shape = .5 * noise * (smoothstep(.2, .4, rad) - smoothstep(.4, .6, rad));
        float out_noise_shape = 1. - noise * pow(smoothstep(.5, .7, rad), 3.);

        float outer_shape = get_circle_shape(uv, 3., 4.);
        outer_shape = smoothstep(.04, .07, outer_shape);

        float inner_shape = get_circle_shape(uv, 4. + u_ripeness, 100.);
        inner_shape = clamp(inner_shape, 0., 1.);
        inner_shape *= out_noise_shape;

        float seeds_shape = get_seeds_shape(uv - .03 * point, rad, .003, 40. / scale);
        seeds_shape *= smoothstep(.1, .3, fbm(3. * uv));

        float slices = get_slice_shape(uv - .5 * center + .1 * fbm(uv + .0002 * u_time), sector, rotation + .4 * length(center));

        vec3 red = vec3(.9, .0, .1);
        red += (.3 * rad + mid_noise_shape);
        red += .1 * (u_ripeness - 1.);
        vec3 light_green = vec3(.9, 1., .9);
        light_green += (.1 + .1 * rad);
        vec3 green = vec3(.2, 1., .2);
        vec3 black = vec3(.2) * noise;

        outer_shape *= pow(slices, 4.);
        inner_shape *= slices;
        seeds_shape *= slices;

     .........完整代码请登录后点击上方下载按钮下载查看