CherryShader

A deterministic WebGL background orchestrator and procedural fragment shader generator.

CherryShader provides a zero-config, GUI-driven environment for generating fluid 3D noise gradients. Built natively on @react-three/fiber, it abstracts away the boilerplate of uniform hydration, outputting hyper-optimized React components for production environments.

Architecture Overview

• Headless State Synchronization: Shader uniforms are decoupled from the DOM render cycle to prevent layout trashing, ensuring 60fps frame pacing.
• Dynamic AST Compilation: Generates raw .glsl assets on the fly via AST-like parsing of user scalar inputs.
• Zero-Cost Injection: The exported pipeline isolates the <canvas> context, maintaining strict main-thread availability.

Initialization

npm install
npm run dev