// Water Ripple: clear water over a floor (or your own image), seen from // above. Rings are linear capillary–gravity wave packets, so they add up: // each drop, the cursor's wake and the slow swell are summed analytically, // with no simulation state. // // Measured on a rain-on-puddle recording (Commons, "Capillary waves from rain // drops", CC BY 4.0) and on the physics of the waves themselves: // - a ring is a packet of two to four crests that widens as it travels: the // waves near the 1.7 cm minimum-speed wavelength (23 cm/s) disperse, the // short capillary crests running ahead; // - rings fade within about one and a half seconds (viscous damping) while // their height falls as 1/√r (energy spread over a growing circle); // - what makes a ring visible is light: a low sun's glint on its slopes, the // floor refracted through it, and the caustic lines its lens focuses below. // Coordinates: uv and pointer use vgpu's space, origin top-left, y down; the // water plane is measured in frame heights. struct Params { time:f32, texel:vec2f, pointer:vec2f, presence:f32, trail0:vec4f, trail1:vec4f, trail2:vec4f, trail3:vec4f, trail4:vec4f, trail5:vec4f, trail6:vec4f, trail7:vec4f, entry0:vec4f, entry1:vec4f, entry2:vec4f, waterColor:vec4f, floorColor:vec4f, lightColor:vec4f, skyColor:vec4f, scale:f32, strength:f32, depth:f32, caustics:f32, rain:f32, swell:f32, gloss:f32, flowSpeed:f32, interaction:f32, tailLength:f32, opacity:f32, hasMedia:f32, mediaAspect:f32, mediaTexel:vec2f, mediaFocus:vec2f, } @group(0) @binding(0) var params:Params; // Your own image or video under the water, in place of the stone floor. @group(0) @binding(1) var media:texture_2d; @group(0) @binding(2) var mediaSampler:sampler; const TAU:f32=6.2831853; // 1 - 1/n for water (n = 1.333): how far a ray bends per unit of slope. const BEND:f32=0.25; fn hash(p:vec2u)->u32 { var h=p.x*1664525u+p.y*1013904223u+374761393u; h^=h>>16u; h*=2246822519u; h^=h>>13u; h*=3266489917u; h^=h>>16u; return h; } fn rand2(p:vec2i,salt:u32)->vec4f { let h=hash(bitcast(p)+vec2u(salt,salt*7u)); let g=hash(vec2u(h,salt^0x9e3779b9u)); return vec4f(f32(h&0xffffu),f32(h>>16u),f32(g&0xffffu),f32(g>>16u))/65535.0; } fn noise(p:vec2f)->f32 { let i=vec2i(floor(p)); let f=fract(p); let u=f*f*(3.0-2.0*f); let a=rand2(i,1u).x; let b=rand2(i+vec2i(1,0),1u).x; let c=rand2(i+vec2i(0,1),1u).x; let d=rand2(i+vec2i(1,1),1u).x; return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); } fn toLinear(c:vec3f)->vec3f { return pow(max(c,vec3f(0.0)),vec3f(2.2)); } // The surface's slope and curvature at a point. Curvature is kept twice: // all of it bends the view, but the fine ripples' share of the caustics is // blurred out by the sun's own width, as it is at the bottom of a pool. struct Surf { g:vec2f, hs:vec3f, hr:vec3f } // One ring: a packet behind a front at radius c·age. Height is written as // slope/k, so `amp` is the peak slope. Radial profile f(d) with // f' (slope) and f'' (curvature) in closed form; the Hessian of a radial // function is f'' r̂r̂ᵀ + (f'/d)(I − r̂r̂ᵀ). fn ring(s:ptr,dv:vec2f,age:f32,amp:f32,lambda:f32,c:f32) { if(age<=0.0||amp<=1e-4){ return; } let d=length(dv); let front=d-c*age; let sigma=lambda*(0.7+1.5*age); let x=front+0.9*sigma; if(abs(x)>3.0*sigma){ return; } let k=TAU/lambda; // Capillary dispersion: crests shorten toward the front. let q=0.16*k/sigma; let psi=k*front+q*front*front; let dpsi=k+2.0*q*front; let s2=sigma*sigma; let e=exp(-0.5*x*x/s2); let de=-x/s2*e; let dde=(x*x/s2-1.0)/s2*e; let spread=inverseSqrt(1.0+d/(3.0*lambda)); let a=amp*exp(-age/1.15)*spread/k; let cs=cos(psi); let sn=sin(psi); let f1=a*(de*cs-e*sn*dpsi); let f2=a*((dde-e*dpsi*dpsi)*cs-(2.0*de*dpsi+e*2.0*q)*sn); let dd=max(d,0.35*lambda); let r=dv/dd; let t=f1/dd; (*s).g+=f1*r; (*s).hr+=vec3f(f2*r.x*r.x+t*(1.0-r.x*r.x),(f2-t)*r.x*r.y,f2*r.y*r.y+t*(1.0-r.y*r.y)); } // One long swell: a gravity wave, ω ∝ √k, height slope/k. fn swellWave(s:ptr,p:vec2f,dir:vec2f,lambda:f32,slope:f32,t:f32,phase:f32) { let k=TAU/lambda; let th=dot(dir,p)*k-0.62*sqrt(k)*t+phase; let c=cos(th); let sn=sin(th); (*s).g+=slope*c*dir; let h=-slope*k*sn; (*s).hs+=vec3f(h*dir.x*dir.x,h*dir.x*dir.y,h*dir.y*dir.y); } // A slow swell: seven gravity waves of unrelated lengths and headings, so // the caustic net they focus never repeats. fn swellField(s:ptr,p:vec2f,t:f32,sc:f32) { let sw=0.038*clamp(params.swell,0.0,2.0); if(sw<=0.0){ return; } swellWave(s,p,vec2f(0.94,0.34),0.420*sc,sw,t,0.0); swellWave(s,p,vec2f(-0.41,0.91),0.334*sc,sw*0.95,t,1.7); swellWave(s,p,vec2f(0.21,-0.98),0.275*sc,sw*0.9,t,4.1); swellWave(s,p,vec2f(-0.87,-0.49),0.236*sc,sw*0.85,t,2.6); swellWave(s,p,vec2f(0.66,-0.75),0.199*sc,sw*0.8,t,5.3); swellWave(s,p,vec2f(0.99,-0.12),0.171*sc,sw*0.75,t,0.9); swellWave(s,p,vec2f(-0.18,0.98),0.141*sc,sw*0.7,t,3.4); } // Rain: each cell of the plane drops on its own clock. A cell is as wide as // a ring ever grows, so only the 3×3 cells around a point can reach it. fn rainDrops(s:ptr,p:vec2f,t:f32,c:f32,lambda:f32) { let rate=clamp(params.rain,0.0,1.0); if(rate<=0.001){ return; } let life=1.6; let cell=c*life+0.1; let home=vec2i(floor(p/cell)); for(var j=-1;j<=1;j++){ for(var i=-1;i<=1;i++){ let id=home+vec2i(i,j); let r=rand2(id,11u); // Cells are 2.25× the old area, so each drops correspondingly often. let period=mix(13.0,1.1,rate)*(0.6+0.8*r.x); let clock=t/period+r.y; let cycle=floor(clock); let age=fract(clock)*period; if(age>life){ continue; } let n=rand2(id+vec2i(i32(cycle)*17,3),23u); // Fewer drops fall as the rate drops, rather than all of them fainter. if(n.w>0.35+0.65*rate){ continue; } let at=(vec2f(id)+0.1+0.8*n.xy)*cell; let dv=p-at; if(dot(dv,dv)>(c*age+0.1)*(c*age+0.1)){ continue; } ring(s,dv,age,(0.6+0.6*n.z),lambda*(0.8+0.45*n.z),c); } } } fn surface(p:vec2f,aspect:f32)->Surf { var s=Surf(vec2f(0.0),vec3f(0.0),vec3f(0.0)); let t=params.time*clamp(params.flowSpeed,0.0,4.0); let sc=clamp(params.scale,0.3,3.0); let c=0.16*sc; let lambda=0.021*sc; swellField(&s,p,t,sc); rainDrops(&s,p,t,c,lambda); let touch=clamp(params.interaction,0.0,2.0); if(touch>0.0){ // The cursor's wake: every recent point of its path is a source, as // old as the moment it was there and as strong as the cursor was fast. let span=clamp(params.tailLength,0.0,4.0)*0.22; if(span>0.02){ let step=span/15.0; let path=array(params.trail0.xy,params.trail0.zw,params.trail1.xy,params.trail1.zw, params.trail2.xy,params.trail2.zw,params.trail3.xy,params.trail3.zw, params.trail4.xy,params.trail4.zw,params.trail5.xy,params.trail5.zw, params.trail6.xy,params.trail6.zw,params.trail7.xy,params.trail7.zw); // Each stretch of path between two samples is a line of sources; the // nearest point on it carries the age of the moment it was there. for(var i=1;i<16;i++){ let a=path[i-1]*vec2f(aspect,1.0); let b=path[i]*vec2f(aspect,1.0); let ab=b-a; let len2=dot(ab,ab); let u=select(0.0,dot(p-a,ab)/len2,len2>1e-9); // Beyond either end belongs to the neighbouring stretch, except at the // path's two ends. if((u<0.0&&i>1)||(u>1.0&&i<15)){ continue; } let w=clamp(u,0.0,1.0); let age=step*(f32(i-1)+w); let fade=1.0-age/span; let speed=sqrt(len2)/step; ring(&s,p-(a+ab*w),age,touch*min(speed*1.1,1.3)*fade*fade*smoothstep(0.0,0.07,age),lambda,c); } } // Arriving on the water: one drop where the cursor came in. let entries=array(params.entry0,params.entry1,params.entry2); for(var e=0;e<3;e++){ let en=entries[e]; if(en.z<3.0){ ring(&s,p-en.xy*vec2f(aspect,1.0),en.z,0.8*touch,lambda*1.25,c); } } } return s; } fn mediaCover(uv:vec2f)->vec2f { let frame=params.texel.y/max(params.texel.x,1e-6); let clip=max(params.mediaAspect,1e-4); var size=vec2f(1.0); if(frame>clip){ size.y=clip/frame; } else { size.x=frame/clip; } let centre=clamp(params.mediaFocus,size*.5,1.0-size*.5); return centre+(uv-.5)*size; } // Pale limestone: broad, quiet variation and a fine grit, so refraction has // something to bend without the floor competing with copy. fn stone(q:vec2f)->vec3f { let base=toLinear(params.floorColor.rgb); let broad=noise(q*3.1)*0.6+noise(q*7.3)*0.4; let grit=noise(q*190.0)-0.5; return base*(0.9+0.14*broad+0.05*grit); } fn shade(uv:vec2f)->vec3f { let aspect=params.texel.y/max(params.texel.x,1e-6); let p=vec2f(uv.x*aspect,uv.y); let s=surface(p,aspect); let strength=clamp(params.strength,0.0,3.0); let g=s.g*strength; let n=normalize(vec3f(-g,1.0)); // Looking straight down, the view ray bends toward the slope; the floor // is seen displaced by the depth it travels. let reach=0.08+0.22*clamp(params.depth,0.0,2.0); let q=p+BEND*reach*g; var ground:vec3f; let mediaOn=params.hasMedia>.5; if(mediaOn){ let quv=vec2f(q.x/aspect,q.y); ground=toLinear(textureSampleLevel(media,mediaSampler,clamp(mediaCover(quv),vec2f(0.0),vec2f(1.0)),0.0).rgb); } else { ground=stone(q); } // Caustics: sunlight through the swell's lens lands on the floor with // density 1/det(I + D·BEND·H). They are drawn where the view ray meets the // floor, so every ring above lenses the net it passes over; the ripples' own // fine caustics are blurred out by the sun's width. Dispersion shifts each // channel's focus a little. let dz=1.2+6.2*clamp(params.depth,0.0,2.0); var under=Surf(vec2f(0.0),vec3f(0.0),vec3f(0.0)); swellField(&under,q,params.time*clamp(params.flowSpeed,0.0,4.0),clamp(params.scale,0.3,3.0)); let h=under.hs*strength; var caustic=vec3f(0.0); for(var ch=0;ch<3;ch++){ let m=dz*BEND*(0.96+0.04*f32(ch)); let det=(1.0+m*h.x)*(1.0+m*h.z)-m*m*h.y*h.y; caustic[ch]=1.0/max(abs(det),0.07); } // Normalise so a calm surface lights the floor exactly as no caustics would. let lightC=toLinear(params.lightColor.rgb); let causticAmt=clamp(params.caustics,0.0,2.0); let lit=mix(vec3f(1.0),0.52+0.3*min(caustic,vec3f(9.0)),causticAmt); // Water between eye and floor: Beer–Lambert, each channel absorbed as far // as the water colour lacks it (red goes first in a pool), and a little of // that colour scattered back toward the eye. let water=toLinear(params.waterColor.rgb); // The floor shelves gently away from the top left, as a pool deepens. let shelf=select(0.82+0.36*smoothstep(0.0,1.0,uv.x*0.7+uv.y*0.3),1.0,mediaOn); let thick=clamp(params.depth,0.0,2.0)*shelf; let path=(0.4+1.4*thick)*select(1.0,0.35,mediaOn); let tint=exp(-(1.0-water)*path*1.6); var colour=ground*tint*lit*mix(vec3f(1.0),lightC,0.3)*1.35+water*(1.0-tint)*0.32; // Reflection: little at normal incidence (Fresnel), but a low sun and the // sky fill slopes that tilt toward them, which is what draws each ring. let r=reflect(vec3f(0.0,0.0,-1.0),n); let o=1.0-n.z; let fres=0.02+0.98*o*o*o*o*o; let sky=toLinear(params.skyColor.rgb); let tilt=length(r.xy); let gloss=clamp(params.gloss,0.0,2.0); colour=colour*(1.0-fres)+sky*(fres+0.4*smoothstep(0.18,0.7,tilt))*gloss; // The sun: a soft disc up and to the right, caught only by steep slopes. let sunAt=r.xy-vec2f(0.30,-0.22); let sun=exp(-dot(sunAt,sunAt)/0.0025)+0.12*exp(-dot(sunAt,sunAt)/0.009); colour+=lightC*sun*1.6*gloss; return colour; } @fragment fn fs_main(@location(0) uv:vec2f)->@location(0) vec4f { var c=shade(uv); let m=max(c.r,max(c.g,c.b)); // Hue-preserving shoulder; only the hottest cores burn toward white. if(m>0.8){ let k=(0.8+0.2*(1.0-exp(-(m-0.8)/0.2)))/m; let burn=clamp((m-1.0)*0.45,0.0,0.7); c=mix(c*k,vec3f(max(c.r,max(c.g,c.b))*k),burn); } var enc=pow(clamp(c,vec3f(0.0),vec3f(1.0)),vec3f(1.0/2.2)); enc+=(fract(sin(dot(uv/params.texel,vec2f(12.9898,78.233)))*43758.5453)-0.5)/255.0; let a=clamp(params.opacity,0.0,1.0); return vec4f(clamp(enc,vec3f(0.0),vec3f(1.0))*a,a); }

Water Ripple

Palette

Water

Motion & interaction

Compositing