canvas+webgl实现光感液体波动动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas+webgl实现光感液体波动动画效果代码
代码标签: canvas webgl 光感 液体 波动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body translate="no"> <script > const canvas = document.createElement("canvas"); const gl = canvas.getContext("webgl2"); document.body.innerHTML = ""; document.body.appendChild(canvas); document.body.style = "margin: 0;overflow: hidden;"; canvas.style.width = "100%"; canvas.style.height = "auto"; const dpr = window.devicePixelRatio; function resize() { const { innerWidth: width, innerHeight: height } = window; canvas.width = width * dpr; canvas.height = height * dpr; gl.viewport(0, 0, width * dpr, height * dpr); } window.onresize = resize; const vertexSource = `#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif in vec4 position; void main(void) { gl_Position = position; } `; const fragmentSource = `#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; uniform vec2 resolution; uniform float time; #define T time mat2 rot(float a) { float s=sin(a), c=cos(a); return mat2(c,-s,s,c); } void main() { vec2 uv = ( gl_FragCoord.xy-.5*resolution )/min(resolution.x,resolution.y); uv *= 6.; vec3 col = vec3(0); float t = T, tt = t*.1, d = .0; uv *= rot(tt); for (int i = 0; i < 3; i++) { float n = float(4-i); uv -= vec2(sin(t),cos(t))*.02; d = length(uv); t -= .05; vec2 p = uv; p += p*=1.618; p *= sin(d-t)*.5; p *= cos(d*.5-t)*.5; p += vec2(sin(tt),cos(tt))*.........完整代码请登录后点击上方下载按钮下载查看
网友评论0