troncell-vue-component 1.0.0

package/dist/types/components/InfiniteGridComp/component/InfiniteGridClass.d.ts

@@ -0,0 +1,382 @@
+import { Renderer, Camera, Transform, Mesh, Vec2, RenderTarget, Raycast } from 'ogl';
+import { CustomPostProcessShader } from './PostProcessShader';
+import { EventHandler, EventHandlerHost } from './EventHandler';
+import { DisposalManager, DisposableHost } from './DisposalManager';
+import { GridManager, GridManagerHost } from './GridManager';
+import { CardData, InfiniteGridOptions, Position2D, ScrollState, TileGroupData, CardTexturePair } from './types';
+/**
+ * InfiniteGridClass - An OGL-based infinite scrolling grid system
+ *
+ * This class creates an infinite, scrollable grid of tiles that displays card data.
+ * It uses a 3x3 grid system where tiles are repositioned as the user scrolls to
+ * create an infinite scrolling effect. Each tile can display custom content
+ * with foreground and background textures.
+ *
+ * Key Features:
+ * - Infinite scrolling in all directions using tile repositioning
+ * - Interactive hover effects with background blur transitions
+ * - Click events with custom event dispatching
+ * - Optional post-processing effects (distortion, vignette)
+ * - GSAP-powered smooth animations and inertia scrolling
+ * - Responsive design with automatic viewport calculations
+ *
+ * @example
+ * ```typescript
+ * const grid = new InfiniteGridClass(
+ *   containerElement,
+ *   cardDataArray,
+ *   {
+ *     gridCols: 3,
+ *     gridRows: 3,
+ *     enablePostProcessing: true
+ *   }
+ * );
+ * await grid.init();
+ * ```
+ */
+export declare class InfiniteGridClass implements EventHandlerHost, DisposableHost, GridManagerHost {
+    /**
+     * Core Container and Data Properties
+     */
+    /** The HTML element that contains the OGL canvas */
+    container: HTMLElement;
+    /** Array of card data to be displayed in the grid */
+    cardData: CardData[];
+    /** Merged configuration options with defaults applied */
+    options: Required<InfiniteGridOptions>;
+    /**
+     * Grid Layout Properties (calculated once, read-only)
+     */
+    /** Gap between tiles in OGL world units */
+    readonly GRID_GAP: number;
+    /** Size of each individual tile in OGL world units */
+    readonly TILE_SIZE: number;
+    /** Total space occupied by one tile including gap */
+    readonly TILE_SPACE: number;
+    /** Number of columns in each grid section */
+    readonly GRID_COLS: number;
+    /** Number of rows in each grid section */
+    readonly GRID_ROWS: number;
+    /** Total width of one grid section */
+    readonly GRID_WIDTH: number;
+    /** Total height of one grid section */
+    readonly GRID_HEIGHT: number;
+    /** Total width of all 3 grid sections (for infinite wrapping) */
+    private readonly TOTAL_GRID_WIDTH;
+    /** Total height of all 3 grid sections (for infinite wrapping) */
+    private readonly TOTAL_GRID_HEIGHT;
+    /**
+     * OGL Core Rendering Objects
+     */
+    /** Main OGL scene containing all 3D objects */
+    scene: Transform;
+    /** Perspective camera for viewing the scene */
+    camera: Camera | null;
+    /** WebGL renderer for drawing to the canvas */
+    renderer: Renderer | null;
+    /** 2D pointer coordinates for interaction */
+    pointer: Vec2;
+    /** Raycast utility for mouse/touch interaction */
+    raycast: Raycast;
+    /**
+     * Post-Processing Objects
+     */
+    /** Post-processing shader for visual effects (distortion, vignette) */
+    postProcessShader: CustomPostProcessShader | null;
+    /** Render target for capturing the scene before post-processing */
+    sceneRenderTarget: RenderTarget | null;
+    /**
+     * Scene Objects and Data Structures
+     */
+    /** Array of OGL transforms, each containing one 3x3 section of tiles */
+    groupObjects: Transform[];
+    /** Map of tile keys to foreground mesh objects (clickable content) */
+    foregroundMeshMap: Map<string, Mesh>;
+    /** Map of tile keys to background mesh objects (blur effect on hover) */
+    backgroundMeshMap: Map<string, Mesh>;
+    /** Generated textures for all cards (foreground + background pairs) */
+    cardTextures: CardTexturePair[];
+    /** Static shader uniforms for background materials */
+    staticUniforms: Map<string, any>;
+    /**
+     * User Interaction State
+     */
+    /** Key of the currently hovered tile (empty string if none) */
+    currentHoveredTileKey: string;
+    /** Whether the user is currently dragging/scrolling */
+    isDown: boolean;
+    isHoveringCanvas: boolean;
+    /** Whether the scene has moved significantly during this interaction */
+    hasMovedSignificantly: boolean;
+    /** Position where the current drag started */
+    startPosition: Position2D;
+    /** Scroll position when the current drag started */
+    scrollPosition: Position2D;
+    /** Current scroll state and behavior settings */
+    scroll: ScrollState;
+    /** Direction of scroll movement for infinite wrapping logic */
+    private direction;
+    /** GSAP InertiaPlugin tracker for smooth scroll transitions */
+    scrollTracker: any;
+    /**
+     * Animation Configuration Constants
+     */
+    /** Duration of hover transition animations in seconds */
+    readonly hoverTransitionDuration: number;
+    /** GSAP easing function for hover animations */
+    readonly hoverEase: string;
+    /** Initial opacity of background blur effect (0 = transparent) */
+    readonly initialBackgroundOpacity: number;
+    /** Target opacity when background is hovered (1 = fully visible) */
+    readonly hoveredBackgroundOpacity: number;
+    /** Maximum movement distance in pixels before click is disabled */
+    readonly maxClickMovement: number;
+    /**
+     * Animation Frame Management
+     */
+    /** RequestAnimationFrame ID for the main render loop */
+    animationFrameId: number | null;
+    /**
+     * Tile Group Data Structure
+     */
+    /** Array containing position data for all 9 tile groups (3x3 infinite grid) */
+    tileGroupsData: TileGroupData[];
+    /**
+     * Modular System Components
+     */
+    /** Event handler for managing user interactions */
+    eventHandler?: EventHandler;
+    /** Grid manager for handling grid creation and management */
+    gridManager: GridManager;
+    /** Disposal manager for resource cleanup */
+    private disposalManager;
+    /**
+     * Creates a new InfiniteGridClass instance
+     *
+     * @param containerElement - HTML element that will contain the OGL canvas
+     * @param cardData - Array of card data to display in the grid (defaults to empty array)
+     * @param options - Configuration options (merged with defaults)
+     *
+     * @throws {Error} Throws if containerElement is null or undefined
+     *
+     * @example
+     * ```typescript
+     * const container = document.getElementById('grid-container');
+     * const cards = [
+     *   { title: 'Card 1', badge: 'NEW', description: '...', tags: ['tag1'], date: '2024' },
+     *   // ... more cards
+     * ];
+     * const grid = new InfiniteGridClass(container, cards, {
+     *   gridCols: 4,
+     *   tileSize: 2.5,
+     *   enablePostProcessing: true
+     * });
+     * ```
+     */
+    constructor(containerElement: HTMLElement, cardData?: CardData[], options?: Partial<InfiniteGridOptions>);
+    /**
+     * Initializes the infinite grid system asynchronously
+     *
+     * This method sets up all necessary components in the correct order:
+     * 1. WebGL renderer and camera
+     * 2. Tile group positioning structure
+     * 3. Texture generation for all card data
+     * 4. 3D mesh creation and scene setup
+     * 5. Event listeners for interaction
+     * 6. Animation systems and render loop
+     *
+     * @returns Promise that resolves when initialization is complete
+     *
+     * @example
+     * ```typescript
+     * const grid = new InfiniteGridClass(container, cardData);
+     * await grid.init(); // Wait for all textures to load and scene to be ready
+     * // Grid is now interactive and rendering
+     * ```
+     */
+    init(): Promise<void>;
+    /**
+     * Sets up the WebGL renderer with optimal settings
+     *
+     * Creates an OGL renderer with antialiasing and transparency,
+     * configures it for the container size, and appends the canvas
+     * to the DOM.
+     */
+    private setupRenderer;
+    /**
+     * Sets up the perspective camera with proper positioning
+     *
+     * Creates a perspective camera with a 45-degree field of view,
+     * positions it at the configured Z distance.
+     */
+    private setupCamera;
+    /**
+     * Sets up post-processing effects if enabled
+     *
+     * Creates a render target for capturing the scene before post-processing
+     * and initializes the post-processing shader with configured parameters.
+     */
+    private setupPostProcessing;
+    /**
+     * Calculates the viewport dimensions in world space
+     *
+     * Uses the camera's field of view and position to determine how much
+     * world space is visible. This is essential for infinite scrolling
+     * calculations to know when tile groups need to be repositioned.
+     *
+     * @returns Viewport object with width and height in world units
+     */
+    private get viewport();
+    updatePositions(): void;
+    animateInertiaScroll(vx?: number | string, vy?: number | string): void;
+    /**
+     * Gets all interactive meshes for raycasting
+     * @returns Array of foreground meshes that can be interacted with
+     */
+    getInteractiveMeshes(): Mesh[];
+    /**
+     * Updates mouse/touch coordinates for raycasting
+     * @param clientX - X coordinate in client space
+     * @param clientY - Y coordinate in client space
+     */
+    updatePointerCoordinates(clientX: number, clientY: number): void;
+    /**
+     * Performs raycasting and returns hit results
+     * @returns Array of hit meshes ordered by distance
+     */
+    performRaycast(): Mesh[];
+    /**
+     * Extracts tile key from a mesh using its userData
+     * @param mesh - The mesh to get the tile key from
+     * @returns The tile key or empty string if not found
+     */
+    getTileKeyFromMesh(mesh: Mesh): string;
+    fadeInBackground(mesh: Mesh): void;
+    fadeOutBackground(mesh: Mesh): void;
+    /**
+     * Gets the card data for a specific tile
+     * @param groupIndex - The group index of the tile
+     * @param tileIndex - The tile index within the group
+     * @returns The card data for the tile
+     */
+    getCardDataForTile(groupIndex: number, tileIndex: number): CardData;
+    private render;
+    /**
+     * Animates the post-processing effects
+     *
+     * @param targetDistortion - Target distortion intensity (0 = no distortion)
+     * @param targetVignetteOffset - Target vignette offset (0.0-1.0)
+     * @param targetVignetteDarkness - Target vignette darkness (should be > offset)
+     * @param duration - Animation duration in seconds
+     * @param delay - Animation delay in seconds
+     * @param ease - GSAP ease function
+     *
+     * @example
+     * ```typescript
+     * // Animate to strong distortion and vignette
+     * grid.animatePostProcessing(0.5, 0.6, 0.9, 2.0);
+     *
+     * // Reset to no effects
+     * grid.animatePostProcessing(0, 0.8, 1.0, 1.0);
+     * ```
+     */
+    animatePostProcessing(targetDistortion: number, targetVignetteOffset: number, targetVignetteDarkness: number, duration?: number, delay?: number, ease?: string): void;
+    /**
+     * Toggles post-processing on/off for debugging
+     * @param enabled - Whether to enable post-processing
+     */
+    setPostProcessingEnabled(enabled: boolean): void;
+    /**
+     * Gets the current distortion intensity
+     */
+    get distortionIntensity(): number;
+    /**
+     * Sets the distortion intensity (0 = no distortion)
+     */
+    set distortionIntensity(value: number);
+    /**
+     * Gets the current vignette offset
+     */
+    get vignetteOffset(): number;
+    /**
+     * Sets the vignette offset (0.0 = center, 1.0 = edges)
+     */
+    set vignetteOffset(value: number);
+    /**
+     * Gets the current vignette darkness
+     */
+    get vignetteDarkness(): number;
+    /**
+     * Sets the vignette darkness (should be > vignetteOffset)
+     */
+    set vignetteDarkness(value: number);
+    /**
+     * Completely disposes of the infinite grid and cleans up all resources
+     *
+     * This method now uses the DisposalManager for systematic cleanup to prevent memory leaks.
+     * The disposal manager handles:
+     * - Cancels the animation frame loop
+     * - Removes all event listeners
+     * - Disposes all OGL geometries, materials, and textures
+     * - Clears all data structures and maps
+     * - Removes the canvas from the DOM
+     *
+     * Call this method when the grid is no longer needed, such as when
+     * navigating away from the page or unmounting the component.
+     *
+     * @example
+     * ```typescript
+     * // In a Vue component's onBeforeUnmount or React's useEffect cleanup
+     * onBeforeUnmount(() => {
+     *   if (gridInstance) {
+     *     gridInstance.dispose();
+     *     gridInstance = null;
+     *   }
+     * });
+     * ```
+     */
+    dispose(): void;
+    /**
+     * Gets the event handler instance for advanced event management
+     * @returns The EventHandler instance or undefined if not initialized
+     */
+    getEventHandler(): EventHandler | undefined;
+    /**
+     * Gets the grid manager instance for advanced grid management
+     * @returns The GridManager instance
+     */
+    getGridManager(): GridManager;
+    /**
+     * Gets the disposal manager instance for advanced cleanup control
+     * @returns The DisposalManager instance
+     */
+    getDisposalManager(): DisposalManager;
+    /**
+     * Updates card data and regenerates the grid
+     * @param newCardData - The new card data to display
+     * @returns Promise that resolves when update is complete
+     */
+    updateCardData(newCardData: CardData[]): Promise<void>;
+    /**
+     * Gets statistics about the current grid
+     * @returns Object containing grid statistics
+     */
+    getGridStats(): {
+        totalGroups: number;
+        tilesPerGroup: number;
+        totalTiles: number;
+        totalTextures: number;
+        memoryEstimate: string;
+    };
+    /**
+     * Validates that all resources have been properly disposed
+     * Useful for debugging memory leaks
+     * @returns True if disposal was successful, false if issues were found
+     */
+    validateDisposal(): boolean;
+    /**
+     * Performs a partial cleanup that preserves the core structure
+     * but clears dynamic content. Useful for reinitialization scenarios.
+     */
+    partialCleanup(): void;
+}

package/dist/types/components/InfiniteGridComp/component/PostProcessShader.d.ts

@@ -0,0 +1,116 @@
+import { RenderTarget, Renderer, Texture } from 'ogl';
+type OGLContext = WebGL2RenderingContext & {
+    renderer: Renderer;
+    canvas: HTMLCanvasElement;
+};
+/**
+ * @interface CustomPostProcessShaderParameters
+ * @description Defines the initial parameters for the CustomPostProcessShader.
+ * @property {number} [distortionIntensity] - Initial intensity of the distortion effect. Defaults to 0.
+ * @property {number} [vignetteOffset] - Initial offset for the vignette effect (0.0 = center, 1.0 = edges). Defaults to 0.8.
+ * @property {number} [vignetteDarkness] - Controls vignette transition smoothness (should be > vignetteOffset). Defaults to 1.0.
+ */
+interface CustomPostProcessShaderParameters {
+    distortionIntensity?: number;
+    vignetteOffset?: number;
+    vignetteDarkness?: number;
+}
+/**
+ * @class CustomPostProcessShader
+ * @description A custom OGL-based post-processing shader for distortion and vignette effects.
+ * It provides animatable properties for these effects via GSAP.
+ */
+export declare class CustomPostProcessShader {
+    private gl;
+    private program;
+    private renderTarget;
+    private mesh;
+    private geometry;
+    private scene;
+    private camera;
+    /**
+     * @private
+     * @property {number} _distortionIntensity - Internal property for distortion intensity, animated by GSAP.
+     */
+    private _distortionIntensity;
+    /**
+     * @private
+     * @property {number} _vignetteOffset - Internal property for vignette offset (0.0-1.0 range), animated by GSAP.
+     */
+    private _vignetteOffset;
+    /**
+     * @private
+     * @property {number} _vignetteDarkness - Internal property for vignette transition end (should be > _vignetteOffset), animated by GSAP.
+     */
+    private _vignetteDarkness;
+    /**
+     * Creates an instance of CustomPostProcessShader.
+     * @param {OGLContext} gl - The OGL WebGL context
+     * @param {CustomPostProcessShaderParameters} [initialParams={}] - Optional initial parameters for the shader effects.
+     */
+    constructor(gl: OGLContext, initialParams?: CustomPostProcessShaderParameters);
+    /**
+     * @property {number} distortionIntensity - Getter/Setter for the distortion intensity.
+     * When set, it updates the shader uniforms.
+     */
+    get distortionIntensity(): number;
+    set distortionIntensity(value: number);
+    /**
+     * @property {number} vignetteOffset - Getter/Setter for the vignette offset.
+     * Controls where the vignette effect starts (0.0 = center, 1.0 = screen edges).
+     * When set, it updates the shader uniforms.
+     */
+    get vignetteOffset(): number;
+    set vignetteOffset(value: number);
+    /**
+     * @property {number} vignetteDarkness - Getter/Setter for the vignette transition end.
+     * Controls where the vignette reaches maximum darkness (should be > vignetteOffset for smooth transition).
+     * When set, it updates the shader uniforms.
+     */
+    get vignetteDarkness(): number;
+    set vignetteDarkness(value: number);
+    /**
+     * @method updateUniforms
+     * @description Updates all relevant uniforms of the shader material based on the current
+     * internal `_distortionIntensity`, `_vignetteOffset`, and `_vignetteDarkness` properties.
+     * This method should be called whenever the internal properties change to reflect
+     * the changes in the shader.
+     */
+    updateUniforms(): void;
+    /**
+     * @method animate
+     * @description Animates the distortion and vignette parameters using GSAP.
+     * @param {number} targetDistortion - The target distortion intensity value.
+     * @param {number} targetVignetteOffset - The target vignette offset value.
+     * @param {number} targetVignetteDarkness - The target vignette darkness value.
+     * @param {number} [duration=1] - The duration of the animation in seconds.
+     * @param {number} [delay=0] - The delay before the animation starts in seconds.
+     * @param {string} [ease='power2.out'] - The GSAP ease function to use for the animation.
+     */
+    animate(targetDistortion: number, targetVignetteOffset: number, targetVignetteDarkness: number, duration?: number, delay?: number, ease?: string): void;
+    /**
+     * @method setInputTexture
+     * @description Sets the input texture for post-processing
+     * @param {any} texture - The input texture (usually from a RenderTarget)
+     */
+    setInputTexture(texture: Texture): void;
+    /**
+     * @method render
+     * @description Renders the post-processing effect to the specified target or screen
+     * @param {RenderTarget | null} target - The render target (null for screen)
+     */
+    render(target?: RenderTarget | null): void;
+    /**
+     * @method resize
+     * @description Resizes the render target when the canvas size changes
+     * @param {number} width - New width
+     * @param {number} height - New height
+     */
+    resize(width: number, height: number): void;
+    /**
+     * @method dispose
+     * @description Cleans up WebGL resources
+     */
+    dispose(): void;
+}
+export {};

package/dist/types/components/InfiniteGridComp/component/createTexture.d.ts

@@ -0,0 +1,99 @@
+import { Texture, Renderer } from 'ogl';
+/**
+ * Represents the data structure for a single card/tile
+ * This interface must match the CardData interface in InfiniteGridClass.ts
+ */
+interface CardData {
+    /** The main title text displayed prominently on the card */
+    title: string;
+    /** Badge text (currently not implemented in the rendering pipeline) */
+    badge: string;
+    /** Detailed description text for the card content (optional) */
+    description?: string;
+    /** Array of tag strings that will be displayed as styled pills */
+    tags: string[];
+    /** Date string displayed in the bottom-right corner */
+    date: string;
+    /** Optional image URL - falls back to '/photo.png' if not provided */
+    image?: string;
+}
+/**
+ * Generates the foreground texture for a card using Canvas 2D API
+ *
+ * This function creates the main visible content of each card including:
+ * - Title text with automatic truncation and ellipsis
+ * - Main image with aspect ratio preservation and centering
+ * - Styled tag pills at the bottom
+ * - Date text in the bottom-right corner
+ * - Border outline around the entire card
+ *
+ * The generated texture is used for the front-facing mesh that users
+ * can interact with (hover and click).
+ *
+ * @param data - Card data containing title, image, tags, date, etc.
+ * @param renderer - OGL Renderer for texture creation
+ * @returns Promise resolving to an OGL Texture
+ *
+ * @example
+ * ```typescript
+ * const cardData = {
+ *   title: "Amazing Project",
+ *   image: "/images/project.jpg",
+ *   tags: ["web", "ogl"],
+ *   date: "2024",
+ *   badge: "NEW",
+ *   description: "A cool project"
+ * };
+ * const texture = await generateForegroundTexture(cardData, renderer);
+ * ```
+ */
+export declare function generateForegroundTexture(data: CardData, renderer: Renderer): Promise<Texture>;
+/**
+ * Generates the background texture for a card using Canvas 2D API
+ *
+ * This function creates a blurred, darkened version of the card's image
+ * that serves as the background layer visible during hover effects.
+ * The background provides visual depth and context while maintaining
+ * readability of the foreground content.
+ *
+ * Processing steps:
+ * 1. Loads the same image used in the foreground
+ * 2. Scales it up for better blur coverage
+ * 3. Applies canvas blur filter
+ * 4. Adds a semi-transparent dark overlay
+ * 5. Falls back to solid color if image loading fails
+ *
+ * @param data - Card data containing the image URL
+ * @param renderer - OGL Renderer for texture creation
+ * @returns Promise resolving to an OGL Texture for background layer
+ *
+ * @example
+ * ```typescript
+ * const backgroundTexture = await generateBackgroundTexture(cardData, renderer);
+ * // Use this texture for the background mesh with shader material
+ * ```
+ */
+export declare function generateBackgroundTexture(data: CardData, renderer: Renderer): Promise<Texture>;
+/**
+ * Convenience function to generate both foreground and background textures
+ *
+ * This function generates both texture types in parallel for efficiency.
+ * While the individual generation functions are typically used separately
+ * in the main grid system, this function can be useful for testing or
+ * simpler use cases.
+ *
+ * @param data - Card data for texture generation
+ * @param renderer - OGL Renderer for texture creation
+ * @returns Promise resolving to an object with both texture types
+ *
+ * @example
+ * ```typescript
+ * const { foreground, background } = await generateCardTextures(cardData, renderer);
+ * // Use foreground for main mesh, background for hover effect
+ * ```
+ */
+export declare function generateCardTextures(data: CardData, renderer: Renderer): Promise<{
+    foreground: Texture;
+    background: Texture;
+}>;
+export {};

package/dist/types/components/InfiniteGridComp/component/shaders.d.ts

@@ -0,0 +1,4 @@
+export declare const gaussianBlurFragmentShader = "precision highp float;\n\nuniform sampler2D map;\n// uniform float blurAmount; // Removed: Blur amount is now fixed\nuniform vec2 resolution;\nuniform float uOpacity; // New uniform for controlling opacity from JS\n\nvarying vec2 vUv;\n\nvoid main() {\n    vec2 onePixel = vec2(1.0, 1.0) / resolution;\n\n    // Fixed blur amount directly in the shader\n    float fixedBlurAmount = 10.0; // Changed to a fixed value as requested\n\n    vec4 sum = vec4(0.0);\n\n    sum += texture2D(map, vUv + onePixel * vec2(-1.0, -1.0) * fixedBlurAmount) * 0.0625;\n    sum += texture2D(map, vUv + onePixel * vec2( 0.0, -1.0) * fixedBlurAmount) * 0.125;\n    sum += texture2D(map, vUv + onePixel * vec2( 1.0, -1.0) * fixedBlurAmount) * 0.0625;\n    sum += texture2D(map, vUv + onePixel * vec2(-1.0,  0.0) * fixedBlurAmount) * 0.125;\n    sum += texture2D(map, vUv + onePixel * vec2( 0.0,  0.0) * fixedBlurAmount) * 0.25;\n    sum += texture2D(map, vUv + onePixel * vec2( 1.0,  0.0) * fixedBlurAmount) * 0.125;\n    sum += texture2D(map, vUv + onePixel * vec2(-1.0,  1.0) * fixedBlurAmount) * 0.0625;\n    sum += texture2D(map, vUv + onePixel * vec2( 0.0,  1.0) * fixedBlurAmount) * 0.125;\n    sum += texture2D(map, vUv + onePixel * vec2( 1.0,  1.0) * fixedBlurAmount) * 0.0625;\n\n    // Apply the opacity uniform to the alpha channel of the final color\n    gl_FragColor = vec4(sum.rgb, sum.a * uOpacity); // sum.a is usually 1.0 from texture, so multiply by uOpacity\n}";
+export declare const gaussianBlurVertexShader = "\n  attribute vec2 uv;\n  attribute vec3 position;\n  \n  uniform mat4 modelViewMatrix;\n  uniform mat4 projectionMatrix;\n  \n  varying vec2 vUv;\n  \n  void main() {\n    // Flip UV coordinates 180 degrees (both X and Y)\n    vUv = vec2(uv.x, 1.0 - uv.y);\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n";
+export declare const postProcessFragmentShader = "precision highp float;\n\nuniform sampler2D tDiffuse;\nuniform vec2 distortion;\nuniform float vignetteOffset;\nuniform float vignetteDarkness;\n\nvarying vec2 vUv;\n\nvoid main() {\n    vec2 shiftedUv = 2.0 * (vUv - 0.5);\n    float distanceToCenter = length(shiftedUv);\n\n    // Lens distortion effect\n    // NOTE: The original shader had 'distortion * dot(shiftedUv)'.\n    // If distortion is a vec2, dot product will result in a scalar.\n    // If you intend distortion to scale both X and Y independently based on distance,\n    // you might need something like: shiftedUv *= (0.88 + distortion.x * abs(shiftedUv.x) + distortion.y * abs(shiftedUv.y));\n    // For now, I'll keep the dot product as it was in your provided shader,\n    // which applies uniform distortion based on radial distance.\n    shiftedUv *= (0.88 + distortion.x * dot(shiftedUv, shiftedUv)); // Assuming distortion.x controls the scalar distortion factor\n    vec2 transformedUv = shiftedUv * 0.5 + 0.5;\n\n    // Vignette effect\n    // Corrected 'vignetteOffset * 0.799' and '(vignetteDarkness + vignetteOffset)' if that was the intent.\n    // The second parameter to smoothstep is the \"edge\" where it starts.\n    // I'll interpret your intent as scaling the effect based on a combined factor.\n    float vignetteIntensity = smoothstep(vignetteOffset, vignetteDarkness, distanceToCenter); // Simplified as common vignette\n    // If your original intention for vignette was 'smoothstep(0.8, vignetteOffset * 0.799, (vignetteDarkness + vignetteOffset) * distanceToCenter);'\n    // this would be a more complex interaction. Let's start with a standard vignette.\n\n    // Sample render texture and output fragment\n    vec3 color = texture2D(tDiffuse, transformedUv).rgb * (1.0 - vignetteIntensity); // Apply darkening based on intensity\n    // The original '* vignetteIntensity' would brighten. Vignettes usually darken.\n    // If you want a more subtle darkening, adjust the '(1.0 - vignetteIntensity)''.\n    gl_FragColor = vec4(color, 1.);\n}";
+export declare const postProcessVertexShader = "\nattribute vec2 uv;\nattribute vec3 position;\n\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nvarying vec2 vUv;\n\nvoid main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}";