canvas+webgl实现神秘立方体旋转扩散动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas+webgl实现神秘立方体旋转扩散动画效果代码
代码标签: canvas webgl 神秘 立方体 旋转 扩散 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body translate="no"> <script > const canvas = document.createElement("canvas"); const gl = canvas.getContext("webgl2"); document.title = "🤖"; document.body.innerHTML = ""; document.body.appendChild(canvas); document.body.style = "margin:0;touch-action:none;overflow:hidden;"; canvas.style.width = "100%"; canvas.style.height = "auto"; canvas.style.userSelect = "none"; const dpr = Math.max(1, .5 * window.devicePixelRatio); function resize() { const { innerWidth: width, innerHeight: height } = window; canvas.width = width * dpr; canvas.height = height * dpr; gl.viewport(0, 0, width * dpr, height * dpr); } window.onresize = resize; const vertexSource = `#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif in vec4 position; void main(void) { gl_Position = position; } `; 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 O; uniform vec2 resolution; uniform float time; uniform int pointerCount; uniform vec2 touch; #define mouse (touch/R) #define P pointerCount #define FC gl_FragCoord.xy #define R resolution #define T time #define S smoothstep #define N normalize #define rot(a) mat2(cos(a-vec4(0,11,33,0))) float vmax(vec3 v) { return max(max(v.x, v.y), v.z); } float box(vec3 p, vec3 s) { vec3 d = abs(p)-s; return length(max(d,.0))+vmax(min(d,.0)); } float mat = .0; float map(vec3 p) { float d=5e5, room = -(length(p)-10.); d = min(d, box(p,vec3(1))-.025); d = min(d, room); if (d < room) mat = 1.; else mat = .0; return d; } vec3 norm(vec3 p) { float h=1e-3; vec2 k=vec2(-1,1); return N( k.xyy*map(p+k.xyy*h)+ k.yxy*map(p+k.yxy*h)+ k.yyx*map(p+k.yyx*h)+ k.xxx*map(p+k.xxx*h) ); } void cam(inout vec3 p) { if (P>0) { p.yz*=rot(-mouse.y*6.3+3.14); p.xz*=rot(3.14-mouse.x*6.3); } else { float t = T*.2; p.yz *= rot(-t*.5); p.xz *= rot(t); } } float rnd(vec2 p) { return fract(sin(dot(p,vec2(12.9898,78.233)))*345678.); } float noise(vec2 p ) { vec2 i=floor(p),f=fract(p),u=S(.0,1.,f),s=vec2(1,0); float a=rnd(i),b=rnd(i+s),c=rnd(i+s.yx),d=rnd(i+1.); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); } float fbm(vec2 p) { float t=.0, a=1.; for (int i=0; i<5; i++) { t+=a*noise(p); p*=2.; a*=.5; } return t; } vec3 palette(float t) { vec3 a=vec3(.2),b=vec3(.4),c=vec3(1),d=vec3(.12,.14,.16); return a+b*cos(6.3*(c*t+d)); } vec3 pattern(vec2 uv) { vec2 p=uv; vec3 col=vec3(0); float d=1.; for (float i=.0; i<3.; i++) { uv*=2.; d=fbm(uv*d); col+=palette(d+length(p)-T)*.5; } return col; } vec3 bg(vec3 p) { return mix(vec3(.5,.7,.9),vec3(.9,.7,.5),p.y*.5+.5); } void main() { vec2 uv = (FC-.5*R)/min(R.x,R.y); vec.........完整代码请登录后点击上方下载按钮下载查看
网友评论0