webgl实现炫酷三维空间动画效果代码
代码语言:html
所属分类:三维
代码描述: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 > /********* * made by Matthias Hurrle (@atzedent) */ /** @type {HTMLCanvasElement} */ const canvas = window.canvas; const gl = canvas.getContext("webgl2"); const dpr = Math.max(1, .5 * 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 float time; uniform vec2 touch; uniform int pointerCount; const float PI = radians(180.); #define TAU 2.*PI #define T time #define S smoothstep #define rep(p,n) mod(p,n)-n*.5 float smin(float a, float b, float k) { float h = clamp(.5 + .5 * (b - a) / k, .0, 1.); return mix(b, a, h) - k * h * (1. - h); } float rnd(float t) { return fract(sin(t*427.771)*232.522); } float curve(float t, float d) { t /= d; return mix(rnd(floor(t)), rnd(floor(t)+1.), pow(smoothstep(.0, 1.,fract(t)), 10.0)); } 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) ); } mat3 RotZ(float a) { float s = sin(a), c = cos(a); return mat3( vec3(c, s, 0), vec3(-s, c, 0), vec3(0, 0, 1) ); } 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; } float RoundBox(vec3 p, vec3 b, float r) { vec3 q = abs(p) - b; return length(max(q, .0)) + min( max(q.x, max(q.y, q.z)), .0 ) - r; } float mat = .0; float GetDist(vec3 p) { vec3 q = p; float t = S(.0, 1.,mod(T,.85))*4.; q.xz = rep(q.xz, 5.); vec3 o = q; o.x += t; q *= RotY(curve(T, .4)); float sph = length(o-vec3(2.,.5, 0))-.5*(length(q)); float box = RoundBox(q-vec3(0,.5, 0), vec3(1), .125); float cmb = smin(-sph, box, -.125); float flr = p.y+1.; float d = min(cmb, flr); d = min(d, flr); if (d == cmb) mat = 3.; else mat = .0; return d; } vec3 GetNormal(vec3 p) { float d = GetDist(p); vec2 e = vec2(1e-2, 0); vec3 n = d - vec3( GetDist(p-e.xyy), GetDist(p-e.yxy), GetDist(p-e.yyx)); return normalize(n); } void main(void) { vec2 uv = ( gl_FragCoord.xy - .5 * resolution.xy ) / min(resolution.x, resolution.y); float prog = T * .3; float preanim = floor(mod(prog-.5, 4.)); if (preanim == .0 || preanim == 2.) { prog -= length(uv) * 0.2; } else if (preanim == 1. || preanim == 3.) { prog -= min(abs(uv.x), abs(uv.y)) * 0.2; } float anim = mod(prog, 4.); float scene = floor(anim); float t = .25*T; vec3 ro = vec3(0, 7, -8); if (scene == .0 || scene == 2.) { ro = vec3( S(-2.,2.,2.*sin(.125*T))+sin(t), 0, S(-2.,2.,2.*cos(t))+cos(.5*T) ) * 1.1; } else if (scene == 1. || scene == 3.) { ro = vec3( (.5+.5*sin(t))*20., (.5+.5*cos(t))*10., T-(T+10.) ); } if (pointerCount > 0) { vec2 m = touch.xy / resolution.xy; m.y *= .75; m.y = min(.8, max(.3, m.y)); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0