React Oldschool Tube Shaders

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface OldschoolTubeShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  rotationSpeed?: number;  colorScheme?: number;  bumpIntensity?: number;}const fragmentShader = `#define COLOR 0mat2 rot( float th ){ vec2 a = sin(vec2(1.5707963, 0) + th); return mat2(a, -a.y, a.x); }float n3D(vec3 p){    const vec3 s = vec3(7, 157, 113);    vec3 ip = floor(p); p -= ip;     vec4 h = vec4(0., s.yz, s.y + s.z) + dot(ip, s);    p = p*p*(3. - 2.*p);    h = mix(fract(sin(h)*43758.5453), fract(sin(h + s.x)*43758.5453), p.x);    h.xy = mix(h.xz, h.yw, p.y);    return mix(h.x, h.y, p.z);}vec2 hash22(vec2 p, float w) {     p = mod(p, w);    float n = sin(dot(p, vec2(41, 289)));    return fract(vec2(262144, 32768)*n)*.9 + .1; }float vx;float Voronoi(in vec2 p, float w){    vec2 g = floor(p), o; p -= g;        vec3 d = vec3(1.4142);        for(int y=-1; y<=1; y++){        for(int x=-1; x<=1; x++){            o = vec2(x, y);            o += hash22(g + o, w) - p;                        d.z = length(o);                        d.y = max(d.x, min(d.y, d.z));            d.x = min(d.x, d.z);         }    }                          d/=1.4142;        vx = d.x;        d = smoothstep(0., 1., d);        return max(d.y/1.333 - d.x, 0.)*1.333;}float objID;float bumpFunction(in vec3 p){    vec2 uv = vec2(atan(p.y, p.x)/6.2831853, p.z/8.);        float c = Voronoi(uv*16., 16.);    objID = 0.;    if(c<.15) { c = abs(max(c, 0.01) - .3), objID = 1.; }        return c;}vec3 doBumpMap(in vec3 p, in vec3 n, float bumpfactor, inout float edge){    vec2 e = vec2(2.5/iResolution.y, 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.;       edge = abs(fx + fy + fz + fx2 + fy2 + fz2 - 6.*f);    edge = smoothstep(0., 1., edge/e.x);              grad -= n*dot(n, grad);                                    return normalize( n + grad*bumpfactor );}float bumpFunction2(in vec3 p){    float c = n3D(p*16.);        c = fract(c*4.);        return min(c, c*(1. - c)*4.);}vec3 doBumpMap2(in vec3 p, in vec3 n, float bumpfactor){    vec2 e = vec2(2.5/iResolution.y, 0);    float f = bumpFunction2(p);         float fx = bumpFunction2(p - e.xyy);    float fy = bumpFunction2(p - e.yxy);    float fz = bumpFunction2(p - e.yyx);        vec3 grad = (vec3(fx, fy, fz )-f)/e.x;               grad -= n*dot(n, grad);                                    return normalize( n + grad*bumpfactor );} void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec3 rd = normalize(vec3(fragCoord - iResolution.xy*0.5, iResolution.y));        rd.xy = rot(iTime*0.25*u_rotationSpeed)*rd.xy;    rd.xz = rot(iTime*0.125*u_rotationSpeed)*rd.xz;        vec3 ro = vec3(0.0, 0.0, iTime*u_speed);        vec3 col = vec3(0);    const float rad = 1.;    float sDist = rad/max( length(rd.xy), 0.001 );    vec3 sp = ro + rd*sDist;    vec3 sn = normalize(vec3(-sp.xy, 0.));    float edge;    sn = doBumpMap( sp, sn, .75*u_bumpIntensity, edge);        float svObjID = objID;        if(svObjID>.5) sn = doBumpMap2( sp, sn, .003*u_bumpIntensity);        vec3 tex = vec3(1)*n3D(fract(sp)*192.);    vec3 objCol = smoothstep(.1, .9, tex)*.8 + 1.;        if(svObjID<.5) objCol *= vec3(.45, .425, .5);    else objCol *= vec3(.68, .64, .75);        if (u_colorScheme > 0.5 && u_colorScheme < 1.5) {        if(svObjID>.5) objCol *= vec3(1.4, .8, .3);        else objCol *= vec3(.5, 2., 5).zyx;    } else if (u_colorScheme > 1.5) {        if(svObjID>.5) objCol *= vec3(1, .8, .2)*1.35;        else objCol *= vec3(.1, 2.5, 5);    }    vec3 lp = ro + vec3(0, .5, 0);    vec3 ld = lp - sp;    float dist = max(length(ld), 0.001);    ld /= dist;    float atten = 1.5/(1. + dist*.05 + dist*dist*0.075);        atten *= bumpFunction(sp)*.9 + .1;    float diff = max(dot(ld, sn), 0.);    diff = pow(diff, 8.)*0.66 + pow(diff, 16.)*0.34;        float spec = pow(max(dot(reflect(ld, sn), rd), 0.), 8.);        vec3 ref = sp + refract(rd, sn, 1./1.6);    vec2 tuv = vec2(atan(ref.y, ref.x)/6.2832, ref.z/8.);    float c2 = Voronoi(tuv*4. - vec2(1, .5)*iTime*u_speed, 4.);    c2 = smoothstep(0.8, 1., 1.-vx);          vec3 elec = (objCol*.7 + .3)*pow(min(vec3(1.5, 1, 1)*c2, 1.), vec3(1,  3, 8));             if (svObjID<.5) objCol += elec*8.;    else objCol += elec*2.;    col += (objCol*(diff*vec3(1, .97, .92)*2. + 0.25) + vec3(1, .6, .2)*spec*2.)*atten;    ref = reflect(rd, sn);    float rc = n3D(ref*2.);    col += col*smoothstep(.3, 1., rc)*4.*atten;        col *= 1. - edge*.7;        col = mix(col, vec3(0), 1. - exp(-.002*sDist*sDist));        fragColor = vec4(sqrt(clamp(col, 0., 1.)), 1.);}`;export const OldschoolTubeShaders = forwardRef<HTMLDivElement, OldschoolTubeShadersProps>(  (    {      className,      speed = 1.0,      rotationSpeed = 1.0,      colorScheme = 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_rotationSpeed: { type: '1f', value: rotationSpeed },            u_colorScheme: { type: '1f', value: colorScheme },            u_bumpIntensity: { type: '1f', value: bumpIntensity },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });OldschoolTubeShaders.displayName = "OldschoolTubeShaders";export default OldschoolTubeShaders;