regl实现webgl记忆碎片岩浆流动动画效果代码
代码语言:html
所属分类:动画
代码描述:regl实现webgl记忆碎片岩浆流动动画效果代码
代码标签: regl webgl 记忆 碎片 岩浆 流动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { filter: contrast(1.42); overflow: hidden; background-image: url("https://assets.codepen.io/194946/noise_1.png"); } svg { overflow: hidden; width: 100vw; height: 100vh; z-index: -1; mix-blend-mode: multiply; } canvas { filter: contrast(2) brightness(1.2); mix-blend-mode: multiply; } </style> </head> <body translate="no"> <script id="shader--vertex" type="x-shader/x-vertex"> precision mediump float; attribute vec2 position; varying vec2 uv; void main() { uv = position * 0.5 + 0.5; gl_Position = vec4(position, 0.0, 1.0); } </script> <script id="shader--fragment" type="x-shader/x-fragment"> precision mediump float; const float TAU = 6.2831853072; const float PI = 3.1415926536; uniform sampler2D sourceImage; uniform sampler2D bufferTexture; uniform sampler2D normalTexture; uniform vec2 resolution; uniform vec2 mouse; uniform float time; varying vec2 uv; float rand (vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } void main() { vec4 below = texture2D(bufferTexture, mod( uv + vec2(0.0, abs(rand(uv) * 20.0)/resolution.y), 1.0 )); float angle = (below.r + time*0.1) * TAU; vec2 offset = vec2(cos(angle), sin(angle))/resolution; float amount = clamp( distance(gl_FragCoord.xy, mouse.xy), 0.0, 300.0 )/300.0; gl_FragColor = mix( texture2D(sourceImage, uv), te.........完整代码请登录后点击上方下载按钮下载查看
网友评论0