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 > /********* * 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; #define mouse (touch.xy / resolution.xy) #define T .1*mod(time, 200.) #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) ); } 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) ); } float box(vec3 p, vec3 s) { p = abs(p)-s; return max(max(p.x, p.y), p.z); } 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(S(.0, 1.,fract(t)), 10.)); } float map(vec3 p) { for(float i = .0; i < 3.; i++) { p -= vec3(.5,5.2,1.2)*.2*i; p *= rotX(T+i/100.); p *= rotY(-T-i); p = abs(p); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0