canvas+webgl实现炫酷充电能量转移动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas+webgl实现炫酷充电能量转移动画效果代码
代码标签: canvas webgl 炫酷 充电 能量 转移 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; overflow: hidden; background: repeating-radial-gradient( circle at center, #444 0 10%, #111 10% 20% ); touch-action: none; } canvas { width: 100%; height: auto; object-fit: contain; } </style> </head> <body > <canvas id="canvas"></canvas> <script > const canvas = window.canvas; const gl = canvas.getContext("webgl2"); const dpr = Math.max(1, window.devicePixelRatio); /** @type {Map<string,PointerEvent>} */ const touches = new Map(); const vertexSource = `#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif in vec2 position; void main(void) { gl_Position = vec4(position, 0., 1.); } `; const fragmentSource = `#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; uniform vec2 resolution; uniform int pointerCount; uniform vec2 touch; uniform float time; const float PI = radians(180.); const float TAU = 2.*PI; #define MAX_DIST 100. #define T time #define S smoothstep mat3 RotX(float a) { float s = sin(a), c = cos(a); return mat3( vec3(1, 0, 0), vec3(0, c, -s), vec3(0, s, c) ); } mat3 RotY(float a) { float s = sin(a), c = cos(a); return mat3( vec3(c, 0, s), vec3(0, 1, 0), vec3(-s, 0, c) ); } float BoxFrame(vec3 p, vec3 b, float e) { p = abs(p)-b; vec3 q = abs(p+e)-e; const float r = .05; return min(min( length( max(vec3(p.x, q.y, q.z), 0.0))+ min(max(p.x, max(q.y, q.z)), 0.0) - r, length( max(vec3(q.x, p.y, q.z), 0.0))+ min(max(q.x, max(p.y, q.z)), 0.0) - r), length( max(vec3(q.x, q.y, p.z), 0.0))+ min(max(q.x, max(q.y, p.z)), 0.0) - r); } vec3 Pattern(vec2 uv) { float fa = 1., fb = 1., fc = 1., fd = .0; for (int i = 0; i < 10; i++) { vec2 p = vec2( cos(uv.y * fa - fd + T / fb), sin(uv.x * fa - fd + T / fb) ) / fc; p += vec2(-p.y, p.x) * .25; uv.xy += p; fa *= 2.; fb *= 1.5; fc *= 1.75; fd += .025 + .125 * T * fb; } float r = sin(uv.x - T) * .5 + .5, g = sin(uv.y + T) * .5 + .5, b = sin((uv.x + uv.y + sin(T * .5)) * .5) * .5 + .5; return vec3(r, g, b); } float GetDist(vec3 p) { const float s = .125; p *= 1. + vec3(-1, 1, -1) * s * (.5 + .5 * sin(T * 5.)) * .5; float sdf = BoxFrame(p, vec3(1,.5, 1), .125); return sdf; } float RayMarch(vec3 ro, vec3 rd) { float d = .0; for (int i = 0; i < 50; i++) { vec3 p = ro + rd * d; d += GetDist(p); if (d > MAX_DIST || abs(d) < 1e-2) break; } return d; } vec3 GetNormal(vec3 p) { float d = GetDist(p); vec2 e = vec2(1e-3, 0); vec3 n = d - vec3( GetDist(p-e.xyy), GetDist(p-e.yxy), GetDist(p-e.yyx)); return normalize(n); } vec3 GetRayDir(vec2 uv, vec3 p, vec3 l, float z) { vec3 f = normalize(l-p), r = normalize(cross(vec3(0, 1, 0), f)), u = cross(f, r), c = f*z, i = c + uv.x*r + uv.y*u, d = normalize(i); return d; } vec3 Render(inout vec3 ro, inout vec3 rd, inout float ref) { float d = RayMarch(ro, rd); vec3 col = vec3(0); if (d > MAX_DIST) return col; vec3 p = ro + rd * d, n = GetNormal(p), l = normalize(ro-p), r = reflect(rd, n); float diffuse = S(.05, .95, dot(l, n) * .5 + .5); float spot = clamp(dot(normalize(ro), reflect(r, vec3(0))), .0, 1.); float fres = pow(clamp(1.+dot(n, rd), .0, 1.), 5.); vec3 c = vec3( length(p.xz*n.y), abs(sin(T) * 1. - p.x), abs(cos(T) * 1. - p.y) ); col = c; col += .5 * pow(diffuse, 8.); co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0