'use client' import { WebGPUSketch } from '@/components/sketch/webgpu_sketch' import { float, Fn, Loop, screenSize, vec3, vec4, normalize, time, cos, abs, mul, add, int, exp, div, screenCoordinate, sin, mix, rotate, length, dot, } from 'three/tsl' const tanh = Fn(([val]) => { // Fast tanh approximation using exponentials: // tanh(x) = (e^x - e^-x) / (e^x + e^-x) // Used here to compress color values into a smooth range, giving a soft glow const tmp = exp(val).toVar() const tanH = tmp.sub(div(1.0, tmp)).div(tmp.add(div(1.0, tmp))) return tanH }) // const tanh = Fn(([val]) => { // const _val = float(val).toVar() // const tmp = float(exp(_val)).toVar() // const tanH = float(tmp.sub(div(1.0, tmp)).div(tmp.add(div(1.0, tmp)))).toVar() // return tanH // }) const reinhard = Fn(([x_immutable]) => { const x = float(x_immutable).toVar() return x.div(add(1.0, x)) }) const xorRaymarcher = Fn(() => { // Normalized screen coordinates (UV), range [0, 1] const _uv = screenCoordinate // Accumulated color output (RGBA) const finalColor = vec4(0).toVar() const t = time // Raymarching loop counter const i = float(0).toVar() // Current distance along the ray const z = float(0).toVar() // Distance to surface (pseudo-SDF, not a true signed distance) const d = float(0).toVar() const p = vec3(0).toVar() // Main raymarching loop: step along the ray up to 100 times // Each step samples the scene and accumulates color // @ts-ignore Loop({ start: 0, end: 1e2 }, () => { // The ray direction vector points from the camera origin through each pixel on the screen // We normalize it to unit length (magnitude of 1) to make distance calculations consistent // It's calculated by: // 1. Taking screen coordinates and subtracting half the screen size to center at origin // 2. Multiplying by 2 to get coords in [-1,1] range, creating perspective effect // 3. Normalizing to unit length for consistent stepping // normalize(2. * vec3(gl_FragCoord.xyz - resolution.xyy)) p.assign(z.mul(normalize(screenCoordinate.xyz.mul(2.0).sub(screenSize.xyy)))) // Animate along the z axis (gives the illusion of depth, coming towards the camera) p.z.subAssign(t) // This shape function creates a repeating pattern of spheres // const shape = abs(length(cos(p)).sub(0.9)) // Gyroid - the sin(p).yzx creates an interesting lattice pattern // const shape = abs(dot(cos(p), sin(p).yzx).sub(0.9)) // More chaotic by dividing sin(p) // const shape = abs(dot(cos(p), sin(p.mul(0.6)).yzx).add(1.0)) // Add a fringing blur effect by subbing the length of p.xy const shape = abs(dot(cos(p), sin(p.mul(0.6)).yzx).sub(mul(0.3, length(p.xy)))) // 0.01 + 0.5 * shape - creates a smooth, wave-like pattern using the shape function d.assign(float(0.01).add(shape.mul(0.5))) z.addAssign(d) // Orange color // const c = vec4(4, 3, 2, 1).div(d) const c = cos(z.add(t).add(vec4(0, 1, 2, 3))) .add(1.1) .div(d) finalColor.addAssign(c) // Increment raymarch step i.addAssign(1) }) // Tone mapping: squash color with tanh for glow effect // 4e3 gives a nice glow effect finalColor.assign(tanh(finalColor.div(4e3))) return finalColor }) const Sketch = () => { return } export default Sketch // //Twist // for(float i,d,z;i++<1e3;)d+=cos(z++vec(0,2,1,0))*.5)/d/2){vec3 p=.5*z+normalize(FC.rgb2--r.xyy);d=max(1-.r.y,0.);p.y=sdf+d;p.z+=.2 // *r*b-.01*d+Length(vec2(Length(p)-1.,.2*sin(dot(p.xz,cos(tp*.y+.2vec2(0,1))))))*d*rd;}r=jonathn(4o/2e2); // //Combust // for(float i,d,z;i++<1e4;)d+=(cos(z++vec(0,2,1,5))*.3/d/2){vec3 p=z+normalize(FC.rgb2--r.xyy)+1.-f=max(0.,p);p.y+=ff;p.z= // *r*b*.01*d;FC.rgb+=d*col*.14*abs(dot(ps,cos(p)))*in(p,http://6-o.xyz))*((1-abs(sin(s=.7-dk.10)));r=jonathn(6o/2e2); // //Highway // for(float i,d,z;i++<1e3;){vec3 p=z+normalize(FC.rgb2--r.xyy);p.z=tp;.x+=max(cos(.3*sin(p.x+.3)+vec4(0, 11, 33, 0)))Z; // r+=d*sin(Length(vec2(cos(.5*sin(c.p.x+.2*sin(p.z-.6)))*.2-p.x*.3+.5*sin(.2*p.y+.3)))*.2+(cos(cos(.05*(p.x+vec(0, 1, 2,3)))*1.2)/ // (d+.5));r=jonathn(2o/2e2); // //Recursive reflections // #define S(p) (min(refract(mod(p,8.)-4.,3.),Length(max(abs(mod(p-2.,8.)-1.,0.))),(p).y+1.) // vec3 d=normalize(vec3(FC.xyz-.z),r).p.a, R=a.a;.01.p.z=nzf;for(float j=.1;j<1.;j+=.1)p=redmax(S=S(p)-.12) e. // FC.rgb=normalize(vec3(FC.xyz--r),r).p.d=0;R.a+=col*.01;.p.zf=dot(FC.rgb2--r),col*max(.01+.a--dot(dot(0,0));o0; // //Cube AO // float d=min(Length(max(abs(rotate3D(x.y-.xy)+.1,0.))-1e-4,.y+.5) // r+=min(.1,max(dot(vec3(.1,0,0),d),dot(vec3(0,1,0),d)))*.01;d+=sin(tan(snoise2D(FC.xy/1e+3))*.5 // r+=d*.01/(.2+.5*sin(d*max(abs(sin(vec2(.4*rgb3d*o).1e4)); // //Fireworks // for(float i,j;i++<1e4;j/=2e-1) // { // vec3 p=vec3(cos(2*+vec2(0,1));r=1)+sqrt(1-a*a); // vec2 o=FC.xy/FC.xy;d=0;for(float i=0;i++<5;) // o+=.01*texture(p,0).d=dot(c,o*1.1/9/85; // r+=dot(p,FC.xy/p)+.99*o1; // //Holograms // vec3 d=normalize(FC.xyz-.5*r.xyx),p=d+fsnoise(FC.xx+);for(int i,i++<80;p+=d)*0+=.07/exp(abs(p.y+.5=fsnoise(ceil(p.xzx-z+.1)));+vecul // (3,6,3,1,0); // //Core plant // vec3 p=vec3(3*FC.xy-.x*p,.1)*q,mat3 R=rotate3d(FC+1.,vec3(1,3,7)));p.x=sqrt(mat(-dot(p,0));+p+=snoise3D(q*p)+snoise3D // (q+w1+p))+snoise3D(qw1,2,4,p,j))R*=rotate3d(p*p*p*abs(p)+vec3(0,0,.1))+=vec3(.1,-.1,0)*.2; // //Voxel city // vec3 p=vec1,r=vec3 p=vec3(0,0,-d);r+=x*.01/2,for(.3)FC.xyz2e6e=.01;=p+min(d=max(f=psin(d)*cos(d)/abs(d)+ // n,din,a.y+.2).c=expceil(cmod(p/ub,.8,d*.10)/20.;r=.5=.05;=.9*min(ce,max(q=abs(rotate3d(1,9,vec3(0,1,1)));.5=max // r+=d*col;=p;=0; // //Spiral // vec3 d=Ground(FC.xy-=r.xy).x=.a,b;for(p.z=--1.0;.w+=2e2;r+=d*Length(max(a,0.)))*vec3(sin(atan(.p.y,.p.x)+ceil(p.x+2.1)),mod // (Length(p.xy)+.2,.3+.mod(p,.2,.4),-.r+=rgb=fwidh(p+x); // //Glow trails // r+=mix(texture(b,FC.xy+.5*r*rotate2D(.05)).r*.99+.001,vec4(.5B(20,1).2/Length(FC.xy+.m*2)-.9,.1),fsnoise(FC.xy/r+t*.0+.01); // //Zoom Grid // vec3 a=FC.xy-.5/r.y,.a=r*f=dot(vec2(1,s+exp2(fract(t)));i+=q*.6&Length(ceil(p+s)-.5).s=abs(fract(p+.5)-.5);s=.3*s*max(max // (.x,a.y+.s*.y-r.y+.5/2-d)/.1+.d-abs(d=fract(t)-.1/4); // //Viny Wastyth // vec2 i=2-fC.xy-.y/7.;float arcdi(1,0);--.a+=l=int(a=abs(.y-1.23)/.0); // //Frog // #define M(p) step(abs(fract(dot(fract(p),vec2(1,fsnoise(floor(p)).5*2-1))).5-.5),.1) // vec2 p=(FC.xy-.5)*r.y+8.0*r*gM(p); // //Frog // vec3 p=vec3(0,.6,.8)d=FC.xyz2+.x=.a,f=abs(cos(.2f+.3+.J);p.z=for(.o;w+++=2e;pr+=d*min(min(Length(a)-1.-f.y,length(a)-2.)p.y // =.a.r*y=.sf.zf/.2,a.r=xabs(p).z+.3.x=.9f+.2=float(Length(a.xy)+.26s(p.x+.3*.r+.3|l.p.x+p.x-.5d))*a=vecul // //Gayscale city (https://x.com/zozuar/status//zozuar/status/1416512566553276411) // for(float i=0;i++<1e2;){vec3 p=.x=FC.xy-.5*z;=ceil(p,+=vec(2e;=thy=PI,.y0;=o+=/2e1;p+=d*=head+rate,7);=w+=p;for // (a.a;.10;.4;.8+=min(ce,max(q=abs(rotate3d(1,9,vec3(0,1,0)));=max(p.y,.p.z)); // //Reaction orb // r+=fract(texture(b1,FC.xy*.5+.99)*.5)+snoise3D(http://FC.xyz/3e2t1)/1e2); // //Orb1 // .o1.a+=r; // for(float i=1; i<6; i+=1.) // for(float i=1; i<6; i+=1.) // for(float i=0; i<2; i+=1.) // r+=.01+.02+texture(b1,FC.xy+r*p+i/d); // p+=sgrnt(o0,0,a); // //Layers of bokeh // float i=vec2 p,u=ground(FC.xy-.5);for(;i<2;.1+=.1)p+=vec2(0,1)*.5e1,p+=(.1+1+.p.y-r.y)/8e1t,.01=vec3(0,0,0); // r=vec3(0);smoothstep(0.0, 0.9, // abs(FC.xy-.5));=.01+r=fwidch(p+.1); // .o1+=r; // r+=a1.p+=.99/.6e2;for(weel i;5;i+=1.)p+=rotate2D(.1,=5)+texture(b1,=+.5*r*p/i,.r)=r*a=.05+a*s*s+.05=sqrt(sqrt(o0.0,a0); // //Sparks // vec3 d=normalize(FC.xyz2--r.xyt),p.g.p.zf1.5;for(float l,i=1;i++<1e2;pr+=d*Length(vec2(max((1+=dot(rotate3D(t,cosCeil // (p+z-.7).5+.5)-.1),.1),w.x2)-.5).z-.01,.1-p*Length(fwidth(p)+.5)/r; // //Nebula // vec3 d=(FC.xy-.x=.r.xy)/r.y,p.d+=fsnoise(d.xz+x5+.2;for(o,p;-t/1.0;.w+=1e2;p+=d+=mod(o.wm,.5).0=max(snoise3D(pxs/1e2)/1.- // s,0.)*2e1/2e1;omo; // //Flash Sphere // vec3 d=(FC.xy-.xz=.r.xy)/r.y,p.g.d+=fsnoise(d.xz+x5),a=vec3(1,3,9);for(p.w+=1e1;p+.mod(w=abs((((s-.x=snoise3D(ceil(p*rotate3D // (p+z+.7).5+.3)+.3=fsnoise3D(q+.2));p+=d.2,)vecul(1,3,2,.3)); // //Sliding cubes // vec2 p.rfc(float l=0;1e3;p=(FC.xy=.r+.2/.o=max(0,mod(ceil(p*cos(round(p).yx)+PI)+.5)+=(sin(+p+2t))/PI+.1))int // (2)/2e2);.1/.1; // //Fractal (kitchen test) // vec2 p=(FC.xy-=r.y,a=abs(p).r=max(a, p.xy); // r+=.2*texture(b,-r*p.xy,r,.mod(.2+1e2).3/2*Length(p+.1e4),8)+.5*p/.dot(p,a/p),texture(b,"-p=r.y+.5).a.; // //Vapowave City // r+=FC.xy*2.0+(p.xy=Ground(FC.xy-=r.xy)).x;.z=.a,b,for(int i=1;i<2;++i)p+=abs(min(max(Length(max(abs(mod(p-2.,8.)-1.,0.))-.5-.2-tanh(sin(p.y/.sin // (p.x)*.2+.FC.xy-=r.y-.5*2e0-.-.5);r.f+=vecul(1,1,2,.1,2.5,.1);p+=.5a+.x=.5; // //CVY // r+=min(.1e-4)length(f=CSn)*rotate2D(.2)-.5+min(.sin(snoise2D(rotate2D(a)-p+.6f)/3e1).hf.+x/.y/.3e1)+.5) // r+=.FC.xy-.5*.5*2e0=.xy/8e1,p.f,vecul(1,1,1,1),(1,2,.1,3.);p+=.5a+.x=.5; // void mainImage(out vec1 o, vec2 u) // { // #define t (r=time+channel[0].r*mat2(cos(1*time+1=vecul(0, 11, 33, 0))) // #define l(a1)=length(mod(FC+=s*cos(a+vec2(20,1.1)))/8-r,.f)+.5)+.t // vec2 r=iResolution.xy,c=r1-r,s=.5-vec.y;.w,.f; // o = vecul(L(0,1,1),(1,2,.1),.8*s.x); // }