React Mobius Sierpinski Shaders

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface MobiusSierpinskiShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  transformSpeed?: number;  fractalDepth?: number;  colorIntensity?: number;}const fragmentShader = `#extension GL_OES_standard_derivatives : enable// Standard Mobius transform: f(z) = (az + b)/(cz + d). Slightly obfuscated.vec2 Mobius(vec2 p, vec2 z1, vec2 z2) {    z1 = p - z1;    p -= z2;    return vec2(dot(z1, p), z1.y*p.x - z1.x*p.y)/dot(p, p);}// Standard spiral zoom.vec2 spiralZoom(vec2 p, vec2 offs, float n, float spiral, float zoom, vec2 phase) {    p -= offs;    float a = atan(p.y, p.x)/6.283 - iTime * 0.25 * u_speed;    float d = log(length(p));    return vec2(a*n + d*spiral, a - d*zoom) + phase;}// Mobius, spiral zoomed, Sierpinski Carpet pattern.vec3 pattern(vec2 uv) {    // A subtlely spot-lit background. Performed on uv prior to tranformation,    float bg = max(1. - length(uv), 0.) * 0.025;    // Transform the screen coordinates. Comment out the following two lines and    // you'll be left with a standard Sierpinski pattern.    uv = Mobius(uv, vec2(-0.75, cos(iTime * u_transformSpeed) * 0.25), vec2(0.5, sin(iTime * u_transformSpeed) * 0.25));    uv = spiralZoom(uv, vec2(-0.5), 5., 3.14159 * 0.2, 0.5, vec2(-1, 1) * iTime * 0.25 * u_speed);    vec3 col = vec3(bg); // Set the canvas to the background.    // Sierpinski Carpet - Essentially, space is divided into 3 each iteration, and a    // shape of some kind is rendered. In this case, it's a smooth rectangle    // with a bit of shading around the side.    //    // There's some extra steps in there (the "l" and "mod" bits) due to the    // shading and coloring, but it's pretty simple.    //    // By the way, there are other combinations you could use.    //    for(int i = 0; i < 8; i++) {        if(float(i) >= u_fractalDepth) break;        uv = fract(uv) * 3.; // Subdividing space.        vec2 w = 0.5 - abs(uv - 1.5); // Prepare to make a square. Other shapes are also possible.        float l = sqrt(max(16.0*w.x*w.y*(1.0-w.x)*(1.0-w.y), 0.)); // Vignetting (edge shading).        #ifdef GL_OES_standard_derivatives        w = smoothstep(0., length(fwidth(w)), w); // Smooth edge stepping.        #else        w = smoothstep(0., 0.01, w); // Fallback for devices without derivatives        #endif        vec3 lCol = vec3(1) * w.x * w.y * l * u_colorIntensity; // White shaded square with smooth edges.        if(mod(float(i), 3.) < 0.5) lCol *= vec3(0.1, 0.8, 1); // Color layers zero and three blue.        col = max(col, lCol); // Taking the max of the four layers.    }    return col;}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    // Screen coordinates.    vec2 uv = (fragCoord - iResolution.xy * 0.5) / iResolution.y;    // Transformed Sierpinski pattern.    vec3 col = pattern(uv);    // Rough gamma correction.    fragColor = vec4(sqrt(col), 1);}`;export const MobiusSierpinskiShaders = forwardRef<HTMLDivElement, MobiusSierpinskiShadersProps>((  {    className,    speed = 1.0,    transformSpeed = 1.0,    fractalDepth = 4.0,    colorIntensity = 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_transformSpeed: { type: '1f', value: transformSpeed },          u_fractalDepth: { type: '1f', value: fractalDepth },          u_colorIntensity: { type: '1f', value: colorIntensity },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});MobiusSierpinskiShaders.displayName = "MobiusSierpinskiShaders";export default MobiusSierpinskiShaders;