webgl实现图片鼠标交互液态扭曲涟漪波纹动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl实现图片鼠标交互液态扭曲涟漪波纹动画效果代码
代码标签: webgl 图片 鼠标 交互 液态 扭曲 涟漪 波纹 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; } canvas { position: fixed; top: 0; left: 0; width: 100%; } .lil-gui { --width: 400px; --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"> <input id="image-selector-input" style="visibility:hidden;" type="file"> <canvas></canvas> <script type="x-shader/x-fragment" id="vertShader"> precision highp float; varying vec2 vUv; attribute vec2 a_position; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB; uniform vec2 u_texel; void main () { vUv = .5 * (a_position + 1.); vL = vUv - vec2(u_texel.x, 0.); vR = vUv + vec2(u_texel.x, 0.); vT = vUv + vec2(0., u_texel.y); vB = vUv - vec2(0., u_texel.y); gl_Position = vec4(a_position, 0., 1.); } </script> <script type="x-shader/x-fragment" id="fragShaderAdvection"> precision highp float; precision highp sampler2D; varying vec2 vUv; uniform sampler2D u_velocity_texture; uniform sampler2D u_input_texture; uniform vec2 u_texel; uniform vec2 u_output_textel; uniform float u_dt; uniform float u_dissipation; vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) { vec2 st = uv / tsize - 0.5; vec2 iuv = floor(st); vec2 fuv = fract(st); vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize); vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize); vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize); vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize); return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y); } void main () { vec2 coord = vUv - u_dt * bilerp(u_velocity_texture, vUv, u_texel).xy * u_texel; vec4 velocity = bilerp(u_input_texture, coord, u_output_textel); gl_FragColor = u_dissipation * velocity; } </script> <script type="x-shader/x-fragment" id="fragShaderDivergence"> precision highp float; precision highp sampler2D; varying highp vec2 vUv; varying highp vec2 vL; varying highp vec2 vR; varying highp vec2 vT; varying highp vec2 vB; uniform sampler2D u_velocity_texture; void main () { float L = texture2D(u_velocity_texture, vL).x; float R = texture2D(u_velocity_texture, vR).x; float T = texture2D(u_velocity_texture, vT).y; float B = texture2D(u_velocity_texture, vB).y; fl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0