React Cellular Tiled Tunnel

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface CellularTiledTunnelShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  tunnelRadius?: number;  cellScale?: number;  bumpIntensity?: number;}const fragmentShader = `#define PI 3.14159265358979#define FAR 50.float getGrey(vec3 p){ return p.x*0.299 + p.y*0.587 + p.z*0.114; }vec3 hash33(vec3 p){     float n = sin(dot(p, vec3(7, 157, 113)));        return fract(vec3(2097152, 262144, 32768)*n); }mat2 rot2(float a){    float c = cos(a); float s = sin(a);    return mat2(c, s, -s, c);}vec3 tex3D(in vec3 p, in vec3 n ){    n = max((abs(n) - 0.2)*7., 0.001);    n /= (n.x + n.y + n.z );          vec3 tx = vec3(hash33(floor(p*16.0)).x);        return tx*tx;}float drawSphere(in vec3 p){    p = fract(p)-.5;        return dot(p, p);}float cellTile(in vec3 p){    vec4 v, d;     d.x = drawSphere(p - vec3(.81, .62, .53));    p.xy = vec2(p.y-p.x, p.y + p.x)*.7071;    d.y = drawSphere(p - vec3(.39, .2, .11));    p.yz = vec2(p.z-p.y, p.z + p.y)*.7071;    d.z = drawSphere(p - vec3(.62, .24, .06));    p.xz = vec2(p.z-p.x, p.z + p.x)*.7071;    d.w = drawSphere(p - vec3(.2, .82, .64));    v.xy = min(d.xz, d.yw), v.z = min(max(d.x, d.y), max(d.z, d.w)), v.w = max(v.x, v.y);        d.x =  min(v.z, v.w) - min(v.x, v.y);            return (d.x*2.66);}int cellTileID(in vec3 p){    int cellID = 0;        vec3 d = (vec3(.75));        d.z = drawSphere(p - vec3(.81, .62, .53)); if(d.z<d.x) cellID = 1;    d.y = max(d.x, min(d.y, d.z)); d.x = min(d.x, d.z);        p.xy = vec2(p.y-p.x, p.y + p.x)*.7071;    d.z = drawSphere(p - vec3(.39, .2, .11)); if(d.z<d.x) cellID = 2;    d.y = max(d.x, min(d.y, d.z)); d.x = min(d.x, d.z);        p.yz = vec2(p.z-p.y, p.z + p.y)*.7071;    d.z = drawSphere(p - vec3(.62, .24, .06)); if(d.z<d.x) cellID = 3;    d.y = max(d.x, min(d.y, d.z)); d.x = min(d.x, d.z);       p.xz = vec2(p.z-p.x, p.z + p.x)*.7071;     d.z = drawSphere(p - vec3(.2, .82, .64)); if(d.z<d.x) cellID = 4;    d.y = max(d.x, min(d.y, d.z)); d.x = min(d.x, d.z);        return cellID;}vec2 path(in float z){ float s = sin(z/24.)*cos(z/16.); return vec2(s*9., 0); }float map(vec3 p){    float sf = cellTile(p/(2.5*u_cellScale));        p.xy -= path(p.z);      return 1.- length(p.xy*vec2(0.5, 0.7071))*u_tunnelRadius + (0.5-sf)*.35;}float trace(in vec3 ro, in vec3 rd){    float t = 0.0, h;    for(int i = 0; i < 96; i++){        h = map(ro+rd*t);        if(abs(h)<0.002*(t*.125 + 1.) || t>FAR) break;        t += h*.8;    }    return min(t, FAR);}vec3 doBumpMap(in vec3 p, in vec3 n, float bf){    const vec2 e = vec2(0.001, 0);        mat3 m = mat3( tex3D(p - e.xyy, n), tex3D(p - e.yxy, n), tex3D(p - e.yyx, n));        vec3 g = vec3(0.299, 0.587, 0.114)*m;    g = (g - dot(tex3D(p, n), vec3(0.299, 0.587, 0.114)) )/e.x; g -= n*dot(n, g);                          return normalize( n + g*bf );}vec3 calcNormal(in vec3 p){    vec2 e = vec2(0.0025, -0.0025);     return normalize(e.xyy * map(p + e.xyy) + e.yyx * map(p + e.yyx) + e.yxy * map(p + e.yxy) + e.xxx * map(p + e.xxx));}float calculateAO( in vec3 p, in vec3 n ){    float ao = 0.0, l;    const float maxDist = 2.;    const float nbIte = 6.0;    for( float i=1.; i< nbIte+.5; i++ ){        l = (i*.75 + fract(cos(i)*45758.5453)*.25)/nbIte*maxDist;                ao += (l - map( p + n*l ))/(1.+ l);    }        return clamp(1.- ao/nbIte, 0., 1.);}float curve(in vec3 p, in float w){    vec2 e = vec2(-1., 1.)*w;        float t1 = map(p + e.yxx), t2 = map(p + e.xxy);    float t3 = map(p + e.xyx), t4 = map(p + e.yyy);        return 0.125/(w*w) *(t1 + t2 + t3 + t4 - 4.*map(p));}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 uv = (fragCoord - iResolution.xy*0.5)/iResolution.y;        vec3 lookAt = vec3(0.0, 0.0, iTime*6.*u_speed);    vec3 camPos = lookAt + vec3(0.0, 0.1, -0.5);     vec3 light_pos = camPos + vec3(0.0, 0.125, 4.125);    vec3 light_pos2 = camPos + vec3(0.0, 0.0, 8.0);    lookAt.xy += path(lookAt.z);    camPos.xy += path(camPos.z);    light_pos.xy += path(light_pos.z);    light_pos2.xy += path(light_pos2.z);    float FOV = PI/3.;    vec3 forward = normalize(lookAt-camPos);    vec3 right = normalize(vec3(forward.z, 0., -forward.x ));     vec3 up = cross(forward, right);    vec3 rd = normalize(forward + FOV*uv.x*right + FOV*uv.y*up);        rd.xy = rot2( path(lookAt.z).x/32. )*rd.xy;            float t = trace(camPos, rd);        vec3 sceneCol = vec3(0.);        if(t < FAR){        vec3 sp = t * rd+camPos;        vec3 sn = calcNormal(sp);                const float tSize0 = 1./1.;                 sn = doBumpMap(sp*tSize0, sn, 0.02*u_bumpIntensity);                float ao = calculateAO(sp, sn);                vec3 ld = light_pos-sp;        vec3 ld2 = light_pos2-sp;        float lDdist = max(length(ld), 0.001);        float lDdist2 = max(length(ld2), 0.001);                ld /= lDdist;        ld2 /= lDdist2;                float atten = 1./(1. + lDdist*.125 + lDdist*lDdist*.05);        float atten2 =  1./(1. + lDdist2*.125 + lDdist2*lDdist2*.05);                float ambience = 0.75;                float diff = max( dot(sn, ld), 0.0);        float diff2 = max( dot(sn, ld2), 0.0);                float spec = pow(max( dot( reflect(-ld, sn), -rd ), 0.0 ), 32.);        float spec2 = pow(max( dot( reflect(-ld2, sn), -rd ), 0.0 ), 32.);                float crv = clamp(curve(sp, 0.125)*0.5+0.5, .0, 1.);                float fre = pow( clamp(dot(sn, rd) + 1., .0, 1.), 1.);         vec3 texCol = tex3D(sp*tSize0, sn);        texCol = min(texCol*1.5, 1.);                int id = cellTileID(sp/(2.5*u_cellScale));        if(id == 4) texCol = texCol*vec3(.8, .6, .4);         if(id == 3) texCol = texCol*.5 + texCol*vec3(.5, .35, .2);                 float shading =  crv*0.75+0.25;                 sceneCol = (texCol*(diff + ambience + spec) + spec*vec3(.7, .9, 1))*atten;        sceneCol += (texCol*(diff2 + ambience + spec2) + spec2*vec3(.7, .9, 1))*atten2;                sceneCol *= shading*ao;                sceneCol *= clamp(abs(curve(sp, 0.035)), .0, 1.)*.5 + 1.;        sceneCol *= 1. - smoothstep(0., 4., abs(curve(sp, 0.0125)))*vec3(.82, .85, .88);    }        fragColor = vec4(sqrt(clamp(sceneCol, 0., 1.)), 1.0);}`;export const CellularTiledTunnelShaders = forwardRef<HTMLDivElement, CellularTiledTunnelShadersProps>(  (    {      className,      speed = 1.0,      tunnelRadius = 1.0,      cellScale = 1.0,      bumpIntensity = 1.0,      ...props    },    ref  ) => {    return (      <div        ref={ref}        className={cn('w-full h-full', className)}        {...props}      >        <Shader          fs={fragmentShader}          uniforms={{            u_speed: { type: '1f', value: speed },            u_tunnelRadius: { type: '1f', value: tunnelRadius },            u_cellScale: { type: '1f', value: cellScale },            u_bumpIntensity: { type: '1f', value: bumpIntensity },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });CellularTiledTunnelShaders.displayName = "CellularTiledTunnelShaders";export default CellularTiledTunnelShaders;