72个丰富的canvas webgl shader动画集合代码
代码语言:html
所属分类:动画
代码描述:72个丰富的canvas webgl shader动画集合代码
代码标签: 72 webgl shader 动画 集合 canvas
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: violet; border-radius: 4px; box-shadow: inset 2px 2px 2px indigo, inset -2px -2px 2px indigo; } ::-webkit-scrollbar-track { /* Big thanks to Temani Afif for the gradient */ /* https://codepen.io/t_afif/pen/KKGBKbV */ --s: 10px; /* control the size */ --_s: 0 0/var(--s) var(--s); background: radial-gradient(#0000 50%, #0002 54%, violet 57%) var(--_s), radial-gradient(circle at 40% 30%, #0000 4%, #000 90%) var(--_s), repeating-conic-gradient(violet 0 25%, white 0 50%) 0 0/calc(2*var(--s)) calc(2*var(--s)); } body { margin: 0; display: grid; align-items: center; justify-content: center; background: black; overflow-x: hidden; } canvas { position: absolute; inset: 0; width: 100vw; height: auto; object-fit: contain; } body > * { grid-column: 1/-1; grid-row: 1/-1; } body:has(.fullscreen) { cursor: cell; } #titles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; padding: 1em 1em; } .card { position: relative; width: 150px; aspect-ratio: 1; font: 900 24px/1 system-ui; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 0 1px grey, 0 0 2px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -10px 8px blue; } .card:not(.fullscreen) { --sign: 1; transition: scale 300ms ease-out 100ms; box-shadow: 0 calc(var(--sign) * 1px) 2px 0 grey, 0 calc(var(--sign) * 2px) 4px 0 white, 0 calc(var(--sign) * 4px) 8px 0 violet, 0 calc(var(--sign) * 8px) 16px 0 indigo, 0 calc(var(--sign) * 16px) 32px 0 blue; } .card::after { content: attr(data-title); display: grid; place-content: center; text-align: center; color: #fff; position: absolute; inset: 0; border-radius: inherit; opacity: 0; translate: 0 25%; } .card:hover:not(.fullscreen) { --sign: -1; cursor: pointer; scale: 1.05; } .card:hover:not(.fullscreen)::after { opacity: 1; translate: 0 0; } .card.fullscreen::after, .card:hover.fullscreen::after { translate: 0 0; } .card.fullscreen { position: absolute; inset: 0; width: 100vw; height: 100lvh; transition: all 200ms ease-out; } #titles:has(.fullscreen) .card:not(.fullscreen) { position: absolute; left: -100vw; } @media (min-width: 600px) { .card { width: 550px; aspect-ratio: 2; font-size: 4.5em; } .card.fullscreen { border-radius: unset; box-shadow: unset; } #titles { gap: 3em; } } @media (orientation: landscape) and (min-width: 600px) { .card::after { transition: all 400ms linear 300ms; } } </style> </head> <body> <canvas id="canvas"></canvas> <div id="titles"></div> <script type="x-shader/x-vertex">#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif in vec2 position; out vec2 texcoord; void main(void) { texcoord = position; gl_Position = vec4(position, 0, 1); } </script> <script type="x-shader/x-fragment" data-title="Garry">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; in vec2 texcoord; uniform vec2 resolution; uniform float time; #define T time #define S smoothstep void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)), p = uv*20.; vec3 col = vec3(0); for (int i=0; i<3; i++) { float k=float(i+1), t=T*k; uv += vec2( sin(t+uv.y*1.5), cos(t+uv.x*1.5) )*.02; col[i] += sin(k+length(p)/length(uv)-T); uv *= .95; } col = sqrt(col); col = pow(col, vec3(.4545)); col = mix(col, vec3(S(1.,.0, length(fwidth(col)))), -.125); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Lenny">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; in vec2 texcoord; uniform vec2 resolution; uniform float time; #define T time #define S smoothstep void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)); vec3 col = vec3(0); for (int i=0; i<3; i++) { float k=float(i+1), t=T*k; uv += vec2( sin(t+uv.y*1.5), cos(t+uv.x*.5) )*.02; col[i] += sin(k+length(uv*20.)-T); uv *= .918; } col = sqrt(col); col = pow(col, vec3(.4545)); col = mix(col, vec3(S(1.,.0, length(fwidth(col)))), -.125); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Sammy">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; in vec2 texcoord; uniform vec2 resolution; uniform float time; #define T time #define S smoothstep void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)), p=uv*15.; vec3 col = vec3(0); for (int i=0; i<3; i++) { float k=float(i+1), t=T*k; uv = vec2(.76*cos(atan(uv.y,uv.x)*3.),1); col[i] += sin(length(p)/length(uv)-T); } col = sqrt(col); col = pow(col, vec3(.4545)); col = mix(col, vec3(S(1.,.0, length(fwidth(col)))), -.125); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Lizzy">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; in vec2 texcoord; uniform vec2 resolution; uniform float time; #define T (time) #define S smoothstep void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)), p=uv*20.; vec3 col = vec3(0); for (int i=0; i<3; i++) { float k=float(i+1), t=T*k; uv += vec2( sin(t+uv.y*1.5), cos(t+uv.x*.5) )*.02; col[i] += sin((3.-k)+length(p)/exp(length(uv))-T); uv *= .918; } col = sqrt(col); col = pow(col, vec3(.4545)); col = mix(col, vec3(S(1.,.0, length(fwidth(col)))), -.125); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Rarely">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; in vec2 texcoord; uniform vec2 resolution; uniform float time; #define T (time) #define S smoothstep float rnd(vec2 p) { return fract( sin(dot(p, p.yx + vec2(234, 543))) * 345678.); } void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)), p = uv; vec3 col = vec3(0); uv *= 5.; for (float n=3., i=.0; i<n; i++) { uv.y -= T; uv.x += sin(T+p.y*1.3)*.3; vec2 gv = fract(uv)-.5, id = floor(uv); float k = (i+1.)/n; col += .025/length(gv)+step(length(gv)-.4,.0); col *= k*vec3(rnd(id),rnd(id+12.),rnd(id+78.)); uv *= .9; } col -= 1.-col; fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Opened">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; in vec2 texcoord; uniform vec2 resolution; uniform float time; #define T (time) #define S smoothstep float rnd(vec2 p) { return fract(sin(dot(p,p.yx+vec2(234,543)))*345678.); } void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)), p = uv; vec3 col = vec3(0); uv *= 15.; for (float n=6., i=.0; i<n; i++) { vec2 st = uv*1.5-.5, gv = fract(st)-.5, id = floor(st); gv.x += cos(T+p.y*1.5)*.45; float t=floor(10.*fract(T*.5)); col += .25/length(gv)/exp(length(uv)); col *= vec3(rnd(id+t),rnd(id+12.+t),rnd(id+78.+t)); uv *= .8; } fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Curved">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; in vec2 texcoord; uniform vec2 resolution; uniform float time; #define T mod(40.+time, 180.) #define S smoothstep #define TICK (fract(T * .025)) mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); } float rnd(vec2 p) { return fract(sin(dot(p, p.yx + vec2(234.78, 543.12))) * 345678.); } float box(vec3 p, vec3 s, float r) { p = abs(p) - s; return length(max(p, .0)) + min(.0, max(max(p.x, p.y), p.z)) - r; } vec3 map(vec3 p) { const float n = 3.; vec2 g = (fract(p.xz / n) - .5) * n, id = floor(p.xz / n); p.xz = g; float h = clamp(rnd(id) * 2.5, .2, 2.5), w = clamp(1. - rnd(id), .5, 1.), bld = box((p - vec3(0, h, 0)) + .0125, vec3(w, h, w), .0125); return vec3(bld * .25, id); } float getao(vec3 p, vec3 n, float dist) { return clamp(map(p + n * dist).x / dist, .0, 1.); } vec3 norm(vec3 p) { float h = 1e-2; vec2 k = vec2(-1, 1); return normalize( k.xyy * map(p + k.xy.........完整代码请登录后点击上方下载按钮下载查看
网友评论0