@firecms/neat 0.8.0 → 0.9.0

package/src/NeatGradient.ts

@@ -1,5 +1,5 @@
 import { buildColorFunctions, buildNoise, buildVertUniforms, buildFragUniforms, fragmentShaderSource, vertexShaderSource } from "./shaders";
-import { generatePlaneGeometry, OrthographicCamera, updateCamera, Matrix4 } from "./math";
+import { generatePlaneGeometry, generateSphereGeometry, generateTorusGeometry, generateCylinderGeometry, generateRibbonGeometry, OrthographicCamera, updateCamera, Matrix4 } from "./math";
 
 console.info(
     "%c🌈 Neat Gradients%c\n\nLicensed under MIT + The Commons Clause.\nFree for personal and commercial use.\nSelling this software or its derivatives is strictly prohibited.\nhttps://neat.firecms.co",
@@ -61,6 +61,7 @@ export class NeatGradient implements NeatController {
     private _grainSpeed: number = -1;
 
     private _colorBlending: number = -1;
+    private _resolution: number = 1;
 
     private _colors: NeatColor[] = [];
     private _wireframe: boolean = false;
@@ -87,6 +88,7 @@ export class NeatGradient implements NeatController {
     private _textureColorBlending: number = 0.01;
     private _textureSeed: number = 333;
     private _textureEase: number = 0.5;
+    private _transparentTextureVoid: boolean = false;
 
     // New effects
     private _domainWarpEnabled: boolean = false;
@@ -109,6 +111,34 @@ export class NeatGradient implements NeatController {
     private _bloomIntensity: number = 0;
     private _bloomThreshold: number = 0.7;
     private _chromaticAberration: number = 0;
+    private _silhouetteFade: number = 0.25;
+    private _cylinderFade: number = 0.08;
+    private _ribbonFade: number = 0.05;
+
+    // 3D Shapes config
+    private _shapeType: 'plane' | 'sphere' | 'torus' | 'cylinder' | 'ribbon' = 'plane';
+    private _shapeRotationX: number = 0;
+    private _shapeRotationY: number = 0;
+    private _shapeRotationZ: number = 0;
+    private _shapeAutoRotateSpeedX: number = 0;
+    private _shapeAutoRotateSpeedY: number = 0;
+    private _sphereRadius: number = 15;
+    private _torusRadius: number = 15;
+    private _torusTube: number = 5;
+    private _cylinderRadius: number = 10;
+    private _cylinderHeight: number = 40;
+    private _planeBend: number = 0;
+    private _planeTwist: number = 0;
+
+    // Camera settings
+    private _cameraLock: boolean = false;
+    private _cameraX: number = 0;
+    private _cameraY: number = 0;
+    private _cameraZ: number = 0;
+    private _cameraRotationX: number = 0;
+    private _cameraRotationY: number = 0;
+    private _cameraRotationZ: number = 0;
+    private _cameraZoom: number = 1.0;
 
     private _proceduralTexture: WebGLTexture | null = null;
     private _proceduralBackgroundColor: string = "#000000";
@@ -130,6 +160,12 @@ export class NeatGradient implements NeatController {
     private _yOffsetColorMultiplier: number = 0.004;
     private _yOffsetFlowMultiplier: number = 0.004;
 
+    // Cached offscreen canvases for procedural texture generation
+    private _sourceCanvas: HTMLCanvasElement | null = null;
+    private _sourceCtx: CanvasRenderingContext2D | null = null;
+    private _maskedCanvas: HTMLCanvasElement | null = null;
+    private _maskedCtx: CanvasRenderingContext2D | null = null;
+
     // Performance optimizations
     private _resizeTimeoutId: number | null = null;
     private _textureNeedsUpdate: boolean = false;
@@ -184,6 +220,7 @@ export class NeatGradient implements NeatController {
             textureSeed = 333,
             textureEase = 0.5,
             proceduralBackgroundColor = "#000000",
+            transparentTextureVoid = false,
             textureShapeTriangles = 20,
             textureShapeCircles = 15,
             textureShapeBars = 15,
@@ -192,7 +229,7 @@ export class NeatGradient implements NeatController {
             domainWarpEnabled = false,
             domainWarpIntensity = 0.5,
             domainWarpScale = 1.0,
-            vignetteIntensity = 0.5,
+            vignetteIntensity = 0.0,
             vignetteRadius = 0.8,
             fresnelEnabled = false,
             fresnelPower = 2.0,
@@ -204,6 +241,34 @@ export class NeatGradient implements NeatController {
             bloomIntensity = 0.0,
             bloomThreshold = 0.7,
             chromaticAberration = 0.0,
+            silhouetteFade = 0.25,
+            cylinderFade = 0.08,
+            ribbonFade = 0.05,
+
+            // Camera configuration
+            cameraLock = false,
+            cameraX = 0,
+            cameraY = 0,
+            cameraZ = 0,
+            cameraRotationX = 0,
+            cameraRotationY = 0,
+            cameraRotationZ = 0,
+            cameraZoom = 1.0,
+
+            // 3D shapes default
+            shapeType = 'plane',
+            shapeRotationX = 0,
+            shapeRotationY = 0,
+            shapeRotationZ = 0,
+            shapeAutoRotateSpeedX = 0,
+            shapeAutoRotateSpeedY = 0,
+            sphereRadius = 15,
+            torusRadius = 15,
+            torusTube = 5,
+            cylinderRadius = 10,
+            cylinderHeight = 40,
+            planeBend = 0,
+            planeTwist = 0,
         } = config;
 
 
@@ -219,6 +284,7 @@ export class NeatGradient implements NeatController {
         this.waveFrequencyY = waveFrequencyY;
         this.waveAmplitude = waveAmplitude;
         this.colorBlending = colorBlending;
+        this._resolution = resolution;
         this.grainScale = grainScale;
         this.grainIntensity = grainIntensity;
         this.grainSparsity = grainSparsity;
@@ -255,6 +321,7 @@ export class NeatGradient implements NeatController {
         this.textureSeed = textureSeed;
         this.textureEase = textureEase;
         this._proceduralBackgroundColor = proceduralBackgroundColor;
+        this.transparentTextureVoid = transparentTextureVoid;
 
         this._textureShapeTriangles = textureShapeTriangles;
         this._textureShapeCircles = textureShapeCircles;
@@ -276,6 +343,32 @@ export class NeatGradient implements NeatController {
         this.bloomIntensity = bloomIntensity;
         this.bloomThreshold = bloomThreshold;
         this.chromaticAberration = chromaticAberration;
+        this.silhouetteFade = silhouetteFade;
+        this.cylinderFade = cylinderFade;
+        this.ribbonFade = ribbonFade;
+
+        this._cameraLock = cameraLock;
+        this._cameraX = cameraX;
+        this._cameraY = cameraY;
+        this._cameraZ = cameraZ;
+        this._cameraRotationX = cameraRotationX;
+        this._cameraRotationY = cameraRotationY;
+        this._cameraRotationZ = cameraRotationZ;
+        this._cameraZoom = cameraZoom;
+
+        this._shapeType = shapeType;
+        this._shapeRotationX = shapeRotationX;
+        this._shapeRotationY = shapeRotationY;
+        this._shapeRotationZ = shapeRotationZ;
+        this._shapeAutoRotateSpeedX = shapeAutoRotateSpeedX;
+        this._shapeAutoRotateSpeedY = shapeAutoRotateSpeedY;
+        this._sphereRadius = sphereRadius;
+        this._torusRadius = torusRadius;
+        this._torusTube = torusTube;
+        this._cylinderRadius = cylinderRadius;
+        this._cylinderHeight = cylinderHeight;
+        this._planeBend = planeBend;
+        this._planeTwist = planeTwist;
 
         this.glState = this._initScene(resolution);
 
@@ -306,6 +399,45 @@ export class NeatGradient implements NeatController {
 
                 gl.uniform1f(locations.uniforms['u_time'], tick);
 
+                // Update modelViewMatrix in every frame to support dynamic rotation and auto-rotation
+                const camera = this.glState.camera;
+                const modelViewMatrix = new Matrix4();
+                
+                // 1. Camera translation (default camera distance + displacement)
+                modelViewMatrix.translate(
+                    -camera.position[0] - this._cameraX,
+                    -camera.position[1] - this._cameraY,
+                    -camera.position[2] - this._cameraZ
+                );
+                modelViewMatrix.translate(0, 0, -1);
+                
+                // 2. Camera rotation (revolving around target)
+                modelViewMatrix.rotateX(-this._cameraRotationX);
+                modelViewMatrix.rotateY(-this._cameraRotationY);
+                modelViewMatrix.rotateZ(-this._cameraRotationZ);
+                
+                let rx = this._shapeRotationX;
+                let ry = this._shapeRotationY;
+                let rz = this._shapeRotationZ;
+                
+                if (this._shapeAutoRotateSpeedX !== 0) {
+                    rx += tick * this._shapeAutoRotateSpeedX * 0.1;
+                }
+                if (this._shapeAutoRotateSpeedY !== 0) {
+                    ry += tick * this._shapeAutoRotateSpeedY * 0.1;
+                }
+                
+                if (this._shapeType === 'plane' || this._shapeType === 'ribbon') {
+                    modelViewMatrix.rotateX(rx - Math.PI / 3.5);
+                } else {
+                    modelViewMatrix.rotateX(rx);
+                }
+                modelViewMatrix.rotateY(ry);
+                modelViewMatrix.rotateZ(rz);
+                
+                const mvLoc = locations.uniforms["modelViewMatrix"];
+                if (mvLoc) gl.uniformMatrix4fv(mvLoc, false, modelViewMatrix.elements);
+
                 // Only upload static uniforms when they've been modified
                 if (this._uniformsDirty) {
                     gl.uniform2f(locations.uniforms['u_resolution'], this._ref.clientWidth, this._ref.clientHeight);
@@ -333,8 +465,16 @@ export class NeatGradient implements NeatController {
                     gl.uniform1f(locations.uniforms['u_flow_ease'], this._flowEase);
                     gl.uniform1f(locations.uniforms['u_flow_enabled'], this._flowEnabled ? 1.0 : 0.0);
 
+                    let shapeTypeVal = 0.0;
+                    if (this._shapeType === 'sphere') shapeTypeVal = 1.0;
+                    else if (this._shapeType === 'torus') shapeTypeVal = 2.0;
+                    else if (this._shapeType === 'cylinder') shapeTypeVal = 3.0;
+                    else if (this._shapeType === 'ribbon') shapeTypeVal = 4.0;
+                    gl.uniform1f(locations.uniforms['u_shape_type'], shapeTypeVal);
+
                     gl.uniform1f(locations.uniforms['u_enable_procedural_texture'], this._enableProceduralTexture ? 1.0 : 0.0);
                     gl.uniform1f(locations.uniforms['u_texture_ease'], this._textureEase);
+                    gl.uniform1f(locations.uniforms['u_transparent_texture_void'], this._transparentTextureVoid ? 1.0 : 0.0);
 
                     gl.uniform1f(locations.uniforms['u_domain_warp_enabled'], this._domainWarpEnabled ? 1.0 : 0.0);
                     gl.uniform1f(locations.uniforms['u_domain_warp_intensity'], this._domainWarpIntensity);
@@ -355,6 +495,9 @@ export class NeatGradient implements NeatController {
                     gl.uniform1f(locations.uniforms['u_bloom_intensity'], this._bloomIntensity);
                     gl.uniform1f(locations.uniforms['u_bloom_threshold'], this._bloomThreshold);
                     gl.uniform1f(locations.uniforms['u_chromatic_aberration'], this._chromaticAberration);
+                    gl.uniform1f(locations.uniforms['u_silhouette_fade'], this._silhouetteFade);
+                    gl.uniform1f(locations.uniforms['u_cylinder_fade'], this._cylinderFade);
+                    gl.uniform1f(locations.uniforms['u_ribbon_fade'], this._ribbonFade);
 
                     this._uniformsDirty = false;
                 }
@@ -430,14 +573,14 @@ export class NeatGradient implements NeatController {
 
             gl.viewport(0, 0, width, height);
 
-            updateCamera(camera, width, height);
+            updateCamera(camera, width, height, PLANE_WIDTH, PLANE_HEIGHT, this._shapeType, this._cameraZoom);
 
 
 
             // Recompute projection matrix on resize
-            const projLoc = gl.getUniformLocation(this.glState.program, "projectionMatrix");
+            const projLoc = this.glState.locations.uniforms["projectionMatrix"];
             gl.useProgram(this.glState.program);
-            gl.uniformMatrix4fv(projLoc, false, camera.projectionMatrix.elements);
+            if (projLoc) gl.uniformMatrix4fv(projLoc, false, camera.projectionMatrix.elements);
         };
 
         // Debounce resize to prevent excessive operations
@@ -493,36 +636,226 @@ export class NeatGradient implements NeatController {
         downloadURI(dataURL, filename);
     }
 
+    /**
+     * Records the canvas animation as a video with a NEAT watermark overlay.
+     * @param options.durationMs  Recording duration in milliseconds (default 5000).
+     * @param options.filename    Output file name (default "neat.firecms.co").
+     * @param options.width       Output video width in pixels (default: current canvas width).
+     * @param options.height      Output video height in pixels (default: current canvas height).
+     * @param options.format      Preferred format: 'mp4' or 'webm' (default: best available).
+     * @param options.onProgress  Callback with progress 0-1.
+     * @param options.onComplete  Callback when recording finishes.
+     * @returns A stop function to end recording early.
+     */
+    recordVideo(options: {
+        durationMs?: number;
+        filename?: string;
+        width?: number;
+        height?: number;
+        format?: 'mp4' | 'webm';
+        onProgress?: (progress: number) => void;
+        onComplete?: () => void;
+    } = {}): () => void {
+        const {
+            durationMs = 5000,
+            filename = "neat.firecms.co",
+            format,
+            onProgress,
+            onComplete,
+        } = options;
+
+        const source = this._ref;
+        const width = options.width || source.width || source.clientWidth;
+        const height = options.height || source.height || source.clientHeight;
+
+        // Offscreen canvas that composites gradient + watermark each frame
+        const offscreen = document.createElement("canvas");
+        offscreen.width = width;
+        offscreen.height = height;
+        const ctx = offscreen.getContext("2d")!;
+
+        // Use captureStream(0) — only captures a frame when we explicitly
+        // call requestFrame() on the video track, so every composited frame
+        // is guaranteed to be captured.
+        const stream = offscreen.captureStream(0);
+        const videoTrack = stream.getVideoTracks()[0];
+
+        // Codec candidates ordered by preference
+        const mp4Candidates = [
+            "video/mp4;codecs=avc1",
+            "video/mp4;codecs=avc1,opus",
+            "video/mp4",
+        ];
+        const webmCandidates = [
+            "video/webm;codecs=vp9,opus",
+            "video/webm;codecs=vp9",
+            "video/webm;codecs=vp8,opus",
+            "video/webm",
+        ];
+
+        // Build candidate list based on preferred format
+        let candidates: string[];
+        if (format === 'mp4') candidates = [...mp4Candidates, ...webmCandidates];
+        else if (format === 'webm') candidates = [...webmCandidates, ...mp4Candidates];
+        else candidates = [...mp4Candidates, ...webmCandidates];
+
+        let mimeType = "video/webm";
+        for (const candidate of candidates) {
+            if (MediaRecorder.isTypeSupported(candidate)) {
+                mimeType = candidate;
+                break;
+            }
+        }
+
+        // Scale bitrate with pixel count: 8 Mbps baseline at 720p
+        const pixels = width * height;
+        const baseBitrate = 8_000_000;
+        const basePixels = 1280 * 720;
+        const videoBitsPerSecond = Math.round(baseBitrate * Math.max(1, pixels / basePixels));
+
+        const recorder = new MediaRecorder(stream, {
+            mimeType,
+            videoBitsPerSecond,
+        });
+
+        const chunks: Blob[] = [];
+        recorder.ondataavailable = (e) => {
+            if (e.data.size > 0) chunks.push(e.data);
+        };
+
+        let stopped = false;
+        let rafId: number;
+        const startTime = performance.now();
+        let lastProgressTime = 0;
+
+        // Composite loop: draw source canvas + watermark overlay on each frame
+        const drawFrame = () => {
+            if (stopped) return;
+
+            ctx.clearRect(0, 0, width, height);
+            ctx.drawImage(source, 0, 0, width, height);
+
+            // Watermark: "NEAT" in bottom-right corner
+            const fontSize = Math.max(14, Math.round(height * 0.025));
+            ctx.font = `bold ${fontSize}px "Sofia Sans", sans-serif`;
+            ctx.textAlign = "right";
+            ctx.textBaseline = "bottom";
+            ctx.shadowColor = "rgba(0,0,0,0.5)";
+            ctx.shadowBlur = 4;
+            ctx.shadowOffsetX = 1;
+            ctx.shadowOffsetY = 1;
+            ctx.fillStyle = "rgba(255,255,255,0.7)";
+            ctx.fillText("NEAT", width - fontSize * 0.8, height - fontSize * 0.5);
+            ctx.shadowColor = "transparent";
+            ctx.shadowBlur = 0;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+
+            // Signal the stream to capture this frame
+            // @ts-ignore – requestFrame exists on CanvasCaptureMediaStreamTrack
+            if (videoTrack.requestFrame) videoTrack.requestFrame();
+
+            // Throttle progress to ~4 updates/sec to avoid flooding React state
+            if (onProgress) {
+                const now = performance.now();
+                if (now - lastProgressTime > 250) {
+                    lastProgressTime = now;
+                    onProgress(Math.min(0.99, (now - startTime) / durationMs));
+                }
+            }
+
+            rafId = requestAnimationFrame(drawFrame);
+        };
+
+        recorder.onstop = () => {
+            stopped = true;
+            cancelAnimationFrame(rafId);
+
+            // Use the correct file extension for the actual format
+            const isMP4 = mimeType.startsWith("video/mp4");
+            const ext = isMP4 ? ".mp4" : ".webm";
+            const blobType = isMP4 ? "video/mp4" : "video/webm";
+            const finalFilename = filename + ext;
+
+            const blob = new Blob(chunks, { type: blobType });
+            const url = URL.createObjectURL(blob);
+            downloadURI(url, finalFilename);
+            setTimeout(() => URL.revokeObjectURL(url), 30000);
+
+            onProgress?.(1);
+            onComplete?.();
+        };
+
+        // Start drawing frames, then start recording
+        drawFrame();
+        recorder.start(100); // collect data every 100ms
+
+        // Auto-stop after the requested duration
+        const timeoutId = window.setTimeout(() => {
+            if (recorder.state === "recording") {
+                recorder.stop();
+            }
+        }, durationMs);
+
+        // Return a stop function for early termination
+        return () => {
+            clearTimeout(timeoutId);
+            if (recorder.state === "recording") {
+                recorder.stop();
+            }
+        };
+    }
+    get speed(): number {
+        return this._speed * 20;
+    }
     set speed(speed: number) {
         this._uniformsDirty = true;
         this._speed = speed / 20;
     }
 
+    get horizontalPressure(): number {
+        return this._horizontalPressure * 4;
+    }
     set horizontalPressure(horizontalPressure: number) {
         this._uniformsDirty = true;
         this._horizontalPressure = horizontalPressure / 4;
     }
 
+    get verticalPressure(): number {
+        return this._verticalPressure * 4;
+    }
     set verticalPressure(verticalPressure: number) {
         this._uniformsDirty = true;
         this._verticalPressure = verticalPressure / 4;
     }
 
+    get waveFrequencyX(): number {
+        return this._waveFrequencyX / 0.04;
+    }
     set waveFrequencyX(waveFrequencyX: number) {
         this._uniformsDirty = true;
         this._waveFrequencyX = waveFrequencyX * 0.04;
     }
 
+    get waveFrequencyY(): number {
+        return this._waveFrequencyY / 0.04;
+    }
     set waveFrequencyY(waveFrequencyY: number) {
         this._uniformsDirty = true;
         this._waveFrequencyY = waveFrequencyY * 0.04;
     }
 
+    get waveAmplitude(): number {
+        return this._waveAmplitude / 0.75;
+    }
     set waveAmplitude(waveAmplitude: number) {
         this._uniformsDirty = true;
         this._waveAmplitude = waveAmplitude * .75;
     }
 
+    get colors(): NeatColor[] {
+        return this._colors;
+    }
     set colors(colors: NeatColor[]) {
         this._uniformsDirty = true;
         this._colors = colors;
@@ -530,81 +863,115 @@ export class NeatGradient implements NeatController {
         this._colorsChanged = true;
     }
 
+    get highlights(): number {
+        return this._highlights * 100;
+    }
     set highlights(highlights: number) {
         this._uniformsDirty = true;
         this._highlights = highlights / 100;
     }
 
+    get shadows(): number {
+        return this._shadows * 100;
+    }
     set shadows(shadows: number) {
         this._uniformsDirty = true;
         this._shadows = shadows / 100;
     }
 
+    get colorSaturation(): number {
+        return this._saturation * 10;
+    }
     set colorSaturation(colorSaturation: number) {
         this._uniformsDirty = true;
         this._saturation = colorSaturation / 10;
     }
 
+    get colorBrightness(): number {
+        return this._brightness;
+    }
     set colorBrightness(colorBrightness: number) {
         this._uniformsDirty = true;
         this._brightness = colorBrightness;
     }
 
+    get colorBlending(): number {
+        return this._colorBlending * 10;
+    }
     set colorBlending(colorBlending: number) {
         this._uniformsDirty = true;
         this._colorBlending = colorBlending / 10;
     }
 
+    get grainScale(): number {
+        return this._grainScale;
+    }
     set grainScale(grainScale: number) {
         this._uniformsDirty = true;
         this._grainScale = grainScale == 0 ? 1 : grainScale;
     }
 
+    get grainIntensity(): number {
+        return this._grainIntensity;
+    }
     set grainIntensity(grainIntensity: number) {
         this._uniformsDirty = true;
         this._grainIntensity = grainIntensity;
     }
 
+    get grainSparsity(): number {
+        return this._grainSparsity;
+    }
     set grainSparsity(grainSparsity: number) {
         this._uniformsDirty = true;
         this._grainSparsity = grainSparsity;
     }
 
+    get grainSpeed(): number {
+        return this._grainSpeed;
+    }
     set grainSpeed(grainSpeed: number) {
         this._uniformsDirty = true;
         this._grainSpeed = grainSpeed;
     }
 
+    get wireframe(): boolean {
+        return this._wireframe;
+    }
     set wireframe(wireframe: boolean) {
         this._uniformsDirty = true;
         this._wireframe = wireframe;
     }
 
+    get resolution(): number {
+        return this._resolution;
+    }
     set resolution(resolution: number) {
-        this._uniformsDirty = true;
-        if (this.glState) {
-            const gl = this.glState.gl;
-            gl.deleteProgram(this.glState.program);
-            gl.deleteBuffer(this.glState.buffers.position);
-            gl.deleteBuffer(this.glState.buffers.normal);
-            gl.deleteBuffer(this.glState.buffers.uv);
-            gl.deleteBuffer(this.glState.buffers.index);
-            gl.deleteBuffer(this.glState.buffers.wireframeIndex);
-        }
-        this.glState = this._initScene(resolution);
+        if (this._resolution === resolution) return;
+        this._resolution = resolution;
+        this._updateGeometry();
     }
 
+    get backgroundColor(): string {
+        return this._backgroundColor;
+    }
     set backgroundColor(backgroundColor: string) {
         this._uniformsDirty = true;
         this._backgroundColor = backgroundColor;
         this._backgroundColorRgb = this._hexToRgb(backgroundColor);
     }
 
+    get backgroundAlpha(): number {
+        return this._backgroundAlpha;
+    }
     set backgroundAlpha(backgroundAlpha: number) {
         this._uniformsDirty = true;
         this._backgroundAlpha = backgroundAlpha;
     }
 
+    get yOffset(): number {
+        return this._yOffset;
+    }
     set yOffset(yOffset: number) {
         this._uniformsDirty = true;
         this._yOffset = yOffset;
@@ -637,21 +1004,33 @@ export class NeatGradient implements NeatController {
         this._yOffsetFlowMultiplier = value / 1000;
     }
 
+    get flowDistortionA(): number {
+        return this._flowDistortionA;
+    }
     set flowDistortionA(value: number) {
         this._uniformsDirty = true;
         this._flowDistortionA = value;
     }
 
+    get flowDistortionB(): number {
+        return this._flowDistortionB;
+    }
     set flowDistortionB(value: number) {
         this._uniformsDirty = true;
         this._flowDistortionB = value;
     }
 
+    get flowScale(): number {
+        return this._flowScale;
+    }
     set flowScale(value: number) {
         this._uniformsDirty = true;
         this._flowScale = value;
     }
 
+    get flowEase(): number {
+        return this._flowEase;
+    }
     set flowEase(value: number) {
         this._uniformsDirty = true;
         this._flowEase = value;
@@ -668,6 +1047,9 @@ export class NeatGradient implements NeatController {
 
 
 
+    get enableProceduralTexture(): boolean {
+        return this._enableProceduralTexture;
+    }
     set enableProceduralTexture(value: boolean) {
         this._uniformsDirty = true;
         this._enableProceduralTexture = value;
@@ -676,6 +1058,9 @@ export class NeatGradient implements NeatController {
         }
     }
 
+    get textureVoidLikelihood(): number {
+        return this._textureVoidLikelihood;
+    }
     set textureVoidLikelihood(value: number) {
         this._uniformsDirty = true;
         this._textureVoidLikelihood = value;
@@ -684,6 +1069,9 @@ export class NeatGradient implements NeatController {
         }
     }
 
+    get textureVoidWidthMin(): number {
+        return this._textureVoidWidthMin;
+    }
     set textureVoidWidthMin(value: number) {
         this._uniformsDirty = true;
         this._textureVoidWidthMin = value;
@@ -692,6 +1080,9 @@ export class NeatGradient implements NeatController {
         }
     }
 
+    get textureVoidWidthMax(): number {
+        return this._textureVoidWidthMax;
+    }
     set textureVoidWidthMax(value: number) {
         this._uniformsDirty = true;
         this._textureVoidWidthMax = value;
@@ -700,6 +1091,9 @@ export class NeatGradient implements NeatController {
         }
     }
 
+    get textureBandDensity(): number {
+        return this._textureBandDensity;
+    }
     set textureBandDensity(value: number) {
         this._uniformsDirty = true;
         this._textureBandDensity = value;
@@ -708,6 +1102,9 @@ export class NeatGradient implements NeatController {
         }
     }
 
+    get textureColorBlending(): number {
+        return this._textureColorBlending;
+    }
     set textureColorBlending(value: number) {
         this._uniformsDirty = true;
         this._textureColorBlending = value;
@@ -716,6 +1113,9 @@ export class NeatGradient implements NeatController {
         }
     }
 
+    get textureSeed(): number {
+        return this._textureSeed;
+    }
     set textureSeed(value: number) {
         this._uniformsDirty = true;
         this._textureSeed = value;
@@ -733,6 +1133,21 @@ export class NeatGradient implements NeatController {
         this._textureEase = value;
     }
 
+    get transparentTextureVoid(): boolean {
+        return this._transparentTextureVoid;
+    }
+
+    set transparentTextureVoid(value: boolean) {
+        this._uniformsDirty = true;
+        this._transparentTextureVoid = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    get proceduralBackgroundColor(): string {
+        return this._proceduralBackgroundColor;
+    }
     set proceduralBackgroundColor(value: string) {
         this._uniformsDirty = true;
         this._proceduralBackgroundColor = value;
@@ -741,27 +1156,93 @@ export class NeatGradient implements NeatController {
         }
     }
 
+    get textureShapeTriangles(): number {
+        return this._textureShapeTriangles;
+    }
     set textureShapeTriangles(value: number) {
         this._uniformsDirty = true;
         this._textureShapeTriangles = value;
         if (this._enableProceduralTexture) this._textureNeedsUpdate = true;
     }
+    get textureShapeCircles(): number {
+        return this._textureShapeCircles;
+    }
     set textureShapeCircles(value: number) {
         this._uniformsDirty = true;
         this._textureShapeCircles = value;
         if (this._enableProceduralTexture) this._textureNeedsUpdate = true;
     }
+    get textureShapeBars(): number {
+        return this._textureShapeBars;
+    }
     set textureShapeBars(value: number) {
         this._uniformsDirty = true;
         this._textureShapeBars = value;
         if (this._enableProceduralTexture) this._textureNeedsUpdate = true;
     }
+    get textureShapeSquiggles(): number {
+        return this._textureShapeSquiggles;
+    }
     set textureShapeSquiggles(value: number) {
         this._uniformsDirty = true;
         this._textureShapeSquiggles = value;
         if (this._enableProceduralTexture) this._textureNeedsUpdate = true;
     }
 
+    _updateGeometry() {
+        if (!this.glState) return;
+        const gl = this.glState.gl;
+        const resolution = this._resolution || 1;
+
+        let geometry;
+        if (this._shapeType === 'sphere') {
+            geometry = generateSphereGeometry(this._sphereRadius, 120 * resolution, 120 * resolution);
+        } else if (this._shapeType === 'torus') {
+            geometry = generateTorusGeometry(this._torusRadius, this._torusTube, 120 * resolution, 120 * resolution);
+        } else if (this._shapeType === 'cylinder') {
+            geometry = generateCylinderGeometry(this._cylinderRadius, this._cylinderRadius, this._cylinderHeight, 120 * resolution, 120 * resolution);
+        } else if (this._shapeType === 'ribbon') {
+            geometry = generateRibbonGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution, this._planeBend, this._planeTwist);
+        } else {
+            geometry = generatePlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution);
+        }
+        const { position, normal, uv, index, wireframeIndex } = geometry;
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.glState.buffers.position);
+        gl.bufferData(gl.ARRAY_BUFFER, position, gl.STATIC_DRAW);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.glState.buffers.normal);
+        gl.bufferData(gl.ARRAY_BUFFER, normal, gl.STATIC_DRAW);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.glState.buffers.uv);
+        gl.bufferData(gl.ARRAY_BUFFER, uv, gl.STATIC_DRAW);
+
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.glState.buffers.index);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index, gl.STATIC_DRAW);
+
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.glState.buffers.wireframeIndex);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, wireframeIndex, gl.STATIC_DRAW);
+
+        // Restore default bound element buffer
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.glState.buffers.index);
+
+        this.glState.indexCount = index.length;
+        this.glState.wireframeIndexCount = wireframeIndex.length;
+        this.glState.indexType = (index instanceof Uint32Array) ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
+
+        // Keep camera updated with the new shapeType and dimensions
+        const width = this._ref.clientWidth;
+        const height = this._ref.clientHeight;
+        updateCamera(this.glState.camera, width, height, PLANE_WIDTH, PLANE_HEIGHT, this._shapeType, this._cameraZoom);
+
+        // Recompute projection matrix
+        const projLoc = this.glState.locations.uniforms["projectionMatrix"];
+        gl.useProgram(this.glState.program);
+        if (projLoc) gl.uniformMatrix4fv(projLoc, false, this.glState.camera.projectionMatrix.elements);
+
+        this._uniformsDirty = true;
+    }
+
     _hexToRgb(hex: string): [number, number, number] {
         const bigint = parseInt(hex.replace('#', ''), 16);
         return [
@@ -788,8 +1269,20 @@ export class NeatGradient implements NeatController {
 
         gl.viewport(0, 0, width, height);
 
-        // Generate plane geometry with Uint32Array for large meshes
-        const { position, normal, uv, index, wireframeIndex } = generatePlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution);
+        // Generate parametric geometry based on shapeType
+        let geometry;
+        if (this._shapeType === 'sphere') {
+            geometry = generateSphereGeometry(this._sphereRadius, 120 * resolution, 120 * resolution);
+        } else if (this._shapeType === 'torus') {
+            geometry = generateTorusGeometry(this._torusRadius, this._torusTube, 120 * resolution, 120 * resolution);
+        } else if (this._shapeType === 'cylinder') {
+            geometry = generateCylinderGeometry(this._cylinderRadius, this._cylinderRadius, this._cylinderHeight, 120 * resolution, 120 * resolution);
+        } else if (this._shapeType === 'ribbon') {
+            geometry = generateRibbonGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution, this._planeBend, this._planeTwist);
+        } else {
+            geometry = generatePlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution);
+        }
+        const { position, normal, uv, index, wireframeIndex } = geometry;
 
         const positionBuffer = gl.createBuffer()!;
         gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
@@ -855,7 +1348,7 @@ export class NeatGradient implements NeatController {
 
         const camera = new OrthographicCamera(0, 0, 0, 0, 0, 1000);
         camera.position = [0, 0, 5];
-        updateCamera(camera, width, height);
+        updateCamera(camera, width, height, PLANE_WIDTH, PLANE_HEIGHT, this._shapeType, this._cameraZoom);
 
         // Define attributes
         const aPosition = gl.getAttribLocation(program, "position");
@@ -876,17 +1369,7 @@ export class NeatGradient implements NeatController {
 
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
 
-        const modelViewMatrix = new Matrix4();
-        // The View Matrix is the inverse of the Camera's position
-        // Camera is at [0, 0, 5], so view matrix translates by [0, 0, -5]
-        modelViewMatrix.translate(-camera.position[0], -camera.position[1], -camera.position[2]);
-
-        // The Model Matrix mimicking: plane.rotation.x = -Math.PI / 3.5; plane.position.z = -1;
-        modelViewMatrix.translate(0, 0, -1);
-        modelViewMatrix.rotateX(-Math.PI / 3.5);
-
-        const mvLoc = gl.getUniformLocation(program, "modelViewMatrix");
-        gl.uniformMatrix4fv(mvLoc, false, modelViewMatrix.elements);
+        // modelViewMatrix is set dynamically in the render loop
 
         const projLoc = gl.getUniformLocation(program, "projectionMatrix");
         gl.uniformMatrix4fv(projLoc, false, camera.projectionMatrix.elements);
@@ -901,18 +1384,20 @@ export class NeatGradient implements NeatController {
         gl.uniform1i(colorsCountLoc, COLORS_COUNT);
 
         const uniformsList = [
+            "projectionMatrix", "modelViewMatrix",
             "u_time", "u_resolution", "u_color_pressure", "u_wave_frequency_x", "u_wave_frequency_y",
             "u_wave_amplitude", "u_colors_count", "u_plane_width", "u_plane_height", "u_shadows",
             "u_highlights", "u_grain_intensity", "u_grain_sparsity", "u_grain_scale", "u_grain_speed",
             "u_flow_distortion_a", "u_flow_distortion_b", "u_flow_scale", "u_flow_ease", "u_flow_enabled",
             "u_y_offset", "u_y_offset_wave_multiplier", "u_y_offset_color_multiplier", "u_y_offset_flow_multiplier",
 
-            "u_procedural_texture", "u_enable_procedural_texture", "u_texture_ease", "u_saturation", "u_brightness", "u_color_blending",
+            "u_procedural_texture", "u_enable_procedural_texture", "u_texture_ease", "u_transparent_texture_void", "u_saturation", "u_brightness", "u_color_blending",
             "u_domain_warp_enabled", "u_domain_warp_intensity", "u_domain_warp_scale",
             "u_vignette_intensity", "u_vignette_radius",
             "u_fresnel_enabled", "u_fresnel_power", "u_fresnel_intensity", "u_fresnel_color",
             "u_iridescence_enabled", "u_iridescence_intensity", "u_iridescence_speed",
-            "u_bloom_intensity", "u_bloom_threshold", "u_chromatic_aberration"
+            "u_bloom_intensity", "u_bloom_threshold", "u_chromatic_aberration",
+            "u_shape_type", "u_silhouette_fade", "u_cylinder_fade", "u_ribbon_fade"
         ];
 
         const locations: WebGLState["locations"] = {
@@ -966,10 +1451,15 @@ export class NeatGradient implements NeatController {
         // Texture size - 1024 provides good balance between quality and performance
         // Reduced from 2048 for better performance
         const texSize = 1024;
-        const sourceCanvas = document.createElement('canvas');
-        sourceCanvas.width = texSize;
-        sourceCanvas.height = texSize;
-        const sCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
+        
+        if (!this._sourceCanvas) {
+            this._sourceCanvas = document.createElement('canvas');
+            this._sourceCanvas.width = texSize;
+            this._sourceCanvas.height = texSize;
+            this._sourceCtx = this._sourceCanvas.getContext('2d');
+        }
+        const sourceCanvas = this._sourceCanvas;
+        const sCtx = this._sourceCtx;
         if (!sCtx) return null;
 
         let seed = this._textureSeed;
@@ -988,6 +1478,10 @@ export class NeatGradient implements NeatController {
         const colors = this._colors.filter(c => c.enabled).map(c => c.color);
         if (colors.length === 0) return null;
 
+        const shouldTile = this._shapeType !== 'plane';
+        const dxs = shouldTile ? [-1, 0, 1] : [0];
+        const dys = shouldTile ? [-1, 0, 1] : [0];
+
         // Helper functions
         function hexToRgb(hex: string) {
             const bigint = parseInt(hex.replace('#', ''), 16);
@@ -1029,72 +1523,133 @@ export class NeatGradient implements NeatController {
 
         // Triangles: use configurable count
         for (let i = 0; i < this._textureShapeTriangles; i++) {
-            sCtx.fillStyle = getInterColor();
-            sCtx.beginPath();
+            const fillStyle = getInterColor();
             const x = random() * texSize;
             const y = random() * texSize;
             const s = 100 + random() * 300;
-            sCtx.moveTo(x, y);
-            sCtx.lineTo(x + (random() - 0.5) * s, y + (random() - 0.5) * s);
-            sCtx.lineTo(x + (random() - 0.5) * s, y + (random() - 0.5) * s);
-            sCtx.fill();
+            const x1 = (random() - 0.5) * s;
+            const y1 = (random() - 0.5) * s;
+            const x2 = (random() - 0.5) * s;
+            const y2 = (random() - 0.5) * s;
+
+            for (const dx of dxs) {
+                for (const dy of dys) {
+                    sCtx.fillStyle = fillStyle;
+                    sCtx.beginPath();
+                    const tx = x + dx * texSize;
+                    const ty = y + dy * texSize;
+                    sCtx.moveTo(tx, ty);
+                    sCtx.lineTo(tx + x1, ty + y1);
+                    sCtx.lineTo(tx + x2, ty + y2);
+                    sCtx.fill();
+                }
+            }
         }
 
         // Circles / rings: use configurable count
         for (let i = 0; i < this._textureShapeCircles; i++) {
-            sCtx.strokeStyle = getInterColor();
-            sCtx.lineWidth = 10 + random() * 50;
-            sCtx.beginPath();
+            const strokeStyle = getInterColor();
+            const lineWidth = 10 + random() * 50;
             const x = random() * texSize;
             const y = random() * texSize;
             const r = 50 + random() * 150;
-            sCtx.arc(x, y, r, 0, Math.PI * 2);
-            sCtx.stroke();
+
+            for (const dx of dxs) {
+                for (const dy of dys) {
+                    sCtx.strokeStyle = strokeStyle;
+                    sCtx.lineWidth = lineWidth;
+                    sCtx.beginPath();
+                    sCtx.arc(x + dx * texSize, y + dy * texSize, r, 0, Math.PI * 2);
+                    sCtx.stroke();
+                }
+            }
         }
 
         // Bars: use configurable count
         for (let i = 0; i < this._textureShapeBars; i++) {
-            sCtx.fillStyle = getInterColor();
-            sCtx.save();
-            sCtx.translate(random() * texSize, random() * texSize);
-            sCtx.rotate(random() * Math.PI);
-            sCtx.fillRect(-150, -25, 300, 50);
-            sCtx.restore();
+            const fillStyle = getInterColor();
+            const x = random() * texSize;
+            const y = random() * texSize;
+            const rot = random() * Math.PI;
+
+            for (const dx of dxs) {
+                for (const dy of dys) {
+                    sCtx.fillStyle = fillStyle;
+                    sCtx.save();
+                    sCtx.translate(x + dx * texSize, y + dy * texSize);
+                    sCtx.rotate(rot);
+                    sCtx.fillRect(-150, -25, 300, 50);
+                    sCtx.restore();
+                }
+            }
         }
 
         // Squiggles: use configurable count
         sCtx.lineWidth = 15;
         sCtx.lineCap = 'round';
         for (let i = 0; i < this._textureShapeSquiggles; i++) {
-            sCtx.strokeStyle = getInterColor();
-            sCtx.beginPath();
-            let x = random() * texSize;
-            let y = random() * texSize;
-            sCtx.moveTo(x, y);
+            const strokeStyle = getInterColor();
+            const x = random() * texSize;
+            const y = random() * texSize;
+            
+            const curves: Array<{ cx1: number, cy1: number, cx2: number, cy2: number, ex: number, ey: number }> = [];
+            let cx = 0;
+            let cy = 0;
             for (let j = 0; j < 4; j++) {
-                sCtx.bezierCurveTo(
-                    x + (random() - 0.5) * 300, y + (random() - 0.5) * 300,
-                    x + (random() - 0.5) * 300, y + (random() - 0.5) * 300,
-                    x + (random() - 0.5) * 300, y + (random() - 0.5) * 300
-                );
-                x += (random() - 0.5) * 300;
-                y += (random() - 0.5) * 300;
+                const ex = cx + (random() - 0.5) * 300;
+                const ey = cy + (random() - 0.5) * 300;
+                curves.push({
+                    cx1: cx + (random() - 0.5) * 300,
+                    cy1: cy + (random() - 0.5) * 300,
+                    cx2: cx + (random() - 0.5) * 300,
+                    cy2: cy + (random() - 0.5) * 300,
+                    ex: ex,
+                    ey: ey
+                });
+                cx = ex;
+                cy = ey;
+            }
+
+            for (const dx of dxs) {
+                for (const dy of dys) {
+                    sCtx.strokeStyle = strokeStyle;
+                    sCtx.beginPath();
+                    const tx = x + dx * texSize;
+                    const ty = y + dy * texSize;
+                    sCtx.moveTo(tx, ty);
+                    
+                    for (const curve of curves) {
+                        sCtx.bezierCurveTo(
+                            tx + curve.cx1, ty + curve.cy1,
+                            tx + curve.cx2, ty + curve.cy2,
+                            tx + curve.ex, ty + curve.ey
+                        );
+                    }
+                    sCtx.stroke();
+                }
             }
-            sCtx.stroke();
         }
 
         // === MASKED CANVAS ===
         // Masking: Seed isolation
         setSeed(50000);
-        const canvas = document.createElement('canvas');
-        canvas.width = texSize;
-        canvas.height = texSize;
-        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        if (!this._maskedCanvas) {
+            this._maskedCanvas = document.createElement('canvas');
+            this._maskedCanvas.width = texSize;
+            this._maskedCanvas.height = texSize;
+            this._maskedCtx = this._maskedCanvas.getContext('2d');
+        }
+        const canvas = this._maskedCanvas;
+        const ctx = this._maskedCtx;
         if (!ctx) return null;
 
         // Start filled with the chosen void color so gaps show that color
-        ctx.fillStyle = baseColor;
-        ctx.fillRect(0, 0, texSize, texSize);
+        if (this._transparentTextureVoid) {
+            ctx.clearRect(0, 0, texSize, texSize);
+        } else {
+            ctx.fillStyle = baseColor;
+            ctx.fillRect(0, 0, texSize, texSize);
+        }
 
         // Determine layout segments (matter vs void)
         let layoutHead = 0;
@@ -1154,54 +1709,119 @@ export class NeatGradient implements NeatController {
         return tex;
     }
 
+    get silhouetteFade(): number {
+        return this._silhouetteFade;
+    }
+    set silhouetteFade(value: number) {
+        if (this._silhouetteFade !== value) {
+            this._silhouetteFade = value;
+            this._uniformsDirty = true;
+        }
+    }
+
+    get cylinderFade(): number {
+        return this._cylinderFade;
+    }
+    set cylinderFade(value: number) {
+        if (this._cylinderFade !== value) {
+            this._cylinderFade = value;
+            this._uniformsDirty = true;
+        }
+    }
+
+    get ribbonFade(): number {
+        return this._ribbonFade;
+    }
+    set ribbonFade(value: number) {
+        if (this._ribbonFade !== value) {
+            this._ribbonFade = value;
+            this._uniformsDirty = true;
+        }
+    }
+
+    get domainWarpEnabled(): boolean {
+        return this._domainWarpEnabled;
+    }
     set domainWarpEnabled(enabled: boolean) {
         if (this._domainWarpEnabled !== enabled) {
             this._domainWarpEnabled = enabled;
             this._uniformsDirty = true;
         }
     }
+
+    get domainWarpIntensity(): number {
+        return this._domainWarpIntensity;
+    }
     set domainWarpIntensity(intensity: number) {
         if (this._domainWarpIntensity !== intensity) {
             this._domainWarpIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+
+    get domainWarpScale(): number {
+        return this._domainWarpScale;
+    }
     set domainWarpScale(scale: number) {
         if (this._domainWarpScale !== scale) {
             this._domainWarpScale = scale;
             this._uniformsDirty = true;
         }
     }
+
+    get vignetteIntensity(): number {
+        return this._vignetteIntensity;
+    }
     set vignetteIntensity(intensity: number) {
         if (this._vignetteIntensity !== intensity) {
             this._vignetteIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+
+    get vignetteRadius(): number {
+        return this._vignetteRadius;
+    }
     set vignetteRadius(radius: number) {
         if (this._vignetteRadius !== radius) {
             this._vignetteRadius = radius;
             this._uniformsDirty = true;
         }
     }
+
+    get fresnelEnabled(): boolean {
+        return this._fresnelEnabled;
+    }
     set fresnelEnabled(enabled: boolean) {
         if (this._fresnelEnabled !== enabled) {
             this._fresnelEnabled = enabled;
             this._uniformsDirty = true;
         }
     }
+
+    get fresnelPower(): number {
+        return this._fresnelPower;
+    }
     set fresnelPower(power: number) {
         if (this._fresnelPower !== power) {
             this._fresnelPower = power;
             this._uniformsDirty = true;
         }
     }
+
+    get fresnelIntensity(): number {
+        return this._fresnelIntensity;
+    }
     set fresnelIntensity(intensity: number) {
         if (this._fresnelIntensity !== intensity) {
             this._fresnelIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+
+    get fresnelColor(): string {
+        return this._fresnelColor;
+    }
     set fresnelColor(fresnelColor: string) {
         if (this._fresnelColor !== fresnelColor) {
             this._fresnelColor = fresnelColor;
@@ -1209,42 +1829,226 @@ export class NeatGradient implements NeatController {
             this._uniformsDirty = true;
         }
     }
+
+    get iridescenceEnabled(): boolean {
+        return this._iridescenceEnabled;
+    }
     set iridescenceEnabled(enabled: boolean) {
         if (this._iridescenceEnabled !== enabled) {
             this._iridescenceEnabled = enabled;
             this._uniformsDirty = true;
         }
     }
+
+    get iridescenceIntensity(): number {
+        return this._iridescenceIntensity;
+    }
     set iridescenceIntensity(intensity: number) {
         if (this._iridescenceIntensity !== intensity) {
             this._iridescenceIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+
+    get iridescenceSpeed(): number {
+        return this._iridescenceSpeed;
+    }
     set iridescenceSpeed(speed: number) {
         if (this._iridescenceSpeed !== speed) {
             this._iridescenceSpeed = speed;
             this._uniformsDirty = true;
         }
     }
+
+    get bloomIntensity(): number {
+        return this._bloomIntensity;
+    }
     set bloomIntensity(intensity: number) {
         if (this._bloomIntensity !== intensity) {
             this._bloomIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+
+    get bloomThreshold(): number {
+        return this._bloomThreshold;
+    }
     set bloomThreshold(threshold: number) {
         if (this._bloomThreshold !== threshold) {
             this._bloomThreshold = threshold;
             this._uniformsDirty = true;
         }
     }
+
+    get chromaticAberration(): number {
+        return this._chromaticAberration;
+    }
     set chromaticAberration(aberration: number) {
         if (this._chromaticAberration !== aberration) {
             this._chromaticAberration = aberration;
             this._uniformsDirty = true;
         }
     }
+
+    // Getters and Setters for 3D Shapes
+    get shapeType(): 'plane' | 'sphere' | 'torus' | 'cylinder' | 'ribbon' {
+        return this._shapeType;
+    }
+    set shapeType(val: 'plane' | 'sphere' | 'torus' | 'cylinder' | 'ribbon') {
+        if (this._shapeType !== val) {
+            this._shapeType = val;
+            this._updateGeometry();
+        }
+    }
+
+    get shapeRotationX(): number { return this._shapeRotationX; }
+    set shapeRotationX(val: number) {
+        this._shapeRotationX = val;
+        this._uniformsDirty = true;
+    }
+
+    get shapeRotationY(): number { return this._shapeRotationY; }
+    set shapeRotationY(val: number) {
+        this._shapeRotationY = val;
+        this._uniformsDirty = true;
+    }
+
+    get shapeRotationZ(): number { return this._shapeRotationZ; }
+    set shapeRotationZ(val: number) {
+        this._shapeRotationZ = val;
+        this._uniformsDirty = true;
+    }
+
+    get shapeAutoRotateSpeedX(): number { return this._shapeAutoRotateSpeedX; }
+    set shapeAutoRotateSpeedX(val: number) {
+        this._shapeAutoRotateSpeedX = val;
+        this._uniformsDirty = true;
+    }
+
+    get shapeAutoRotateSpeedY(): number { return this._shapeAutoRotateSpeedY; }
+    set shapeAutoRotateSpeedY(val: number) {
+        this._shapeAutoRotateSpeedY = val;
+        this._uniformsDirty = true;
+    }
+
+    get sphereRadius(): number { return this._sphereRadius; }
+    set sphereRadius(val: number) {
+        if (this._sphereRadius !== val) {
+            this._sphereRadius = val;
+            this._updateGeometry();
+        }
+    }
+
+    get torusRadius(): number { return this._torusRadius; }
+    set torusRadius(val: number) {
+        if (this._torusRadius !== val) {
+            this._torusRadius = val;
+            this._updateGeometry();
+        }
+    }
+
+    get torusTube(): number { return this._torusTube; }
+    set torusTube(val: number) {
+        if (this._torusTube !== val) {
+            this._torusTube = val;
+            this._updateGeometry();
+        }
+    }
+
+    get cylinderRadius(): number { return this._cylinderRadius; }
+    set cylinderRadius(val: number) {
+        if (this._cylinderRadius !== val) {
+            this._cylinderRadius = val;
+            this._updateGeometry();
+        }
+    }
+
+    get cylinderHeight(): number { return this._cylinderHeight; }
+    set cylinderHeight(val: number) {
+        if (this._cylinderHeight !== val) {
+            this._cylinderHeight = val;
+            this._updateGeometry();
+        }
+    }
+
+    get planeBend(): number { return this._planeBend; }
+    set planeBend(val: number) {
+        if (this._planeBend !== val) {
+            this._planeBend = val;
+            this._updateGeometry();
+        }
+    }
+
+    get planeTwist(): number { return this._planeTwist; }
+    set planeTwist(val: number) {
+        if (this._planeTwist !== val) {
+            this._planeTwist = val;
+            this._updateGeometry();
+        }
+    }
+
+    // Camera Getters and Setters
+    get cameraLock(): boolean { return this._cameraLock; }
+    set cameraLock(val: boolean) {
+        this._cameraLock = val;
+    }
+
+    get cameraX(): number { return this._cameraX; }
+    set cameraX(val: number) {
+        this._cameraX = val;
+        this._uniformsDirty = true;
+    }
+
+    get cameraY(): number { return this._cameraY; }
+    set cameraY(val: number) {
+        this._cameraY = val;
+        this._uniformsDirty = true;
+    }
+
+    get cameraZ(): number { return this._cameraZ; }
+    set cameraZ(val: number) {
+        this._cameraZ = val;
+        this._uniformsDirty = true;
+    }
+
+    get cameraRotationX(): number { return this._cameraRotationX; }
+    set cameraRotationX(val: number) {
+        this._cameraRotationX = val;
+        this._uniformsDirty = true;
+    }
+
+    get cameraRotationY(): number { return this._cameraRotationY; }
+    set cameraRotationY(val: number) {
+        this._cameraRotationY = val;
+        this._uniformsDirty = true;
+    }
+
+    get cameraRotationZ(): number { return this._cameraRotationZ; }
+    set cameraRotationZ(val: number) {
+        this._cameraRotationZ = val;
+        this._uniformsDirty = true;
+    }
+
+    get cameraZoom(): number { return this._cameraZoom; }
+    set cameraZoom(val: number) {
+        if (this._cameraZoom !== val) {
+            this._cameraZoom = val;
+            this._updateCameraFrustum();
+        }
+    }
+
+    _updateCameraFrustum() {
+        if (!this.glState) return;
+        const gl = this.glState.gl;
+        const width = this._ref.clientWidth;
+        const height = this._ref.clientHeight;
+        updateCamera(this.glState.camera, width, height, PLANE_WIDTH, PLANE_HEIGHT, this._shapeType, this._cameraZoom);
+
+        const projLoc = this.glState.locations.uniforms["projectionMatrix"];
+        gl.useProgram(this.glState.program);
+        if (projLoc) gl.uniformMatrix4fv(projLoc, false, this.glState.camera.projectionMatrix.elements);
+        this._uniformsDirty = true;
+    }
 }