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) ); retur.........完整代码请登录后点击上方下载按钮下载查看
网友评论0