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

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

代码语言：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_anim.........完整代码请登录后点击上方下载按钮下载查看