React Advanced Tunnel Shaders

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface AdvancedTunnelShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  tunnelRadius?: number;  glowIntensity?: number;  bumpStrength?: number;  colorVariation?: number;}const fragmentShader = `#define PI 3.14159265vec2 path(float z){    return vec2(.5*sin(z * u_speed), .5*sin(z*.7 * u_speed));}float map(vec3 p) {    float d = -length(p.xy - path(p.z)) + u_tunnelRadius + .3 * sin(p.z*.4);    return d;}vec3 normal(vec3 p){    float d = map(p);    vec2 e = vec2(0.01, 0.0);    vec3 n = d - vec3(        map(p - e.xyy),        map(p - e.yxy),        map(p - e.yyx)    );    return normalize(n);}float sMax(float a, float b, float k) {    return log(exp(k*a) + exp(k*b)) / k;}float bumpFunction(vec3 p) {    vec2 c = path(p.z);    float id = floor(p.z*4.-.25);    float h = .5 + .5*sin(atan(p.y - c.y, p.x - c.x) * 20. + 1.5 * (2.*mod(id, 2.)-1.) + iTime * 5. * u_speed);    h = sMax(h, .5 + .5*sin(p.z *8.*PI), 16.);    h *= h;    h *= h*h;    return 1.-h;}vec3 bumpNormal(vec3 p, vec3 n, float bumpFactor) {    vec3 e = vec3(0.01, 0.0, 0.0);    float f  = bumpFunction(p);    float fx = bumpFunction(p - e.xyy);    float fy = bumpFunction(p - e.yxy);    float fz = bumpFunction(p - e.yyx);    float fx2 = bumpFunction(p + e.xyy);    float fy2 = bumpFunction(p + e.yxy);    float fz2 = bumpFunction(p + e.yyx);    vec3 grad = (vec3(fx - fx2, fy - fy2, fz - fz2)) / (e.x * 2.0);    grad -= n * dot(n, grad);    return normalize(n + grad * bumpFactor);}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 uv = (fragCoord*2. - iResolution.xy)/iResolution.y;    float vel = iTime * 1.5 * u_speed;    vec3 ro = vec3(path(vel - 1.), vel - 1.);    vec3 ta = vec3(path(vel), vel);    vec3 fwd = normalize(ta - ro);    vec3 up = vec3(0, 1., 0);    vec3 right = cross(fwd, up);    up = cross(right, fwd);    float fl = 1.2;    vec3 rd = normalize(fwd + fl * (uv.x*right + uv.y*up));    float glow = 0.0;    vec3 glowCol = vec3(9., 7., 4.) * u_glowIntensity;    float t = 0.0;    vec3 col = vec3(0.0);    for (int i=0; i<125; i++){        vec3 p = ro + t*rd;        float d = map(p);        glow += exp(-d * 8.) * .005;        if (d<.01){            vec3 n = normal(p);            vec3 lightDir = n;            n = bumpNormal(p, n, u_bumpStrength);            vec2 c = path(p.z);            vec2 id = vec2(floor(p.z*4.-.25), atan(p.y-c.y, p.x-c.x));            vec3 tileCol = vec3(.7);            tileCol += .4*vec3(sin(id.x), cos(id.x), 0) * u_colorVariation;            tileCol += .3*sin(id.x*.5 + id.y*6. - iTime*4. * u_speed) * u_colorVariation;            vec3 tileGray  = vec3(.5);            float height = bumpFunction(p);            vec3 baseCol = mix(tileGray, tileCol, height);            float diffuseL = max(dot(n, lightDir), 0.);            col += diffuseL * baseCol;            vec3 h = normalize(lightDir - rd);            float specL = pow(max(dot(n, h), 0.), 64.);            col += specL * .3;            // Simple reflection without texture            vec3 r = reflect(rd, n);            vec3 reflCol = vec3(0.2, 0.3, 0.5) + 0.3 * vec3(sin(r.x), cos(r.y), sin(r.z));            col = mix(col, reflCol, .3);            break;        }        t+=d;    }    col += glowCol*glow;    col = pow(col, vec3(2.2));    fragColor = vec4(col,1.0);}`;export const AdvancedTunnelShaders = forwardRef<HTMLDivElement, AdvancedTunnelShadersProps>(({  className,  speed = 1.0,  tunnelRadius = 1.2,  glowIntensity = 1.0,  bumpStrength = 0.02,  colorVariation = 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_glowIntensity: { type: '1f', value: glowIntensity },          u_bumpStrength: { type: '1f', value: bumpStrength },          u_colorVariation: { type: '1f', value: colorVariation },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});AdvancedTunnelShaders.displayName = "AdvancedTunnelShaders";