webgl实现48种canvas炫酷shader可全屏动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl实现48种canvas炫酷shader可全屏动画效果代码,点击可全屏最大化播放动画,基于webgl实现的canvas动画,可作为背景或屏保。
代码标签: webgl canvas 炫酷 shader 全屏 动画
下面为部分代码预览,完整代码请点击下载或在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: 0.625rem; height: 0.625rem; } ::-webkit-scrollbar-thumb { background: #111; border-radius: 0.3125rem; box-shadow: inset 0.125rem 0.125rem 0.125rem rgba(255, 255, 255, 0.25), inset -0.125rem -0.125rem 0.125rem rgba(0, 0, 0, 0.25); } ::-webkit-scrollbar-track { background: #333; } body { margin: 0; display: grid; align-items: center; justify-content: center; background: #000; overflow-x: hidden; } canvas { position: absolute; inset: 0; width: 100vw; height: auto; object-fit: contain; z-index: -1; } body > * { grid-column: 1/-1; grid-row: 1/-1; } body:has(.fullscreen) { cursor: zoom-out; } #titles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; padding: 1em 1em; } .card { position: relative; width: 150px; aspect-ratio: 1; border-radius: 1px; box-shadow: 0 0 1px 1px #fff9; font: 16px/1.5 system-ui; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } .card::after { content: attr(data-title); display: grid; place-content: center; text-align: center; color: #fff; position: absolute; inset: 0; border-radius: inherit; filter: drop-shadow(-1px 0 2px #0008); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; } .card:hover:not(.fullscreen) { cursor: zoom-in; } .card:hover:not(.fullscreen)::after { opacity: 1; transition: opacity 200ms ease-in 200ms; } .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; border-radius: 18px; box-shadow: 0 0 10px 0 #fff9; font-size: 2em; } .card.fullscreen { border-radius: unset; box-shadow: unset; } .card:not(.fullscreen)::before { box-shadow: inset 0px 0px 20px 20px #000; } #titles { gap: 3em; } } </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="Flythrough">#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; float t = T * .25 - cos(T * .5) * 1.5; p *= mat2(cos(t), -sin(t), sin(t), cos(t)); vec3 col = vec3(0); p = normalize(p) * log(length(p) * .8); p = vec2(atan(p.y, p.x), length(p) * .5 + T * .5); vec3 z = vec3(p * .5, 0); float c = sin(t * .2) * .5 + .5, d = .0, k = .5, f = mix(.95, 1., fract(sin(dot(z, z) + T) * 345678.)); for(int i = 0; i < 3; i++) { z.z += d * (.85 - c * .35) * f; vec3 a = z / k; d += mix(abs(.7 * dot(sin(a * 2.), cos((a * 2.).yzx)) * .5), abs(f * k * dot(sin(a), cos(a.yzx))), c); k *= .25; } d = 1. - clamp(d * 1.2, .0, 1.) * 1.2; col += d * S(2., .0, dot(uv, uv) * 1.2) * vec3(1, 2, 3) * .5; col = max(col, .0); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Flower">#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 hue(a)(.24 + .4 * cos(10.3 * (a) + vec3(0, 83, 21))) float circle(vec2 p, float s) { return length(p) - s; } vec2 toRect(vec2 p) { return vec2(p.x * cos(p.y), p.x * sin(p.y)); } void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)); float t = T * .25 + sin(T * .5) * .2; uv *= mat2(cos(t), -sin(t), sin(t), cos(t)); uv *= 1. + (8. * (sin(t) * .5 + .5)); vec3 c = hue(log(length(uv) * 3.) - t * 4.); float n = 5.; uv = (fract(uv / n - .5) - .5) * n; c += hue(log(length(uv) * 3.) - t * 4.); uv = vec2(length(uv) - T, atan(uv.y, uv.x) / 6.2831853 * 36.); uv = mod(uv, 2.) - 1.; vec3 col = vec3(0); col += step(max(circle(uv, .65), -max(circle(uv, .55), -circle(toRect(uv), .125))), .1); col *= c; fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Bloom">#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 #define PI 3.14159265359 #define TAU 6.2831853072 vec3 palette(float k) { vec3 a = vec3(.5), b = vec3(.5), c = vec3(1), d = vec3(.9,.416,.577); return a+b*cos(TAU*(c*k+d)); } vec3 pattern(vec2 uv, float t) { float d = 1.; vec3 col = vec3(0); for (float i=.0; i<3.; i++) { float z = i == .0 ? t : .0, r = length(uv), l = log(r), a = atan(uv.x, uv.y); bool cw = sign(t) > .0; vec2 p = vec2( a-l+(cw?z:.0), a+l-(cw?.0:z) )/PI; uv = fract(p*2.)-.5; d *= 1.-pow(r,.7); col += S(.0,1.,d); float e=exp(-125e-3/distance(p/TAU,.85/uv)); e=log(1e-5*e); e *= 1.125; e=pow(sin(e*30.)*2.,2.)*.125; e=abs(e); e=pow(5e-3/e, .25); col -= .7*e * palette(length(uv)+i*.025+t*.25); } return col; } void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)); vec3 col = pattern(uv*.5, T*.25); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Morning">#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 #define TAU 6.2831853072 mat2 rot(float a) { float s=sin(a), c=cos(a); return mat2(c,-s,s,c); } vec3 palette(float k) { vec3 a = vec3(.5), b = vec3(.5), c = vec3(1), d = vec3(.9,.416,.577); return a+b*cos(TAU*(c*k+d)); } void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)); vec3 col = vec3(0); vec2 p=uv; p = normalize(p)*log(length(p)*.05); p *= rot(log(length(uv))-T*.6); vec2 z = vec2(1, atan(p.y, p.x)/TAU*6.); z = mod(z, 2.)-1.; vec2 q = uv; for (float i= .0; i<3.; i++) { q=fract(q*2.)-.5; float d=length(q)*exp(-length(uv)); d=sin(d*15.+T)*.125; d=abs(d); d=pow(1e-2/d, 1.2); col += d; } col.xz *= rot(z.y+z.x); col.xy *= rot(T*.3+cos(z.x)+sin(z.y)); col = mix(vec3(z.x,cos(z.x-z.y),z.y),vec3((col.r+col.g+col.b)/3.,z), z.y); col = exp(-col*1.2); col = sqrt(vec3(col.r*col.r+col.g*col.g+col.b*col.b))/3.; col *= palette(5.2+sqrt(col.r*col.r+col.g*col.g+col.b*col.b)/3.); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Night">#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 #define TAU 6.2831853072 mat2 rot(float a) { float s=sin(a), c=cos(a); return mat2(c,-s,s,c); } vec3 palette(float k) { vec3 a = vec3(.5,.5,.5), b = vec3(.5,.5,.5), c = vec3(1, 1, 1), d = vec3(.0,.1,.2); return a+b*cos(TAU*(c*k+d)); } void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)); vec3 col = vec3(0); vec2 p=uv; p = normalize(p)*log(length(p)*.05); p *= rot(log(length(uv))-T*.6); vec2 z = vec2(1, atan(p.y, p.x)/TAU*6.); z = mod(z, 2.)-1.; vec2 q = uv; for (float i= .0; i<4.; i++) { q=fract(q*2.)-.5; float d=exp(-.125/log(length(q))); d=sin(d*40.-T*1.4); d=pow(d, 8.); d=abs(d); col += max(.0, d); } col.xz *= rot(z.y+z.x); col.xy *= rot(T*.3+cos(z.x)+sin(z.y)); col = mix(vec3(z.x,cos(z.x-z.y),z.y),vec3((col.r+col.g+col.b)/3.,z), z.y); col = exp(-col*1.2); col = sqrt(vec3(col.r*col.r+col.g*col.g+col.b*col.b))/3.; col *= palette(5.2+sqrt(col.r*col.r+col.g*col.g+col.b*col.b)/3.); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment" data-title="Noon">#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 #define TAU 6.2831853072 mat2 rot(float a) { float s=sin(a), c=cos(a); return mat2(c,-s,s,c); } vec3 palette(float k) { vec3 a = vec3(.5,.5,.5), b = vec3(.5,.5,.5), c = vec3(1, .7, .4), d = vec3(.0,.15,.2); return a+b*cos(TAU*(c*k+d)); } void main(void) { vec2 uv = texcoord * (resolution / max(resolution.x, resolution.y)); vec3 col = vec3(0); vec2 p=uv; p = normalize(p)*log(length(p)*.05); p *= rot(log(length.........完整代码请登录后点击上方下载按钮下载查看
网友评论0