Daily shadersToday's Sky
Every morning at eight, a bot on my phone asks how I feel. I answer in a word or a few lines, or not at all. As soon as I answer, or at noon if I don't, it looks up the day's weather in Saitama, hands both to Claude, and Claude writes a WebGL fragment shader: a small program that draws a moving picture on its own.
Before it goes up, the code is checked against a few rules (WebGL 1, bounded loops, nothing but time and the canvas size as input), and sent back to be fixed if it breaks one. What you see is what came out. My answer to the bot stays private; the titles only borrow its images.
This one didn't compile in your browser.
Sourcesliding grid raindrops with trailing droplets acting as inverted lenses over drifting warm bokeh discs, fbm haze and fogged glass
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p),f=fract(p);f=f*f*(3.0-2.0*f);
return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),f.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),f.x),f.y);
}
float fbm(vec2 p){
float v=0.0,a=0.5;
for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
vec3 scene(vec2 p){
vec3 col=mix(vec3(0.30,0.36,0.44),vec3(0.56,0.59,0.64),smoothstep(-0.5,0.6,p.y));
col+=(fbm(p*1.6+vec2(u_time*0.02,0.0))-0.5)*0.14;
vec2 gc=p-vec2(0.12,-0.08);
float g=exp(-dot(gc,gc)*4.5);
col=mix(col,vec3(1.0,0.70,0.40),g*0.55*(0.92+0.08*sin(u_time*0.5)));
for(int i=0;i<9;i++){
float fi=float(i);
vec2 c=vec2((hash(vec2(fi,1.3))-0.5)*1.3,(hash(vec2(fi,7.1))-0.5)*0.9);
c+=0.04*vec2(sin(u_time*0.2+fi),cos(u_time*0.17+fi*1.3));
float r=0.06+0.06*hash(vec2(fi,3.7));
float d=length(p-c);
float disk=1.0-smoothstep(r-0.02,r,d);
float rim=smoothstep(r-0.035,r-0.005,d)*disk;
float h=hash(vec2(fi,5.5));
vec3 bc=mix(vec3(1.0,0.60,0.34),vec3(1.0,0.86,0.56),h);
if(h<0.25) bc=vec3(0.55,0.76,0.80);
col=mix(col,bc,disk*(0.26+0.16*rim)*(0.85+0.15*sin(u_time*0.4+fi*2.0)));
}
return col;
}
vec3 dropLayer(vec2 p,float t,vec2 g,float r){
vec2 q=p*g;
q.y+=t*0.25;
vec2 id=floor(q);
float n=hash(id);
vec2 st=fract(q)-0.5;
float tt=t+n*6.28;
float y=-sin(tt+sin(tt+sin(tt)*0.5))*0.36;
float x=(n-0.5)*0.6+sin(tt*0.7+n*10.0)*0.04;
vec2 d=(st-vec2(x,y))/g;
float m=1.0-smoothstep(r*0.6,r,length(d));
float dy=st.y-y;
float trail=smoothstep(0.0,0.08,dy)*(1.0-smoothstep(0.05,0.45,dy));
vec2 td=vec2(st.x-x,fract(st.y*5.0)-0.5)/vec2(g.x,g.y*5.0);
float rt=r*0.45;
float tm=(1.0-smoothstep(rt*0.55,rt,length(td)))*trail*step(0.3,hash(id+3.1));
return vec3(d*m+td*tm,max(m,tm));
}
void main(){
vec2 p=(gl_FragCoord.xy-0.5*u_resolution)/u_resolution.y;
float t=u_time*0.35;
vec3 a=dropLayer(p,t,vec2(5.0,2.5),0.035);
vec3 b=dropLayer(p+vec2(0.37,0.11),t*0.8+3.0,vec2(8.0,4.0),0.024);
vec2 off=a.xy+b.xy;
float mask=max(a.z,b.z);
vec3 col=scene(p-off*6.0);
vec3 fogc=vec3(0.62,0.66,0.71);
col=mix(col,fogc,0.24*(1.0-mask));
float e=length(off)/0.035;
col*=1.0-0.22*mask*smoothstep(0.45,1.0,e);
vec2 nd=normalize(off+vec2(0.0001));
col+=0.22*mask*smoothstep(0.55,1.0,dot(nd,vec2(-0.7,0.7)))*smoothstep(0.25,0.75,e);
col+=0.04*mask*vec3(1.0,0.85,0.6);
vec2 v=p*vec2(0.8,1.0);
col*=1.0-0.35*dot(v,v);
col=clamp(col,0.0,0.95);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
SourceRothko-style soft-edged color field blocks with fbm-feathered borders, horizontal brush-streak modulation, breathing scale, glowing seam and drifting fbm cloud shade
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);
return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),f.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),f.x),f.y);
}
float fbm(vec2 p){
float v=0.0;float a=0.5;
for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
float field(vec2 p,vec2 c,vec2 h,float soft,float t){
vec2 q=abs(p-c)-h;
float d=length(max(q,0.0))+min(max(q.x,q.y),0.0);
d+=(fbm(p*3.0+vec2(t,-t*0.7))-0.5)*0.09;
return 1.0-smoothstep(-soft,soft,d);
}
void main(){
vec2 uv=gl_FragCoord.xy/u_resolution;
float asp=u_resolution.x/u_resolution.y;
vec2 p=(gl_FragCoord.xy-0.5*u_resolution)/u_resolution.y;
float t=u_time*0.05;
float br=sin(u_time*0.35);
// background wash: dusty blue-grey to warm grey
vec3 bg=mix(vec3(0.40,0.43,0.50),vec3(0.60,0.52,0.47),uv.y);
bg*=0.92+0.16*fbm(p*2.0+vec2(t*0.5,0.0));
vec3 col=bg;
// brush streak texture (horizontal, low frequency)
float streak=fbm(vec2(p.x*1.5+t*0.3,p.y*7.0));
// lower heavy field: muted plum-slate
vec2 hb=vec2(asp*0.36,0.15+0.006*br);
float mb=field(p,vec2(0.0,-0.23),hb,0.045,t+3.0);
vec3 cb=mix(vec3(0.33,0.30,0.40),vec3(0.42,0.35,0.42),streak);
col=mix(col,cb,mb*0.95);
// upper warm field: apricot amber
vec2 ht=vec2(asp*0.38,0.17+0.008*br);
float mt=field(p,vec2(0.0,0.19),ht,0.04,t);
vec3 ct=mix(vec3(0.86,0.47,0.27),vec3(0.95,0.66,0.36),streak);
ct=mix(ct,vec3(0.97,0.74,0.45),0.25*smoothstep(0.1,0.35,p.y));
col=mix(col,ct,mt*0.96);
// glowing seam between the fields
float sx=1.0-smoothstep(asp*0.30,asp*0.42,abs(p.x));
float seam=exp(-pow((p.y+0.035)/0.035,2.0))*sx;
col+=vec3(1.0,0.78,0.48)*0.16*seam*(0.85+0.15*br);
// warm low autumn light from upper left
float lg=1.0-smoothstep(0.0,1.3,length(p-vec2(-0.7,0.55)));
col+=vec3(0.10,0.06,0.01)*lg;
// drifting cloud shade (light wind, partly cloudy)
float cs=fbm(p*1.2+vec2(u_time*0.018,u_time*0.004));
float sh=smoothstep(0.48,0.72,cs);
col*=1.0-0.17*sh;
// soft vignette
vec2 v=uv-0.5;
col*=1.0-0.35*dot(v,v)*1.6;
col=clamp(col,0.04,0.95);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourcetime-sampled Lissajous metaball trail with hop offsets and detached drop shadow, landing ripple rings, skewed window-light patch with fbm cloud shadow
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);
vec2 u=f*f*(3.0-2.0*f);
return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),u.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),u.x),u.y);
}
float fbm(vec2 p){
float v=0.0;float a=0.5;
for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
vec2 path(float s){
return vec2(0.42*sin(s*1.1)+0.12*sin(s*2.7+1.3),-0.08+0.20*sin(s*1.7+0.4)+0.06*sin(s*3.3));
}
void main(){
vec2 uv=(gl_FragCoord.xy-0.5*u_resolution)/u_resolution.y;
float t=u_time;
vec3 floorA=vec3(0.80,0.66,0.50);
vec3 floorB=vec3(0.62,0.45,0.35);
vec3 col=mix(floorB,floorA,smoothstep(-0.6,0.5,uv.y));
float plank=sin((uv.x+uv.y*0.3)*18.0);
col*=0.95+0.05*smoothstep(-0.9,0.9,plank);
vec2 q=uv;q.x-=q.y*0.45;q-=vec2(0.12,-0.02);
float box=max(abs(q.x)-0.36,abs(q.y)-0.30);
float win=smoothstep(0.03,-0.03,box);
float bars=min(abs(q.x),abs(q.y));
win*=smoothstep(0.012,0.03,bars);
float cl=fbm(uv*1.6+vec2(t*0.05,t*0.01));
float shade=smoothstep(0.55,0.75,cl);
col+=win*(1.0-0.55*shade)*vec3(0.22,0.17,0.09);
float s=t*0.5;
float f=0.0;float sf=0.0;vec3 bc=vec3(0.0);
for(int i=0;i<28;i++){
float fi=float(i);
float k=fi/28.0;
float si=s-fi*0.035;
vec2 p=path(si);
float hop=abs(sin(si*6.0))*0.07*(1.0-k*0.5);
float r=mix(0.075,0.013,k);
vec2 d=uv-p-vec2(0.0,hop);
float w=r*r/(dot(d,d)+2e-4);
f+=w;
bc+=w*mix(vec3(1.0,0.74,0.40),vec3(0.96,0.48,0.42),k);
vec2 ds=uv-p-vec2(0.025,-0.045);
sf+=r*r/(dot(ds,ds)+2e-4)*(1.0-k);
}
col*=1.0-0.28*smoothstep(0.5,1.3,sf);
float ph=fract(s*6.0/3.14159);
vec2 lp=path(s-ph*3.14159/6.0)+vec2(0.0,-0.01);
vec2 rd=uv-lp;rd.y*=1.8;
float rr=length(rd);
float ringR=0.05+ph*0.17;
float ring=smoothstep(0.018,0.004,abs(rr-ringR));
col=mix(col,vec3(1.0,0.90,0.72),ring*(1.0-ph)*(1.0-ph)*0.55);
bc/=(f+1e-3);
float m=smoothstep(0.85,1.15,f);
vec3 b=bc*(0.86+0.2*smoothstep(1.0,4.0,f));
col=mix(col,b,m);
vec2 hp=path(s);hp.y+=abs(sin(s*6.0))*0.07;
float hl=smoothstep(0.03,0.0,length(uv-hp-vec2(-0.022,0.025)));
col+=hl*0.18*vec3(1.0,0.95,0.85);
col*=1.0-0.35*dot(uv*vec2(0.8,1.0),uv*vec2(0.8,1.0));
col=clamp(col,0.0,0.97);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourceparallax anisotropic fbm motion-smear bands with eased drift, soft low sun glow, diagonal light shaft with drifting dust motes
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);
return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),f.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),f.x),f.y);
}
float fbm(vec2 p){
float v=0.0;float a=0.5;
for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
vec3 pal(float x){
return vec3(0.62,0.50,0.45)+vec3(0.22,0.17,0.15)*cos(6.2831*(vec3(1.0,0.9,0.8)*x+vec3(0.0,0.12,0.25)));
}
void main(){
vec2 uv=gl_FragCoord.xy/u_resolution.xy;
float asp=u_resolution.x/u_resolution.y;
vec2 p=vec2((uv.x-0.5)*asp,uv.y-0.5);
float t=u_time;
vec3 col=mix(vec3(0.97,0.84,0.70),vec3(0.70,0.78,0.86),smoothstep(-0.05,0.5,p.y));
vec2 sun=vec2(-0.38,0.16);
float sd=length(p-sun);
col+=vec3(1.0,0.78,0.5)*(exp(-sd*5.0)*0.35+smoothstep(0.075,0.05,sd)*0.22);
for(int i=0;i<4;i++){
float fi=float(i);
float sp=0.015+fi*0.018;
float x=p.x*(0.8+fi*0.3)+sp*(t+4.0*sin(t*0.06));
float n=fbm(vec2(x*0.9,p.y*(5.0+fi*2.0)+fi*7.3));
float h=0.04-fi*0.12;
float edge=h+(fbm(vec2(x*2.0,fi*3.0))-0.5)*0.12;
float m=smoothstep(edge+0.015,edge-0.015,p.y);
vec3 c=pal(n*0.8+fi*0.18+0.05);
c=mix(c,vec3(0.93,0.82,0.72),0.45-fi*0.1);
float streak=noise(vec2(x*0.5+fi*5.0,p.y*24.0));
c*=0.9+0.16*streak;
col=mix(col,c,m);
}
vec2 d=normalize(vec2(0.8,-0.35));
vec2 q=p-sun;
float pd=abs(d.x*q.y-d.y*q.x);
float along=dot(q,d);
float beam=exp(-pd*pd*30.0)*smoothstep(0.0,0.3,along)*smoothstep(1.6,0.4,along);
col+=vec3(1.0,0.85,0.6)*beam*0.12;
for(int i=0;i<14;i++){
float fi=float(i);
vec2 r=vec2(hash(vec2(fi,1.3)),hash(vec2(fi,2.7)));
float fx=fract(r.x+t*0.008*(0.5+r.y));
float fy=fract(r.y+t*0.004*(0.6+r.x));
vec2 mp=vec2((fx-0.5)*asp,fy-0.5)+0.03*vec2(sin(t*0.3+fi),cos(t*0.23+fi*2.0));
float md=length(p-mp);
float fade=sin(3.1416*fx)*sin(3.1416*fy);
float tw=0.6+0.4*sin(t*0.4+fi*1.7);
col+=vec3(1.0,0.9,0.72)*smoothstep(0.02,0.007,md)*(0.08+beam*0.5)*fade*tw;
}
float br=0.5+0.5*sin(t*0.35);
col*=1.0-0.2*pow(abs(uv.y-0.5)*2.0,3.0)*(0.8+0.2*br);
col*=1.0-0.12*dot(p,p);
col=mix(col,vec3(dot(col,vec3(0.333))),0.12);
gl_FragColor=vec4(clamp(col,0.0,0.97),1.0);
}
This one didn't compile in your browser.
Sourcetop-down shoreline swash: phased noise-edged wave fronts with lacy foam, wet-sand band, drifting jittered-grid sun glints
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);vec2 u=f*f*(3.0-2.0*f);
return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),u.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),u.x),u.y);
}
float fbm(vec2 p){
float v=0.0;float a=0.5;
for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
void main(){
vec2 uv=gl_FragCoord.xy/u_resolution.xy;
float asp=u_resolution.x/u_resolution.y;
vec2 p=vec2(uv.x*asp,uv.y);
float t=u_time;
float d=p.y-0.18*p.x+0.03*(fbm(p*2.0)-0.5);
vec3 sandA=vec3(0.95,0.84,0.66);
vec3 sandB=vec3(0.86,0.71,0.53);
float g=fbm(p*7.0);
vec3 col=mix(sandB,sandA,g);
float wet=smoothstep(0.28,0.5,d);
col=mix(col,vec3(0.66,0.53,0.40)+0.06*g,wet*0.75);
vec3 shallow=vec3(0.38,0.80,0.76);
vec3 deep=vec3(0.09,0.40,0.58);
vec3 foamC=vec3(0.97,0.95,0.90);
col=mix(col,deep,smoothstep(0.72,1.1,d)*0.6);
for(int k=0;k<3;k++){
float fk=float(k);
float ph=fract(t*0.055+fk*0.3333);
float amp=smoothstep(0.0,0.22,ph)*(1.0-smoothstep(0.22,1.0,ph));
float e=0.68-0.32*amp+0.07*(noise(vec2(p.x*3.2+fk*5.3,fk*2.0+t*0.08))-0.5);
float w=d-e;
float water=smoothstep(0.0,0.02,w);
vec3 wc=mix(shallow,deep,smoothstep(0.0,0.45,w));
col=mix(col,wc,water*(0.3+0.55*smoothstep(0.0,0.25,w)));
float edgeFoam=exp(-pow(w/0.02,2.0));
float lace=smoothstep(0.48,0.68,noise(p*vec2(13.0,20.0)+vec2(fk*11.0,-t*0.15)));
lace*=exp(-max(w,0.0)/0.07)*step(0.0,w);
float foam=(edgeFoam*0.9+lace*0.7)*(1.0-0.55*ph);
col=mix(col,foamC,clamp(foam,0.0,1.0)*0.85);
}
float cr=sin(d*22.0+t*0.9+2.0*noise(p*3.0));
col+=vec3(0.06,0.08,0.07)*smoothstep(0.6,1.0,cr)*smoothstep(0.62,0.9,d);
vec2 gq=(p+vec2(t*0.015,t*0.006))*16.0;
vec2 id=floor(gq);
vec2 f=fract(gq)-0.5;
float h=hash(id);
vec2 off=(vec2(hash(id+3.1),hash(id+7.7))-0.5)*0.5;
float r=length(f-off);
float tw=pow(0.5+0.5*sin(t*1.2+h*6.283),5.0);
float gl=smoothstep(0.24,0.0,r)*tw*step(0.55,h)*smoothstep(0.64,0.88,d);
col+=vec3(1.0,0.93,0.78)*gl*0.55;
vec2 sp=uv-vec2(0.1,1.05);
float sun=exp(-dot(sp,sp)*2.2);
col+=vec3(0.10,0.07,0.02)*sun;
col*=mix(vec3(1.03,1.0,0.95),vec3(0.97,1.0,1.03),uv.x);
vec2 vq=uv-0.5;
col*=0.9+0.1*smoothstep(0.75,0.2,length(vq*vec2(1.0,1.2)));
col=clamp(col,0.0,0.97);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourcerising soap-bubble discs with thin-film interference cosine-palette rims, angular wobble and specular glints over warm gradient sky
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(float n){ return fract(sin(n * 127.1) * 43758.5453); }
vec3 film(float t){
return 0.5 + 0.5 * cos(6.2831 * (t + vec3(0.0, 0.33, 0.67)));
}
void main(){
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
float asp = u_resolution.x / u_resolution.y;
vec2 p = vec2((uv.x - 0.5) * asp, uv.y - 0.5);
float t = u_time;
float px = 1.0 / u_resolution.y;
vec3 top = vec3(0.32, 0.60, 0.86);
vec3 bot = vec3(0.97, 0.80, 0.56);
vec3 col = mix(bot, top, smoothstep(-0.55, 0.5, p.y));
vec2 sun = vec2(0.42 * asp, 0.30);
float sd = length(p - sun);
col += vec3(1.0, 0.82, 0.50) * 0.35 * exp(-sd * 4.0);
col = mix(col, vec3(1.0, 0.93, 0.74), smoothstep(0.085, 0.07, sd));
float gy = -0.40 + 0.025 * sin(p.x * 5.0 + t * 0.4) + 0.015 * sin(p.x * 11.0 - t * 0.3);
float g = smoothstep(gy + 2.0 * px, gy - 2.0 * px, p.y);
vec3 grass = mix(vec3(0.80, 0.55, 0.25), vec3(0.62, 0.40, 0.20), smoothstep(gy, gy - 0.12, p.y));
col = mix(col, grass, g);
for (int i = 0; i < 14; i++) {
float fi = float(i);
float r = 0.045 + 0.065 * hash(fi + 1.0);
float speed = 0.025 + 0.035 * hash(fi + 2.0);
float span = 1.2 + 2.0 * r;
float y = mod(hash(fi + 3.0) * span + t * speed, span) - 0.6 - r;
float x = (hash(fi + 4.0) - 0.5) * asp * 0.95 + 0.05 * sin(t * 0.35 + fi * 1.7) + 0.08 * (y + 0.6);
vec2 d = p - vec2(x, y);
float a = atan(d.y, d.x);
float rr = r * (1.0 + 0.035 * sin(3.0 * a + t * 1.1 + fi));
float l = length(d);
float inside = smoothstep(rr, rr - 2.0 * px, l);
float q = l / rr;
float e = pow(clamp(q, 0.0, 1.0), 4.0) * inside;
vec3 f = film(q * 1.2 + d.y / rr * 0.35 + t * 0.05 + fi * 0.3);
col = mix(col, col * 0.88 + f * 0.38, e * 0.75);
col += 0.035 * inside;
float ring = smoothstep(3.5 * px, 1.0 * px, abs(l - rr));
col = mix(col, f * 0.55 + 0.42, ring * 0.45);
vec2 hp = d - vec2(-0.38, 0.40) * rr;
hp.x *= 1.4;
float h = smoothstep(0.24 * rr, 0.06 * rr, length(hp));
col += vec3(1.0, 0.97, 0.90) * 0.45 * h * inside;
}
vec2 vc = uv - 0.5;
col *= 1.0 - 0.25 * dot(vc, vc);
col = min(col, vec3(0.97));
gl_FragColor = vec4(col, 1.0);
}
This one didn't compile in your browser.
Sourceanimated Voronoi stained-glass cells with exact border distance, bevel shading, per-cell highlights and drifting sun glow
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
vec2 hash2(vec2 p){
p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
return fract(sin(p) * 43758.5453);
}
float hash1(vec2 p){
return fract(sin(dot(p, vec2(41.3, 289.1))) * 43758.5453);
}
vec3 pal(float h){
vec3 c = mix(vec3(0.96, 0.64, 0.20), vec3(0.88, 0.34, 0.20), smoothstep(0.15, 0.35, h));
c = mix(c, vec3(0.98, 0.80, 0.40), smoothstep(0.35, 0.50, h));
c = mix(c, vec3(0.62, 0.68, 0.30), smoothstep(0.55, 0.70, h));
c = mix(c, vec3(0.40, 0.66, 0.84), smoothstep(0.82, 0.90, h));
return c;
}
vec2 cellOff(vec2 id, float t){
vec2 o = hash2(id);
return 0.5 + 0.36 * sin(t * 0.45 + 6.2831 * o);
}
void main(){
vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
float t = u_time;
vec2 q = p * 4.0 + vec2(t * 0.03, 0.01 * sin(t * 0.2));
vec2 ip = floor(q);
vec2 fp = fract(q);
float d1 = 8.0;
vec2 r1 = vec2(0.0);
vec2 id1 = vec2(0.0);
for (int i = 0; i < 9; i++){
vec2 g = vec2(mod(float(i), 3.0) - 1.0, floor(float(i) / 3.0) - 1.0);
vec2 r = g + cellOff(ip + g, t) - fp;
float d = dot(r, r);
if (d < d1){ d1 = d; r1 = r; id1 = ip + g; }
}
float md = 8.0;
for (int i = 0; i < 9; i++){
vec2 g = vec2(mod(float(i), 3.0) - 1.0, floor(float(i) / 3.0) - 1.0);
vec2 r = g + cellOff(ip + g, t) - fp;
vec2 dr = r - r1;
if (dot(dr, dr) > 0.0001){
md = min(md, dot(0.5 * (r1 + r), normalize(dr)));
}
}
float h = hash1(id1);
float hs = fract(h + 0.04 * sin(t * 0.15 + h * 6.2831));
vec3 glass = pal(hs);
float bevel = 0.78 + 0.27 * smoothstep(0.0, 0.35, md);
float twinkle = 0.88 + 0.12 * sin(t * 0.7 + h * 20.0);
vec2 sp = vec2(-0.45 + 0.12 * sin(t * 0.08), 0.32 + 0.05 * cos(t * 0.11));
float glow = exp(-length(p - sp) * 1.7);
vec2 local = -r1 - vec2(-0.14, 0.14);
float spec = smoothstep(0.24, 0.0, length(local)) * 0.18;
vec3 col = glass * bevel * twinkle * (0.68 + 0.55 * glow);
col += vec3(1.0, 0.92, 0.75) * (spec + glow * 0.10);
float lead = smoothstep(0.035, 0.085, md);
vec3 leadCol = vec3(0.20, 0.13, 0.10) + glow * vec3(0.10, 0.07, 0.04);
col = mix(leadCol, col, lead);
vec2 uv = gl_FragCoord.xy / u_resolution;
float vig = 0.82 + 0.18 * smoothstep(0.9, 0.2, length(uv - 0.5));
col *= vig;
col = min(col, vec3(0.95));
gl_FragColor = vec4(col, 1.0);
}
This one didn't compile in your browser.
Sourceflat paper-cutout collage: smooth-min metaball clouds with offset drop shadows, squash-and-stretch bouncing disc SDFs, concentric sun-ring glow
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float smin(float a, float b, float k) {
float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
return mix(b, a, h) - k * h * (1.0 - h);
}
float cloud(vec2 p, float s) {
p /= s;
float d = length(p) - 0.08;
d = smin(d, length(p - vec2(0.085, -0.02)) - 0.06, 0.04);
d = smin(d, length(p - vec2(-0.09, -0.025)) - 0.055, 0.04);
d = smin(d, length(p - vec2(0.02, 0.045)) - 0.065, 0.04);
d = max(d, -p.y - 0.06);
return d * s;
}
vec3 layer(vec3 col, vec3 c, float d, float px) {
return mix(col, c, 1.0 - smoothstep(-px, px, d));
}
float shade(float d, float w) {
return 1.0 - smoothstep(0.0, w, d);
}
void main() {
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
float px = 1.5 / u_resolution.y;
float t = u_time;
vec3 col = mix(vec3(0.82, 0.89, 0.90), vec3(0.33, 0.60, 0.86), smoothstep(-0.3, 0.5, uv.y));
vec2 sp = vec2(-0.42, 0.24);
float sr = length(uv - sp);
float ang = atan(uv.y - sp.y, uv.x - sp.x);
float rays = smoothstep(0.2, 0.6, sin(ang * 9.0 + t * 0.15)) * exp(-sr * 2.2) * 0.18;
float rings = (0.5 + 0.5 * sin(sr * 38.0 - t * 0.9)) * exp(-sr * 4.5) * 0.35;
col = mix(col, vec3(1.0, 0.86, 0.52), clamp(rays + rings, 0.0, 1.0));
col = layer(col, vec3(1.0, 0.79, 0.33), sr - 0.1, px);
col = layer(col, vec3(1.0, 0.86, 0.48), max(sr - 0.1, -(length(uv - sp - vec2(0.03, -0.03)) - 0.1)), px);
for (int i = 0; i < 3; i++) {
float fi = float(i);
float s = 0.8 + 0.3 * fract(fi * 0.61);
vec2 c = vec2(mod(fi * 0.63 + t * (0.018 + 0.006 * fi), 1.9) - 0.95, 0.31 - fi * 0.11 + 0.01 * sin(t * 0.5 + fi * 2.0));
vec2 q = uv - c;
float d = cloud(q, s);
float ds = cloud(q - vec2(0.012, -0.015), s);
col = mix(col, col * vec3(0.80, 0.85, 0.92), 0.6 * shade(ds, 0.025));
col = layer(col, vec3(0.98, 0.97, 0.93), d, px);
col = layer(col, vec3(0.86, 0.90, 0.95), max(d, q.y + 0.02 * s), px);
}
float h1 = -0.17 + 0.05 * sin(uv.x * 2.6 + 1.0) + 0.02 * sin(uv.x * 6.0 + t * 0.1);
col = layer(col, vec3(0.88, 0.68, 0.40), uv.y - h1, px);
col = mix(col, vec3(0.95, 0.80, 0.52), (1.0 - smoothstep(-px, px, uv.y - h1)) * shade(h1 - uv.y, 0.02) * 0.6);
float h2 = -0.30 + 0.035 * sin(uv.x * 3.4 - 0.6);
vec3 field = vec3(0.66, 0.42, 0.27);
float furrow = smoothstep(0.35, 0.5, abs(fract((uv.x * 0.6 - uv.y * 1.8) * 4.0) - 0.5));
field *= 1.0 - 0.07 * furrow;
col = layer(col, field, uv.y - h2, px);
for (int i = 0; i < 3; i++) {
float fi = float(i);
float r = 0.05 + 0.008 * fi;
float bx = -0.30 + 0.30 * fi + 0.02 * sin(t * 0.3 + fi);
float gy = -0.30 + 0.035 * sin(bx * 3.4 - 0.6) - 0.05 - 0.03 * fi;
float b = abs(sin(t * 1.5 + fi * 2.1));
float sq = 1.0 - smoothstep(0.0, 0.3, b);
vec2 sc = vec2(1.0 + 0.22 * sq, 1.0 - 0.18 * sq);
float cy = gy + r * sc.y + b * 0.2;
vec2 e = (uv - vec2(bx + 0.01, gy)) / vec2(r * (1.15 - 0.45 * b), r * 0.28);
col = mix(col, col * 0.72, 0.55 * shade(length(e) - 1.0, 0.6));
vec2 q = (uv - vec2(bx, cy)) / sc;
float d = length(q) - r;
float ds = length(q - vec2(0.012, -0.015)) - r;
col = mix(col, col * 0.78, 0.45 * shade(ds, 0.02));
vec3 bc = vec3(0.95, 0.45, 0.35);
if (i == 1) bc = vec3(0.25, 0.62, 0.58);
if (i == 2) bc = vec3(0.98, 0.74, 0.25);
col = layer(col, bc, d, px);
col = layer(col, mix(bc, vec3(1.0, 0.96, 0.85), 0.35), max(d, -(length(q - vec2(0.018, -0.018)) - r)), px);
}
vec2 vu = gl_FragCoord.xy / u_resolution - 0.5;
col *= 1.0 - 0.25 * dot(vu, vu);
col = mix(col, col * vec3(1.03, 1.0, 0.95), 0.5);
gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
}
This one didn't compile in your browser.
Sourcelayered sinusoidal curtain folds with pseudo-normal translucency, blurred window-mullion backlight and hanging-weighted wind sway
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);
return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),f.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),f.x),f.y);
}
void main(){
vec2 uv=gl_FragCoord.xy/u_resolution;
float asp=u_resolution.x/u_resolution.y;
vec2 p=vec2(uv.x*asp,uv.y);
float t=u_time;
float hang=clamp((0.93-uv.y)/0.8,0.0,1.0);
float sway=0.06*sin(t*0.31+p.x*1.3)+0.03*sin(t*0.53+p.x*2.7+1.0);
float x=p.x+sway*hang*hang;
float ph=x*20.0+1.2*sin(x*2.3+0.7)+0.8*noise(vec2(x*1.5,t*0.05));
float ph2=x*43.0+1.7*sin(x*1.1+0.3);
float slope=cos(ph)+0.35*cos(ph2);
float trans=0.55+0.45*(1.0-abs(slope)/1.35);
vec2 wc=vec2(asp*0.6,0.58);
vec2 q=p-wc;
float win=(1.0-smoothstep(0.18,0.55,abs(q.x)))*(1.0-smoothstep(0.2,0.5,abs(q.y)));
win=mix(win,1.0-smoothstep(0.2,0.8,length(q)),0.35);
float mull=exp(-pow(q.x/0.05,2.0))+exp(-pow((q.y-0.04)/0.05,2.0));
mull=min(mull,1.0);
float cl=0.86+0.14*noise(vec2(t*0.04,3.7));
float light=win*(1.0-0.3*mull)*cl;
float lit=trans*(0.35+0.65*light);
vec3 shade=vec3(0.50,0.53,0.57);
vec3 cloth=vec3(0.82,0.79,0.72);
vec3 glow=vec3(0.97,0.91,0.80);
vec3 col=mix(shade,cloth,smoothstep(0.1,0.9,lit));
col=mix(col,glow,light*trans*0.45);
col*=0.93+0.07*clamp(slope*0.6,-1.0,1.0);
for(int i=0;i<6;i++){
float fi=float(i);
vec2 m=vec2(wc.x+0.35*sin(t*0.05+fi*2.1)+0.1*sin(fi*5.3),fract(0.1*fi*1.7+t*0.012+fi*0.37)*0.7+0.2);
float d=length(p-m);
col+=glow*0.07*smoothstep(0.03,0.0,d)*win;
}
float hemY=0.13+0.012*sin(ph)+0.008*sin(t*0.4+p.x*3.0);
float aboveHem=uv.y-hemY;
col*=1.0-0.12*smoothstep(0.035,0.0,aboveHem);
float below=smoothstep(0.006,-0.006,aboveHem);
float lx=1.0-smoothstep(0.1,0.6,abs(p.x-wc.x));
vec3 sill=vec3(0.46,0.40,0.34)*(0.78+0.3*uv.y/0.13);
sill+=glow*0.12*lx;
sill*=1.0-0.25*smoothstep(0.03,0.0,hemY-uv.y);
col=mix(col,sill,below);
float rod=smoothstep(0.925,0.935,uv.y)*(1.0-smoothstep(0.975,0.985,uv.y));
col*=1.0-0.12*smoothstep(0.88,0.93,uv.y)*(1.0-rod);
vec3 rodc=vec3(0.36,0.32,0.29)+0.08*smoothstep(0.93,0.97,uv.y);
col=mix(col,rodc,rod);
col=mix(col,vec3(0.72,0.71,0.68),smoothstep(0.98,0.995,uv.y));
col*=0.86+0.14*smoothstep(1.1,0.3,length(uv-0.5));
col=min(col,vec3(0.95));
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourceparallax sine-noise ridge silhouettes with atmospheric perspective, sequenced footstep light pulses, wind-drifting rotating leaf ellipses
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(float n){return fract(sin(n)*43758.5453);}
float noise(float x){
float i=floor(x);float f=fract(x);
f=f*f*(3.0-2.0*f);
return mix(hash(i),hash(i+1.0),f);
}
void main(){
vec2 uv=gl_FragCoord.xy/u_resolution.xy;
float asp=u_resolution.x/u_resolution.y;
vec2 p=vec2(uv.x*asp,uv.y);
float t=u_time;
vec3 skyTop=vec3(0.70,0.74,0.78);
vec3 skyLow=vec3(0.88,0.86,0.81);
vec3 col=mix(skyLow,skyTop,smoothstep(0.4,1.0,uv.y));
float glow=exp(-length((p-vec2(asp*0.7,0.84))*vec2(1.0,1.6))*3.0);
col+=vec3(0.10,0.08,0.04)*glow*(0.85+0.15*sin(t*0.2));
float cb=noise(p.x*1.5+t*0.03)*0.5+noise(p.x*3.0+uv.y*4.0-t*0.05)*0.5;
col=mix(col,vec3(0.80,0.81,0.84),smoothstep(0.55,0.95,uv.y)*cb*0.35);
for(int i=0;i<5;i++){
float fi=float(i);
float depth=fi/4.0;
float x=p.x+t*(0.008+0.018*fi)+fi*3.7;
float h=0.64-fi*0.115+0.055*sin(x*(1.2+fi*0.4)+fi)+0.05*noise(x*2.2+fi*10.0);
float edge=smoothstep(h+0.007,h-0.007,uv.y);
vec3 c=mix(vec3(0.68,0.72,0.74),vec3(0.40,0.40,0.30),depth);
c=mix(c,vec3(0.64,0.40,0.22),0.4*depth*noise(x*2.5+fi*5.0));
c*=1.0-0.12*smoothstep(h,h-0.15,uv.y);
float mist=(1.0-depth)*0.25*smoothstep(h-0.2,h,uv.y);
c=mix(c,skyLow,mist);
col=mix(col,c,edge);
}
float head=fract(t*0.07);
for(int k=0;k<12;k++){
float fk=float(k);
float s=fk/11.0;
vec2 c=vec2(mix(0.12,0.85,s)*asp,0.06+0.10*s+0.015*sin(s*7.0+1.0));
float side=mod(fk,2.0)*2.0-1.0;
c.y+=side*0.012*(1.0-0.5*s);
float sz=0.017*(1.0-0.45*s);
vec2 q=p-c;
float e=length(vec2(q.x/1.5,q.y))/sz;
float age=fract(head-s*0.6);
float b=smoothstep(0.0,0.04,age)*exp(-age*3.5);
col+=vec3(0.16,0.11,0.05)*exp(-e*e*0.25)*b*0.35;
col=mix(col,vec3(0.98,0.88,0.66),smoothstep(1.0,0.6,e)*b*0.85);
}
for(int j=0;j<6;j++){
float fj=float(j);
float ph=fract(hash(fj+1.3)+t*0.02*(0.7+0.6*hash(fj+3.0)));
float lx=ph*(asp+0.2)-0.1;
float ly=0.88-ph*0.5+0.03*sin(t*0.6+fj*2.3)+0.15*hash(fj+7.0);
vec2 d=p-vec2(lx,ly);
float a=t*0.7+fj*1.7;
d=vec2(cos(a)*d.x-sin(a)*d.y,sin(a)*d.x+cos(a)*d.y);
float l=length(vec2(d.x,d.y*2.2));
float fade=sin(ph*3.14159);
vec3 lc=mix(vec3(0.72,0.36,0.18),vec3(0.85,0.62,0.25),hash(fj+11.0));
col=mix(col,lc,smoothstep(0.017,0.011,l)*fade*0.85);
}
vec2 v=uv-0.5;
col*=1.0-0.25*dot(v,v);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourcejittered-grid elliptical sun-dapple spots with wind sway, low-frequency drifting cloud-shadow mask
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
float noise(vec2 p){
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = hash(i);
float b = hash(i + vec2(1.0, 0.0));
float c = hash(i + vec2(0.0, 1.0));
float d = hash(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
float dapple(vec2 p, float sc, float t, float seed, float soft){
p *= sc;
vec2 g = floor(p);
float acc = 0.0;
for (int j = 0; j < 3; j++) {
for (int i = 0; i < 3; i++) {
vec2 c = g + vec2(float(i) - 1.0, float(j) - 1.0);
float h = hash(c + seed);
float h2 = hash(c + seed + 7.31);
vec2 o = vec2(h, h2);
o += 0.17 * vec2(sin(t * 0.45 + h * 6.283), 0.6 * sin(t * 0.33 + h2 * 6.283));
vec2 d = p - (c + o);
float ca = 0.8;
float sa = 0.6;
d = vec2(ca * d.x + sa * d.y, -sa * d.x + ca * d.y);
d.x *= 0.78;
float r = 0.2 + 0.18 * h2;
float b = 1.0 - smoothstep(r * soft, r, length(d));
acc += b * step(0.3, h);
}
}
return acc;
}
void main(){
vec2 uv = gl_FragCoord.xy / u_resolution;
vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
float t = u_time;
vec3 shadeA = vec3(0.30, 0.36, 0.29);
vec3 shadeB = vec3(0.42, 0.40, 0.31);
float g = noise(p * 1.6 + vec2(3.1, 1.7));
vec3 ground = mix(shadeA, shadeB, g);
float leaf = smoothstep(0.55, 0.8, noise(p * 3.2 + vec2(9.0, 4.0)));
ground = mix(ground, vec3(0.50, 0.33, 0.20), leaf * 0.45);
ground *= 0.92 + 0.12 * uv.y;
float big = dapple(p, 2.6, t, 1.0, 0.25);
float small = dapple(p + vec2(0.37, 0.11), 5.5, t * 1.15, 4.0, 0.5);
float L = clamp(big * 0.55 + small * 0.6, 0.0, 1.1);
vec2 cp = p * 1.1 + vec2(-t * 0.028, -t * 0.009);
float cl = noise(cp) * 0.65 + noise(cp * 2.1 + 5.0) * 0.35;
float cloud = smoothstep(0.42, 0.72, cl);
float sun = mix(1.0, 0.35, cloud);
vec3 light = vec3(0.98, 0.84, 0.56);
vec3 col = mix(ground, light * (0.75 + 0.2 * g), clamp(L * sun * 0.82, 0.0, 0.9));
float glow = smoothstep(1.1, 0.0, length(p - vec2(-0.55, 0.5)));
col += vec3(0.09, 0.07, 0.03) * glow * sun;
col = mix(col, col * vec3(0.92, 0.97, 1.02), cloud * 0.5);
float vig = smoothstep(1.05, 0.35, length(p * vec2(0.85, 1.0)));
col *= 0.78 + 0.22 * vig;
col = clamp(col, 0.06, 0.93);
gl_FragColor = vec4(col, 1.0);
}
This one didn't compile in your browser.
Sourceparallax-scrolling rows of hashed rounded-box SDFs with soft drop shadows and diffuse overcast wash
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float h1(float n){return fract(sin(n*127.1)*43758.5453);}
float sdBox(vec2 p, vec2 b, float r){
vec2 q=abs(p)-b+r;
return length(max(q,0.0))+min(max(q.x,q.y),0.0)-r;
}
vec3 pal(float t){
if(t<0.2) return vec3(0.86,0.55,0.33);
if(t<0.4) return vec3(0.62,0.70,0.56);
if(t<0.6) return vec3(0.90,0.76,0.42);
if(t<0.8) return vec3(0.55,0.64,0.74);
return vec3(0.93,0.86,0.74);
}
void main(){
vec2 uv=(gl_FragCoord.xy-0.5*u_resolution)/u_resolution.y;
float t=u_time;
vec3 col=mix(vec3(0.76,0.74,0.71),vec3(0.86,0.84,0.80),uv.y+0.5);
col+=0.035*sin(uv.x*2.2+t*0.08+sin(uv.y*3.0+t*0.05));
for(int i=0;i<3;i++){
float fi=float(i);
float dir=mod(fi,2.0)*2.0-1.0;
float sp=0.022*(1.0+fi*0.35)*dir;
float base=-0.40+fi*0.29;
float x=uv.x+t*sp+fi*0.37;
float w=0.22;
float id=floor(x/w);
float lx=mod(x,w)-w*0.5;
float r1=h1(id+fi*17.0);
float r2=h1(id*1.7+fi*5.3+3.1);
float r3=h1(id*2.3+fi*9.1+7.7);
vec2 hb=vec2(0.05+0.04*r1,0.04+0.06*r2);
float bob=0.006*sin(t*0.5+id*1.3+fi*2.0);
vec2 p=vec2(lx,uv.y-base-hb.y-bob-0.012);
float sh=sdBox(p-vec2(0.018,-0.014),hb,0.03);
col*=1.0-0.16*(1.0-smoothstep(-0.02,0.05,sh));
float d=sdBox(p,hb,0.018);
vec3 bc=pal(r3);
float shade=0.92+0.10*clamp((p.y/hb.y)*0.7-(p.x/hb.x)*0.3,-1.0,1.0);
if(r1>0.5){
bc=mix(bc,bc*0.84,1.0-smoothstep(0.014,0.02,abs(p.y-hb.y*0.15)));
}
bc*=shade;
bc*=0.9+0.1*smoothstep(-0.035,-0.005,-d);
col=mix(col,bc,1.0-smoothstep(-0.004,0.004,d));
float pl=abs(uv.y-base+0.008)-0.011;
float below=step(uv.y,base-0.019);
col*=1.0-0.14*below*smoothstep(0.07,0.0,base-0.019-uv.y);
col=mix(col,vec3(0.62,0.50,0.40),1.0-smoothstep(-0.003,0.003,pl));
}
col=mix(col,vec3(0.92,0.89,0.84),0.12*smoothstep(-0.2,0.55,uv.y));
float glow=0.04*sin(t*0.12)*smoothstep(0.9,0.0,length(uv-vec2(-0.4,0.4)));
col+=glow;
float vig=1.0-0.28*dot(uv*vec2(0.8,1.0),uv*vec2(0.8,1.0));
col*=vig;
col=clamp(col,0.05,0.95);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourcegrid-cell refractive droplet lenses over horizontally drifting blurred bands and bokeh
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
float noise(vec2 p){
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = hash(i);
float b = hash(i + vec2(1.0, 0.0));
float c = hash(i + vec2(0.0, 1.0));
float d = hash(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
vec3 scene(vec2 p){
float t = u_time * 0.025;
float x = p.x + t;
vec3 sky = vec3(0.72, 0.75, 0.76);
vec3 mid = vec3(0.47, 0.54, 0.52);
vec3 low = vec3(0.35, 0.37, 0.41);
float h = 0.12 + 0.14 * noise(vec2(x * 2.2, 1.0));
vec3 c = mix(low, mid, smoothstep(-0.36, -0.14, p.y));
c = mix(c, sky, smoothstep(h - 0.08, h + 0.08, p.y));
float colm = noise(vec2(x * 5.0, 3.0));
float blk = smoothstep(0.4, 0.7, colm) * (1.0 - smoothstep(h - 0.1, h + 0.1, p.y)) * smoothstep(-0.3, 0.0, p.y);
c = mix(c, c * 0.82 + vec3(0.02, 0.03, 0.0), blk);
for (int i = 0; i < 5; i++) {
float fi = float(i);
float bx = mod(hash(vec2(fi, 2.0)) * 2.4 - t, 2.4) - 1.2;
vec2 c0 = vec2(bx, -0.14 + 0.2 * hash(vec2(fi, 5.0)));
float b = 1.0 - smoothstep(0.03, 0.09, length(p - c0));
c = mix(c, vec3(0.86, 0.66, 0.38), b * 0.5);
}
return c;
}
void main(){
vec2 uv = gl_FragCoord.xy / u_resolution;
vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
vec3 base = scene(p);
vec3 col = mix(base, vec3(0.78, 0.8, 0.8), 0.14);
const float GRID = 9.0;
vec2 g = p * GRID;
vec2 id = floor(g);
vec2 f = fract(g) - 0.5;
float h1 = hash(id);
float h2 = hash(id + 7.3);
float h3 = hash(id + 13.1);
float life = fract(u_time * 0.035 + h3);
float grow = smoothstep(0.0, 0.15, life) * (1.0 - smoothstep(0.6, 1.0, life));
float r = (0.12 + 0.16 * h1) * grow * step(0.35, h2);
vec2 o = vec2(h2 - 0.5, h1 - 0.5) * 0.35;
vec2 d = f - o;
d.y *= 1.1;
float dist = length(d);
float m = 1.0 - smoothstep(r - 0.08, r, dist);
vec2 q = p - (d / GRID) * 3.0;
vec3 dc = scene(q) * 1.06 + 0.03;
float rim = smoothstep(r - 0.12, r, dist);
float lowSide = clamp(-d.y / max(r, 0.001) * 1.5 + 0.3, 0.0, 1.0);
dc = mix(dc, dc * 0.68, rim * lowSide);
float hl = 1.0 - smoothstep(0.0, 0.08, length(d - vec2(-0.35, 0.4) * r));
dc += 0.22 * hl * step(0.05, r);
col = mix(col, dc, m);
float sh = (1.0 - smoothstep(0.0, 0.12, abs(dist - r - 0.03))) * step(0.0, -d.y) * step(0.05, r);
col *= 1.0 - 0.06 * sh * (1.0 - m);
float v = smoothstep(1.1, 0.3, length((uv - 0.5) * vec2(1.2, 1.0)));
col *= 0.86 + 0.14 * v;
gl_FragColor = vec4(col, 1.0);
}
This one didn't compile in your browser.
Sourcestratified domain-warped fbm cloud layers backlit by a breathing radial glow, with rising soft motes
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
float noise(vec2 p){
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = hash(i);
float b = hash(i + vec2(1.0, 0.0));
float c = hash(i + vec2(0.0, 1.0));
float d = hash(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
float fbm(vec2 p){
float v = 0.0;
float a = 0.5;
for (int i = 0; i < 4; i++) {
v += a * noise(p);
p = p * 2.03 + vec2(1.7, 9.2);
a *= 0.5;
}
return v;
}
void main(){
vec2 uv = gl_FragCoord.xy / u_resolution;
float asp = u_resolution.x / u_resolution.y;
vec2 p = vec2((uv.x - 0.5) * asp, uv.y - 0.5);
float t = u_time;
vec2 sp = vec2(0.28, -0.14);
float d = length((p - sp) * vec2(0.6, 1.0));
float breathe = 0.5 + 0.5 * sin(t * 0.25);
float glow = exp(-d * 2.4) * (0.75 + 0.25 * breathe);
vec3 skyTop = vec3(0.44, 0.46, 0.55);
vec3 skyLow = vec3(0.62, 0.58, 0.60);
vec3 col = mix(skyLow, skyTop, uv.y);
col += vec3(1.0, 0.62, 0.34) * glow * 0.5;
for (int i = 0; i < 3; i++) {
float fi = float(i);
vec2 q = vec2(p.x * 1.3 + t * 0.012 * (1.0 + fi), p.y * 4.2 + fi * 3.1);
float w = fbm(q * 0.5 + vec2(t * 0.02, fi));
float n = fbm(q + vec2(w * 1.2, w * 0.4));
float yc = 0.3 - fi * 0.24;
float band = exp(-pow((p.y - yc) * 4.5, 2.0));
float dens = smoothstep(0.32, 0.72, n + band * 0.28 - 0.08);
vec3 cBase = mix(vec3(0.36, 0.37, 0.45), vec3(0.55, 0.54, 0.60), fi * 0.35);
vec3 cloud = cBase + vec3(1.0, 0.68, 0.42) * glow * 0.55 * (1.0 - dens * 0.7);
cloud += vec3(0.05, 0.04, 0.03) * (1.0 - n);
col = mix(col, cloud, dens * (0.8 - fi * 0.1));
}
float seam = exp(-pow((p.y - sp.y - 0.02) * 7.0, 2.0)) * exp(-abs(p.x - sp.x) * 2.0);
col += vec3(0.9, 0.55, 0.3) * seam * 0.18 * (0.8 + 0.2 * breathe);
for (int i = 0; i < 9; i++) {
float fi = float(i);
float h1 = hash(vec2(fi, 1.0));
float h2 = hash(vec2(fi, 2.0));
float h3 = hash(vec2(fi, 3.0));
float y = mod(h2 + t * 0.018 * (0.6 + h3), 1.3) - 0.65;
float x = (h1 - 0.5) * asp + sin(t * 0.3 + fi * 1.7) * 0.03 + (y + 0.65) * 0.08;
vec2 c = vec2(x, y);
float r = 0.016 + 0.01 * h3;
float dd = length(p - c);
float fade = smoothstep(-0.65, -0.4, y) * smoothstep(0.65, 0.35, y);
col += vec3(1.0, 0.86, 0.66) * smoothstep(r * 2.2, r * 0.3, dd) * 0.28 * fade;
}
float vig = smoothstep(1.1, 0.3, length(p * vec2(0.8, 1.1)));
col *= 0.82 + 0.18 * vig;
col = 1.0 - exp(-col * 1.6);
gl_FragColor = vec4(col, 1.0);
}
This one didn't compile in your browser.
Sourcethresholded fbm wet-stain mask with edge pooling, sky-reflection tint and drifting cloud shadows
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float n(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);
f=f*f*(3.0-2.0*f);
return mix(mix(h(i),h(i+vec2(1.0,0.0)),f.x),mix(h(i+vec2(0.0,1.0)),h(i+vec2(1.0,1.0)),f.x),f.y);
}
float fbm(vec2 p){
float s=0.0;float a=0.5;
mat2 r=mat2(0.8,0.6,-0.6,0.8);
for(int i=0;i<5;i++){
s+=a*n(p);
p=r*p*2.02+vec2(1.7,9.2);
a*=0.5;
}
return s;
}
void main(){
vec2 uv=gl_FragCoord.xy/u_resolution;
vec2 p=(gl_FragCoord.xy-0.5*u_resolution)/u_resolution.y;
float t=u_time;
float g=fbm(p*3.0+11.0);
vec3 stone=mix(vec3(0.70,0.66,0.59),vec3(0.84,0.80,0.72),g);
float a=smoothstep(0.45,0.75,fbm(p*1.3+vec2(4.0,-2.0)));
stone=mix(stone,vec3(0.82,0.63,0.42),a*0.35);
vec2 q=p*1.6;
q+=0.15*vec2(fbm(p*2.0+t*0.02),fbm(p*2.0-t*0.017+3.1));
float w=fbm(q);
float th=0.48+0.06*sin(t*0.06);
float d=w-th;
float wet=smoothstep(0.0,0.035,d);
float rim=smoothstep(0.0,0.02,d)*(1.0-smoothstep(0.02,0.08,d));
float grad=smoothstep(-0.5,0.6,p.y+0.2*sin(p.x*1.5+t*0.05));
vec3 refl=mix(vec3(0.36,0.41,0.45),vec3(0.62,0.66,0.68),grad);
float cl=fbm(p*vec2(1.2,2.4)+vec2(t*0.03,0.0));
refl=mix(refl,vec3(0.74,0.75,0.74),cl*0.4);
vec3 wetCol=mix(stone*0.55,refl,0.5);
vec3 col=mix(stone,wetCol,wet);
col=mix(col,stone*0.5,rim*0.45);
float sh=fbm(p*0.8+vec2(t*0.015,t*0.005));
col*=0.88+0.2*sh;
col+=vec3(0.06,0.045,0.02)*smoothstep(0.9,-0.2,length(p-vec2(0.5,0.4)));
vec2 v=uv-0.5;
col*=1.0-0.5*dot(v,v);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourcetranslucent polar-wedge page fan with eased turning blade, fbm mist and soft columnar rain
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);
f=f*f*(3.0-2.0*f);
float a=hash(i);float b=hash(i+vec2(1.0,0.0));
float c=hash(i+vec2(0.0,1.0));float d=hash(i+vec2(1.0,1.0));
return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);
}
float fbm(vec2 p){
float v=0.0;float a=0.5;
for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
void main(){
vec2 uv=gl_FragCoord.xy/u_resolution;
vec2 p=(gl_FragCoord.xy-0.5*u_resolution)/u_resolution.y;
float t=u_time;
vec3 col=mix(vec3(0.13,0.19,0.20),vec3(0.31,0.39,0.36),uv.y);
col+=(fbm(p*2.2+vec2(t*0.015,-t*0.01))-0.5)*0.12;
vec2 rp=vec2(p.x*22.0,p.y);
float cx=floor(rp.x);float fx=fract(rp.x)-0.5;
float h=hash(vec2(cx,3.1));
float sp=0.35+0.35*h;
float ry=fract(p.y*1.1+t*sp+h*7.0);
float streak=smoothstep(0.4,0.0,abs(fx))*smoothstep(0.0,0.12,ry)*smoothstep(0.55,0.15,ry);
col+=vec3(0.55,0.66,0.70)*streak*0.08*(0.4+0.6*h);
vec2 gc=vec2(0.0,-0.08);
float g=exp(-3.0*length(p-gc))*(0.92+0.08*sin(t*0.35));
col+=vec3(0.95,0.62,0.28)*g*0.42;
vec2 s=vec2(0.0,-0.36);
vec2 d=p-s;
float r=length(d);
float a=atan(d.x,d.y);
float base=smoothstep(0.0,0.04,r);
for(int i=0;i<12;i++){
float fi=float(i);
float side=fi<5.5?-1.0:1.0;
float k=mod(fi,6.0);
float ai=side*(0.32+k*0.12);
float w=0.075;
float L=0.60-k*0.03+0.015*sin(fi*3.7);
float m=smoothstep(w,w-0.03,abs(a-ai))*smoothstep(L,L-0.02,r)*base;
float shade=mix(0.72,1.0,clamp(r/L,0.0,1.0));
vec3 pc=vec3(0.92,0.87,0.76)*shade+vec3(0.25,0.14,0.04)*g;
col=mix(col,pc,m*0.26);
}
float ph=fract(t/16.0);
float turn=smoothstep(0.2,0.85,ph);
float fade=smoothstep(0.0,0.12,ph)*smoothstep(1.0,0.9,ph);
float at=mix(1.0,-1.0,turn);
float Lt=0.58*(0.78+0.22*abs(sin(at)));
float wt=0.08+0.03*(1.0-abs(at));
float mt=smoothstep(wt,wt-0.03,abs(a-at))*smoothstep(Lt,Lt-0.02,r)*base;
vec3 tc=vec3(1.0,0.90,0.72)*mix(0.8,1.05,clamp(r/Lt,0.0,1.0));
col=mix(col,tc,mt*0.55*fade);
float rim=smoothstep(0.03,0.0,abs(r-Lt+0.015))*smoothstep(wt,wt-0.03,abs(a-at));
col+=vec3(1.0,0.75,0.4)*rim*0.25*fade;
for(int i=0;i<7;i++){
float fi=float(i);
float life=fract(t*0.035+fi*0.143);
vec2 mp=s+vec2(sin(fi*2.3+t*0.18)*0.32*(0.4+life),0.12+life*0.85);
float md=length(p-mp);
float mb=smoothstep(0.02,0.004,md)*smoothstep(0.0,0.2,life)*smoothstep(1.0,0.6,life);
col+=vec3(1.0,0.78,0.45)*mb*0.35;
}
vec2 v=uv-0.5;
col*=1.0-0.7*dot(v,v);
col=clamp(col,0.0,0.95);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourcesuminagashi marbling rings via smooth-min drop fields with fbm-warped flow and soft vertical rain
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);
return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),f.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),f.x),f.y);
}
float fbm(vec2 p){
float v=0.0;float a=0.5;
for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
void main(){
vec2 uv=(gl_FragCoord.xy-0.5*u_resolution)/u_resolution.y;
float t=u_time*0.05;
vec2 w=uv;
w+=0.14*vec2(fbm(uv*1.5+vec2(t,0.0))-0.5,fbm(uv*1.5+vec2(3.1,-t))-0.5);
w.y+=0.04*sin(uv.x*3.0+t*2.0);
float p=0.0;
for(int i=0;i<5;i++){
float fi=float(i);
vec2 c=vec2(0.55*sin(fi*2.4+t*(0.6+0.1*fi)),0.33*cos(fi*1.9+t*0.5));
p+=exp(-6.0*length(w-c));
}
float phase=-log(p)/6.0;
float x=phase*28.0-u_time*0.4+(fbm(w*4.0+3.0)-0.5)*1.8;
float band=floor((x+1.5708)/6.2832);
float s=0.5+0.5*sin(x);
float ink=smoothstep(0.3,0.75,s);
float m=mod(band,3.0);
vec3 indigo=vec3(0.20,0.27,0.40);
vec3 moss=vec3(0.36,0.45,0.41);
vec3 rust=vec3(0.60,0.38,0.26);
vec3 inkc=m<0.5?indigo:(m<1.5?moss:rust);
inkc*=0.9+0.2*fbm(w*3.0+band);
vec3 paper=vec3(0.84,0.81,0.74)*(0.93+0.09*fbm(uv*6.0));
vec3 col=mix(paper,inkc,ink*0.85);
col*=1.0-0.22*dot(uv,uv);
float cw=0.07;
float cx=floor(uv.x/cw);
float h=hash(vec2(cx,1.3));
float y=fract(uv.y*1.5+u_time*(0.35+0.2*h)+h*7.0);
float lx=abs(fract(uv.x/cw)-0.5)*cw;
float streak=smoothstep(0.013,0.003,lx)*smoothstep(0.0,0.15,y)*smoothstep(0.45,0.25,y)*step(0.45,h);
col=mix(col,vec3(0.88,0.90,0.93),streak*0.2);
col=mix(col,vec3(0.55,0.58,0.62),0.08);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourcefbm-feathered Rothko-style color fields with watercolor edge pooling
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
float noise(vec2 p){
vec2 i = floor(p);
vec2 f = fract(p);
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y);
}
float fbm(vec2 p){
float v = 0.0;
float a = 0.5;
for (int i = 0; i < 4; i++){
v += a * noise(p);
p = p * 2.03 + vec2(1.7, 9.2);
a *= 0.5;
}
return v;
}
float field(vec2 p, vec2 c, vec2 h, float seed){
vec2 d = abs(p - c) - h;
float dist = max(d.x, d.y);
float n = fbm(p * 3.0 + vec2(seed + u_time * 0.02, seed * 0.5)) - 0.5;
dist += n * 0.08;
return 1.0 - smoothstep(-0.02, 0.03, dist);
}
void main(){
vec2 uv = gl_FragCoord.xy / u_resolution;
float asp = u_resolution.x / u_resolution.y;
vec2 p = vec2((uv.x - 0.5) * asp, uv.y - 0.5);
float t = u_time * 0.03;
float breath = sin(u_time * 0.2) * 0.006;
vec3 bg = vec3(0.30, 0.34, 0.37);
vec3 col = bg * (0.92 + 0.12 * fbm(p * 1.5 + vec2(t, 0.0)));
vec3 topCol = vec3(0.58, 0.63, 0.66);
vec3 botCol = vec3(0.72, 0.57, 0.39);
float wx = 0.5 * asp - 0.1;
float mTop = field(p, vec2(0.0, 0.21), vec2(wx, 0.165 + breath), 3.1);
float mBot = field(p, vec2(0.0, -0.19), vec2(wx, 0.15 - breath), 7.4);
float pigT = 0.88 + 0.22 * fbm(p * 2.5 + vec2(t * 1.3, 2.0));
float pigB = 0.88 + 0.22 * fbm(p * 2.2 + vec2(-t, 5.0));
float damp = smoothstep(0.60, 0.74, fbm(p * 4.0 + vec2(11.0 + t * 0.5, 3.0)));
vec3 topPaint = topCol * pigT * (1.0 - 0.10 * damp);
vec3 botPaint = botCol * pigB * (1.0 - 0.07 * damp);
col = mix(col, topPaint, mTop * 0.94);
float eT = mTop * (1.0 - mTop) * 4.0;
col *= 1.0 - 0.22 * eT;
col = mix(col, botPaint, mBot * 0.94);
float eB = mBot * (1.0 - mBot) * 4.0;
col *= 1.0 - 0.22 * eB;
float gy = (p.y - 0.018 - (fbm(vec2(p.x * 2.0 + t, 1.0)) - 0.5) * 0.03) / 0.028;
float g = exp(-gy * gy) * smoothstep(wx + 0.05, wx - 0.25, abs(p.x));
float pulse = 0.8 + 0.2 * sin(u_time * 0.25);
col += vec3(0.88, 0.80, 0.62) * g * 0.22 * pulse;
float grain = noise(uv * vec2(70.0 * asp, 70.0)) - 0.5;
col += grain * 0.025;
float vig = smoothstep(1.1, 0.3, length(p * vec2(1.0 / asp, 1.0) * 1.4));
col *= 0.82 + 0.18 * vig;
col = clamp(col, 0.04, 0.92);
gl_FragColor = vec4(col, 1.0);
}
This one didn't compile in your browser.
Sourcecellular rain-ripple normals over warped fbm reflections
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float h21(vec2 p){
p = fract(p * vec2(123.34, 456.21));
p += dot(p, p + 45.32);
return fract(p.x * p.y);
}
float noise(vec2 p){
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
return mix(mix(h21(i), h21(i + vec2(1.0, 0.0)), f.x),
mix(h21(i + vec2(0.0, 1.0)), h21(i + vec2(1.0, 1.0)), f.x), f.y);
}
float fbm(vec2 p){
float v = 0.0;
float a = 0.5;
for (int i = 0; i < 4; i++){
v += a * noise(p);
p = p * 2.03 + vec2(1.7, 9.2);
a *= 0.5;
}
return v;
}
vec2 ripples(vec2 p, float t){
vec2 id = floor(p);
vec2 f = fract(p);
vec2 acc = vec2(0.0);
for (int j = 0; j < 3; j++){
for (int i = 0; i < 3; i++){
vec2 o = vec2(float(i) - 1.0, float(j) - 1.0);
vec2 c = id + o;
float h = h21(c);
float per = 2.6 + h * 2.2;
float age = mod(t + h * 17.0, per);
vec2 ctr = o + 0.2 + 0.6 * vec2(h, h21(c + 3.7));
vec2 q = f - ctr;
float d = length(q) + 0.0001;
float x = d - age * 0.42;
float env = exp(-x * x * 50.0) * exp(-age * 1.3) * smoothstep(0.0, 0.3, age);
acc += q / d * cos(x * 26.0) * env;
}
}
return acc;
}
void main(){
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
float t = u_time;
vec2 g = ripples(uv * 4.0, t) + ripples(uv * 6.5 + vec2(3.1, 7.4), t * 0.9 + 5.0) * 0.6;
vec2 w = uv + g * 0.012;
float c = fbm(w * vec2(1.5, 3.0) + vec2(t * 0.015, t * 0.01));
vec3 deep = vec3(0.20, 0.26, 0.29);
vec3 pale = vec3(0.50, 0.55, 0.56);
float k = smoothstep(0.25, 0.8, c) * 0.75 + (uv.y + 0.5) * 0.25;
vec3 col = mix(deep, pale, clamp(k, 0.0, 1.0));
col = mix(col, vec3(0.30, 0.34, 0.31), 0.25 * fbm(w * 5.0 - t * 0.02));
for (int i = 0; i < 3; i++){
float fi = float(i);
vec2 lp = vec2(sin(fi * 2.3 + t * 0.02) * 0.48, cos(fi * 1.7 + t * 0.017) * 0.3);
vec2 q = w - lp;
float a = fi * 1.9 + sin(t * 0.05 + fi) * 0.3;
q = mat2(cos(a), -sin(a), sin(a), cos(a)) * q;
float e = length(q * vec2(1.0, 2.1));
float m = 1.0 - smoothstep(0.06, 0.09, e);
vec3 leaf = mix(vec3(0.48, 0.30, 0.18), vec3(0.62, 0.44, 0.24), fbm(q * 12.0 + fi));
col = mix(col, leaf, m * 0.8);
col -= (1.0 - smoothstep(0.08, 0.14, e)) * (1.0 - m) * 0.03;
}
float s = dot(g, normalize(vec2(-0.4, 0.8)));
col += s * 0.07;
col += vec3(0.85, 0.9, 0.95) * pow(max(s, 0.0), 2.0) * 0.05;
col *= 1.0 - 0.35 * dot(uv, uv);
col = clamp(col, 0.05, 0.9);
gl_FragColor = vec4(col, 1.0);
}
This one didn't compile in your browser.
Sourceperspective-mapped flowing light ribbons with slanted rain streaks
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float noise(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);
return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),f.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),f.x),f.y);
}
float fbm(vec2 p){
float v=0.0;float a=0.5;
for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
void main(){
vec2 p=(gl_FragCoord.xy-0.5*u_resolution)/u_resolution.y;
float t=u_time;
const float hz=0.08;
vec3 col;
if(p.y>hz){
vec3 skyLow=vec3(0.95,0.66,0.45);
vec3 skyTop=vec3(0.27,0.32,0.46);
col=mix(skyLow,skyTop,smoothstep(hz,0.5,p.y));
float c=fbm(vec2(p.x*2.5-t*0.03,p.y*4.0+t*0.01));
float cm=smoothstep(0.42,0.75,c)*smoothstep(hz,hz+0.2,p.y);
col=mix(col,vec3(0.46,0.45,0.56),cm*0.7);
}else{
float d=1.0/(hz-p.y+0.02);
float xw=p.x*d;
vec3 road=vec3(0.12,0.12,0.2);
float n=noise(vec2(p.x*12.0,p.y*3.0-t*0.2));
vec3 glow=vec3(1.0,0.6,0.4)*exp(-(hz-p.y)*7.0)*(0.35+0.4*n);
float fog=exp(-d*0.08);
vec3 g=vec3(0.0);
for(int i=0;i<5;i++){
float fi=float(i);
float x0=(fi-2.0)*1.1+sin(d*0.25+t*0.3+fi*1.7)*0.35;
float dist=abs(xw-x0);
float line=smoothstep(0.32,0.05,dist);
float ph=fract(d*0.12-t*0.35+fi*0.37);
float dash=smoothstep(0.0,0.3,ph)*smoothstep(1.0,0.6,ph);
dash=mix(dash,0.5,smoothstep(10.0,25.0,d));
vec3 lc=mix(vec3(1.0,0.64,0.3),vec3(0.98,0.42,0.42),mod(fi,2.0));
if(i==2){lc=vec3(1.0,0.85,0.55);}
g+=lc*line*(0.35+0.65*dash)*fog;
}
col=road+glow+g*0.9;
}
float mist=exp(-abs(p.y-hz)*18.0);
col=mix(col,vec3(0.92,0.72,0.6),mist*0.5);
vec2 r=vec2(p.x+p.y*0.25,p.y);
const float cols=22.0;
float cx=floor(r.x*cols);
float h=hash(vec2(cx,3.1));
float fy=fract(r.y*2.5+t*(1.6+h*0.8)+h*7.0);
float streak=smoothstep(0.0,0.12,fy)*smoothstep(0.4,0.12,fy);
float wx=abs(fract(r.x*cols)-0.5);
streak*=smoothstep(0.2,0.05,wx)*step(0.45,h);
col+=vec3(0.75,0.82,0.95)*streak*0.16;
col*=1.0-0.35*dot(p,p);
col=clamp(col,0.03,0.95);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourceparallax layered value-noise hills with fbm clouds and sun rays
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float h1(float n){return fract(sin(n*12.9898)*43758.5453);}
float h2(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
float n1(float x){
float i=floor(x);float f=fract(x);f=f*f*(3.0-2.0*f);
return mix(h1(i),h1(i+1.0),f);
}
float n2(vec2 p){
vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);
float a=h2(i);float b=h2(i+vec2(1.0,0.0));
float c=h2(i+vec2(0.0,1.0));float d=h2(i+vec2(1.0,1.0));
return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);
}
float fbm(vec2 p){
float v=0.0;float a=0.5;
for(int i=0;i<4;i++){v+=a*n2(p);p=p*2.03+vec2(1.7,9.2);a*=0.5;}
return v;
}
void main(){
vec2 uv=gl_FragCoord.xy/u_resolution;
float asp=u_resolution.x/u_resolution.y;
vec2 p=vec2(uv.x*asp,uv.y);
float t=u_time;
vec2 sun=vec2(0.72*asp,0.70);
vec3 sky=mix(vec3(0.97,0.78,0.55),vec3(0.42,0.62,0.78),smoothstep(0.35,1.0,uv.y));
vec2 dv=p-sun;
float d=length(dv);
sky+=vec3(1.0,0.72,0.40)*exp(-d*5.0)*0.45;
float ray=n1(atan(dv.y,dv.x)*5.0+t*0.08);
sky+=vec3(0.9,0.65,0.35)*ray*exp(-d*1.8)*0.18;
float c=fbm(p*vec2(1.4,2.8)+vec2(t*0.035,0.0));
float cm=smoothstep(0.52,0.78,c)*smoothstep(0.4,0.85,uv.y);
vec3 cloudCol=mix(vec3(0.62,0.62,0.70),vec3(0.96,0.86,0.74),smoothstep(0.9,0.2,d));
vec3 col=mix(sky,cloudCol,cm*0.75);
vec3 farC=vec3(0.60,0.58,0.74);
vec3 midC=vec3(0.86,0.55,0.34);
vec3 nearC=vec3(0.42,0.20,0.16);
for(int i=0;i<5;i++){
float fi=float(i);
float dep=fi/4.0;
float spd=0.03+fi*fi*0.035;
float base=0.52-fi*0.095;
float amp=0.05+fi*0.02;
float fr=2.6-fi*0.35;
float x=p.x*fr+t*spd+fi*17.0;
float y=base+amp*(n1(x)*0.72+n1(x*2.3+3.0)*0.28);
vec3 lc=dep<0.5?mix(farC,midC,dep*2.0):mix(midC,nearC,(dep-0.5)*2.0);
lc=mix(lc,sky,(1.0-dep)*0.45);
float rim=smoothstep(0.035,0.0,y-p.y);
lc+=vec3(0.30,0.18,0.06)*rim*(1.0-dep*0.5);
lc*=0.85+0.15*smoothstep(y-0.25,y,p.y);
float m=1.0-smoothstep(y-0.006,y,p.y);
col=mix(col,lc,m);
float mist=exp(-abs(p.y-(base-0.02))*18.0)*(1.0-dep)*0.18;
col=mix(col,vec3(0.95,0.86,0.78),mist*(1.0-m*0.5));
}
vec2 q=vec2(p.x+p.y*0.18,p.y);
float cx=floor(q.x*28.0);
float on=step(0.55,h1(cx));
float fx=abs(fract(q.x*28.0)-0.5);
float ry=fract(q.y*2.5+t*(0.9+h1(cx+3.0)*0.4)+h1(cx+7.0)*10.0);
float streak=smoothstep(0.22,0.08,fx)*smoothstep(0.0,0.1,ry)*smoothstep(0.35,0.1,ry);
col=mix(col,vec3(0.92,0.93,0.97),streak*on*0.16);
vec2 vc=uv-0.5;
col*=1.0-dot(vc,vc)*0.55;
col=clamp(col,0.04,0.95);
gl_FragColor=vec4(col,1.0);
}
This one didn't compile in your browser.
Sourcerefractive rain-on-glass droplets over drifting bokeh
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
float h(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
float h1(float x){ return fract(sin(x * 91.345) * 47453.123); }
float n(vec2 p){
vec2 i = floor(p); vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
return mix(mix(h(i), h(i + vec2(1.0, 0.0)), f.x), mix(h(i + vec2(0.0, 1.0)), h(i + vec2(1.0, 1.0)), f.x), f.y);
}
float fbm(vec2 p){
float s = 0.0; float a = 0.5;
for (int i = 0; i < 4; i++) { s += a * n(p); p *= 2.03; a *= 0.5; }
return s;
}
vec3 drops(vec2 uv, float sc, float t){
vec2 p = uv * sc;
vec2 id = floor(p);
vec2 f = fract(p) - 0.5;
float r = h(id);
float slide = fract(t * 0.04 * (0.6 + r) + r * 5.0);
vec2 c = vec2((fract(r * 7.3) - 0.5) * 0.4, 0.3 - slide * 0.6);
vec2 q = (f - c) * vec2(1.0, 0.85);
float d = length(q);
float rad = 0.13 + 0.1 * fract(r * 13.1);
float life = sin(slide * 3.14159);
float m = smoothstep(rad, rad - 0.06, d) * life;
return vec3(q / rad * m, m);
}
vec3 scene(vec2 uv, float t){
float g = uv.y * 0.7 + 0.5;
vec3 col = mix(vec3(0.30, 0.27, 0.24), vec3(0.34, 0.42, 0.44), clamp(g, 0.0, 1.0));
col += 0.06 * vec3(0.9, 0.8, 0.6) * fbm(uv * 1.5 + vec2(t * 0.015, 0.0));
for (int i = 0; i < 22; i++) {
float fi = float(i) + 1.0;
float a = h1(fi); float b = h1(fi * 2.17); float c = h1(fi * 3.71);
float x = mod(a * 2.0 - t * 0.025 * (0.5 + b), 2.0) - 1.0;
float y = (b - 0.5) * 0.55 - 0.08 + 0.02 * sin(t * 0.2 + fi);
float r = 0.05 + 0.08 * c;
float d = length(uv - vec2(x, y));
float disk = smoothstep(r, r * 0.82, d);
float rim = smoothstep(r * 0.55, r * 0.95, d) * disk;
vec3 lc = mix(vec3(1.0, 0.68, 0.34), vec3(0.72, 0.82, 0.42), step(0.55, h1(fi * 5.3)));
lc = mix(lc, vec3(0.55, 0.78, 0.80), step(0.85, h1(fi * 7.9)));
float pulse = 0.85 + 0.15 * sin(t * 0.3 + fi * 1.7);
col += lc * (disk * 0.22 + rim * 0.12) * pulse * (0.6 + 0.4 * c);
}
return col;
}
void main(){
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
float t = u_time;
vec3 d1 = drops(uv, 5.0, t);
vec3 d2 = drops(uv + vec2(0.31, 0.17), 7.5, t * 1.2);
vec2 off = d1.xy * 0.09 + d2.xy * 0.06;
float m = max(d1.z, d2.z);
float fog = 0.32 + 0.18 * fbm(uv * 2.2 + vec2(t * 0.02, -t * 0.01));
vec3 mistC = vec3(0.60, 0.63, 0.62);
vec3 outside = mix(scene(uv, t), mistC, fog);
vec3 inside = mix(scene(uv * 0.92 - off * 1.8, t), mistC, fog * 0.25) * 1.05;
vec3 col = mix(outside, inside, m);
vec2 hl = d1.xy + d2.xy;
col += vec3(0.9, 0.92, 0.9) * smoothstep(0.2, 0.7, dot(hl, vec2(-0.5, 0.6))) * m * 0.18;
col -= vec3(0.05) * smoothstep(0.3, 0.8, dot(hl, vec2(0.4, -0.7))) * m;
float v = 1.0 - 0.35 * dot(uv * vec2(0.9, 1.2), uv * vec2(0.9, 1.2));
col *= v;
col = mix(col, vec3(dot(col, vec3(0.33))), 0.12);
gl_FragColor = vec4(clamp(col, 0.04, 0.92), 1.0);
}