webgl+snap.svg实现花朵绽放漩涡慢动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl+snap.svg实现花朵绽放漩涡慢动画效果代码,注意,动画很慢,特使是开始的时候。
代码标签: webgl snap.svg 花朵 绽放 漩涡 慢 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { overflow: hidden; } body { height: 100vh; width: 100vw; background: #0700cc; z-index: -2; margin: 0; width: 100%; overflow: hidden; position: absolute; filter: contrast(0.9) brightness(1.1); top: 0; left: 0; mix-blend-mode: difference; animation: filter 10s 5s ease-in 1 forwards; } @keyframes filter { to { filter: contrast(2.5) brightness(1.4); } } canvas { position: absolute; left: 0; top: 0; z-index: -1; mix-blend-mode: difference; } #glcanvas { width: 99.9vw; height: 100vh; position: absolute; left: 0; top: 0; filter: contrast(1.5); z-index: 0; mix-blend-mode: hue; } </style> </head> <body translate="no"> <canvas id="glcanvas"></canvas> <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); } </script> <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef GL_ES precision mediump float; #endif uniform float u_time; uniform vec2 u_resolution; float oscillate(float time, float minVal, float maxVal) { float sineWave = atan(time); float normalizedSine = (sineWave + 1.0) / 2.50; return mix(minVal, maxVal, normalizedSine); } vec3 palette(float t) { vec3 a = vec3(0.323, 0.1, 0.45); vec3 b = vec3(0.5, 0.3, 0.12); vec3 c = vec3(0.323, 0.9, 0.7); vec3 d = vec3(0.6, 0.3, 0.2); return a + b * tan(20.28318 * (c * t + d)); } float removeDiscontinuity(float angle) { return smoothstep(angle, 0.0, 0.0); } void main() { vec2 uv = (gl_FragCoord.xy / u_resolution) * 2.0 - 1.0; uv.x *= u_resolution.x / u_resolution.y; float time = u_time/1.50; vec3 finalColor = vec3(0.0); float angle = atan(uv.y, uv.x); float radius = length(uv); float newAngle = removeDiscontinuity(angle); float spiral = sin(radius * oscillate(time, 1.0, 10.0) - time * .050 + angle * 15.0); spiral += sin(radius/oscillate(time, 0.01, 0.09) - time * 0.001 + angle * 15.0); float t = 7.0 + 0.1 * spiral + time * 0.04 + radius * 0.4 + newAngle * 0.01; vec3 color = palette(t) * 1.96; finalColor += color; gl_FragColor = vec4(finalColor, 1.0); } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/snap.svg-0.4.1.js"></script> <script> const canvas = document.getElementById("glcanvas"); const gl = canvas.getContext("webgl"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; function getShaderSource(id) { return document.getElementById(id).textContent; } const vertexShaderSource = getShaderSource("vertex-shader"); const fragmentShaderSource = getShaderSource("fragment-shader"); function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error( "An error occurred compiling the shaders:", gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } ret.........完整代码请登录后点击上方下载按钮下载查看
网友评论0