webgl立方体变形动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl立方体变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } html, body { position: relative; 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; } button { padding: 0.5rem; font-size: 1rem; background: #444; border: 2px solid; border-radius: 0.5rem; justify-self: end; } kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; color: #333; display: inline-block; font-size: 0.85em; font-weight: 700; line-height: 1; padding: 2px 4px; white-space: nowrap; box-shadow: 0 1px 1px #0001, 0 2px 0 0 #fffb inset; } #dialog { user-select: none; position: fixed; inset: 0; padding: 1em 2em 3em 2em; border-radius: 4px; font-family: system-ui; line-height: 1.6; } .x { filter: grayscale(1); border: none; background: none; position: absolute; top: 0; right: 0.4rem; cursor: pointer; } .x:hover, .x:focus-visible { outline: none; box-shadow: 0 1px 1px 1px #1111; } </style> </head> <body > <canvas id="canvas"></canvas> <script > /********* * made by Matthias Hurrle (@atzedent) */ /** @type {HTMLCanvasElement} */ const canvas = window.canvas; const gl = canvas.getContext('webgl'); const dpr = window.devicePixelRatio; const vertexSource = ` #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif attribute vec2 position; void main(void) { gl_Position = vec4(position, 0., 1.); } `; const fragmentSource = ` /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif uniform vec2 resolution; uniform float time; uniform vec2 pointers[10]; #define MAX_STEPS 100 #define MAX_DIST 100. #define SURF_DIST .001 #define T time #define mouse pointers[0] mat2 Rot(float a) { float s = sin(a), c = cos(a); return mat2(c, -s, s, c); } float sdRoundBox(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 displacement (in vec3 p , float v) { return sin(v * p.x) * sin(v * p.y) * sin(v * p.z); } float opDisplace(in vec3 p, float v) { p*= 1.0 + vec3(-.1, .1, -.1) * (.5 * sin(T * 10.) + .5); float d1 = sdRoundBox(p, vec3(1.), .1); float d2 = displacement(p, v); return d1+d2; } float Rythm() { float md = mod(-T, 1.); float rhm = -max( md * (.5 * -cos(T) - .5), md * (.5 * sin(T) - .5) ); return rhm; } float GetDist(vec3 p) { float m = mod(-T, 1.); float d = opDisplace(p, 22. * Rythm()); return d; } float RayMarch(vec3 ro, vec3 rd) { float dO = .0; for(int i = 0; i < MAX_STEPS; i++) { vec3 p = ro + rd*dO; float dS = GetDist(p); dO += dS; if(dO > MAX_DIST || abs(dS) < SURF_DIST) break; } return dO; } vec3 GetNormal(vec3 p) { float d = GetDist(p); vec2 e = vec2(SURF_DIST, 0.); vec3 n = d - vec3( GetDist(p-e.xyy), GetDist(p-e.yxy), GetDist(p-e.yyx)); return normalize(n); } vec3 Render(inout vec3 ro, inout vec3 rd) { float d = RayMarch(ro, rd); vec3 col = vec3(.0); if(d < MAX_DIST) { vec3 p = ro + rd * d; vec3 n = GetNormal(p); vec3 r = reflect(rd, n); float diffuse = dot( n, normalize(vec3(1., 2., 3.)) ) * .5 + .5; vec3 light = normalize(ro); float spot = clamp( dot(light, reflect(n, vec3(.0, 1., .0))), .0, 1. ); col = vec3(diffuse); col += vec3(pow(spot, 16.)); ro = p + n * SURF_DIST * 3.; rd = r; } return col; } 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; } void mainImage(out vec4 fragColor, in vec2 fragCoord) { float mx = max(resolution.x, resolution.y); vec2 uv = (2. * fragCoord.xy - resolution.xy) / mx; uv *= .5; vec2 m = mouse.xy / resolution.xy; vec3 ro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0