webgl实现可调节参数的水泡液体点击拆分交互动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl实现可调节参数的水泡液体点击拆分交互动画效果代码,参数调节使用了lil-gui插件
代码标签: webgl 调节 参数 水泡 液体 点击 拆分 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; overflow: hidden; } body { height: 100vh; display: flex; align-items: center; justify-content: center; } .btn { height: 370px; position: relative; } .btn canvas { display: block; height: 100%; } .btn button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; font-size: 20px; text-shadow: 0 0 3px #ffffff; padding: 20px; background: none; outline: none; border: none; cursor: pointer; font-weight: bold; opacity: .9; } .btn button:hover { color: deeppink; } .btn button:active { color: cyan; } .lil-gui { --width: 500px; 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, .9); --widget-color: rgba(255, 255, 255, .3); --focus-color: rgba(255, 255, 255, .4); --hover-color: rgba(255, 255, 255, .5); --font-family: monospace; z-index: 1; } </style> </head> <body translate="no"> <div class="btn"> <canvas></canvas> <button>click me</button> </div> <script type="x-shader/x-fragment" id="vertShader"> precision mediump float; varying vec2 vUv; attribute vec2 a_position; void main() { vUv = a_position; 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 vec2 u_scale; uniform float u_time; uniform float u_extra_width; uniform float u_ratio; uniform float u_click_time; uniform float u_speed; uniform float u_size; uniform vec3 u_color; uniform vec3 u_mid_color; #define PI 3.14159265358979323846 #define TWO_PI 6.28318530718 #define DOTS_NUMBER 25. float rand(vec2 n) { return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); } float get_power_shape(vec2 center) { float s = 1. - length(center); s = smoothstep(u_size, 1., s); return s; } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = .001 * u_speed * u_time; float click_time = 1. - .5 * pow(2.8 * (u_click_time - .5), 2.); float highlight = 0.; float shape = 0.; for (int i = 0; i < int(DOTS_NUMBER); i++) { vec2 c = vec2(0.); vec2 randomizer = vec2(rand(vec2(float(i), 0.)), rand(vec2(float(i)))); // extra spacing on x-axis c.x += u_extra_width * 2. * u_ratio * ((float(i) + .5) / DOTS_NUMBER - .5); // time per dot float t = time; t *= (.5 + .5 * pow(randomizer.y, .2)); t += TWO_PI * randomizer.y; // floating c.x += .4 * cos(.4 * t + randomizer.x * TWO_PI); c.y += max(.02, .2 * randomizer.x) * sin(t - cos(.5 * t)); // splashing float dist = pow(randomizer.y, 1.5); float angle = float(i) / DOTS_NUMBER * TWO_PI; c.x += dist * cos(angle) * click_time; c.y += .8 * dist * sin(angle) * click_time; float s = get_power_shape(uv + c); shape += s; highlight += 10. * pow(s, 50.); } float contour = smoothstep(.45, .5, shape); vec3 color = mix(u_color, u_mid_color, smoothstep(0., 10., highlight)); shape = smoothstep(.1, .7, shape); color = shape * color; gl_FragColor = vec4(color, contour); } </script> <script type="module"> import GUI from "//repo.bfw.wiki/bfwrepo/js/lil-gui.esm.js"; const buttonWrapperEl = document.querySelector(".btn"); const buttonClickerEl = document.querySelector(".btn button"); const canvasEl = document.querySelector(".btn canvas"); const devicePixelRatio = Math.min(window.devicePixelRatio, 2); const params = { clickTime: 0, clickDuration: .7, wasClicked: false, width: .2, ratio: 2, speed: 5, size: .65, color: [0.2392, 0.8392, 0.3608], midColor: [1.0, 0.9176, 0.0196] }; let startTime = null; let uniforms; const gl = initShader(); createControls(); window.addEventListener("resize", resizeCanvas); resizeCanva.........完整代码请登录后点击上方下载按钮下载查看
网友评论0