textmode.js 0.4.0 → 0.6.0-beta.1

package/dist/types/rendering/webgl/batching/DrawQueue.d.ts

@@ -0,0 +1,89 @@
+import { RenderState } from '../state/RenderState';
+import type { DrawCommand } from '../types/DrawCommand';
+import type { Material } from '../materials/Material';
+import type { RectangleParams, LineParams, EllipseParams, ArcParams, TriangleParams, BezierCurveParams } from '../types/GeometryTypes';
+/**
+ * Global draw queue preserving user-issued draw order across geometry types.
+ *
+ * Performance optimizations:
+ * - Object pooling: Command slots are reused across frames to eliminate allocations
+ * - Direct property assignment: Maintains V8 hidden classes for optimal JIT performance
+ * - Type-specific enqueue methods: Eliminates conditional branching
+ */
+export declare class DrawQueue implements Iterable<DrawCommand> {
+    private _commands;
+    private _nextId;
+    private _size;
+    /** Reserve or reuse a pooled slot */
+    private _acquireSlot;
+    /**
+     * Enqueue a rectangle draw command.
+     * Zero-allocation in steady state (reuses pooled slots).
+     * Direct property assignment preserves V8 hidden classes for optimal performance.
+     *
+     * @param params Rectangle parameters
+     * @param renderState Current render state
+     * @param material Material to use for rendering
+     * @returns Command ID
+     */
+    $enqueueRectangle(params: RectangleParams, renderState: RenderState, material: Material): number;
+    /**
+     * Enqueue a line draw command.
+     * Zero-allocation in steady state (reuses pooled slots).
+     * Direct property assignment preserves V8 hidden classes for optimal performance.
+     *
+     * @param params Line parameters
+     * @param renderState Current render state
+     * @param material Material to use for rendering
+     * @returns Command ID
+     */
+    $enqueueLine(params: LineParams, renderState: RenderState, material: Material): number;
+    /**
+     * Enqueue an ellipse draw command.
+     * Zero-allocation in steady state (reuses pooled slots).
+     * Direct property assignment preserves V8 hidden classes for optimal performance.
+     *
+     * @param params Ellipse parameters
+     * @param renderState Current render state
+     * @param material Material to use for rendering
+     * @returns Command ID
+     */
+    $enqueueEllipse(params: EllipseParams, renderState: RenderState, material: Material): number;
+    /**
+     * Enqueue an arc draw command.
+     * Zero-allocation in steady state (reuses pooled slots).
+     * Direct property assignment preserves V8 hidden classes for optimal performance.
+     *
+     * @param params Arc parameters
+     * @param renderState Current render state
+     * @param material Material to use for rendering
+     * @returns Command ID
+     */
+    $enqueueArc(params: ArcParams, renderState: RenderState, material: Material): number;
+    /**
+     * Enqueue a triangle draw command.
+     * Zero-allocation in steady state (reuses pooled slots).
+     * Direct property assignment preserves V8 hidden classes for optimal performance.
+     *
+     * @param params Triangle parameters
+     * @param renderState Current render state
+     * @param material Material to use for rendering
+     * @returns Command ID
+     */
+    $enqueueTriangle(params: TriangleParams, renderState: RenderState, material: Material): number;
+    /**
+     * Enqueue a bezier curve draw command.
+     * Zero-allocation in steady state (reuses pooled slots).
+     * Direct property assignment preserves V8 hidden classes for optimal performance.
+     *
+     * @param params Bezier curve parameters
+     * @param renderState Current render state
+     * @param material Material to use for rendering
+     * @returns Command ID
+     */
+    $enqueueBezierCurve(params: BezierCurveParams, renderState: RenderState, material: Material): number;
+    /** Clear all queued commands */
+    $clear(): void;
+    /** Iterate in the exact order of insertion */
+    [Symbol.iterator](): Iterator<DrawCommand>;
+}

package/dist/types/rendering/webgl/{VAOManager.d.ts → batching/GeometryAttributeCache.d.ts}

@@ -3,10 +3,10 @@
  * It binds only non-instanced attributes (a_position, a_texCoord). Instanced attributes are
  * still configured by InstanceBatch per draw to keep buffers flexible.
  */
-import type { UnitGeometryData } from './types/GeometryTypes';
-export declare class VAOManager {
-    private readonly _gl;
-    private readonly _cache;
+import type { UnitGeometryData } from '../types/GeometryTypes';
+export declare class GeometryAttributeCache {
+    private _gl;
+    private _cache;
     constructor(gl: WebGL2RenderingContext);
     /** Bind or create a VAO for the given program and geometry key. */
     $bind(program: WebGLProgram, geometryKey: string, unit: UnitGeometryData, geometryBuffer: WebGLBuffer): void;

package/dist/types/rendering/webgl/batching/InstanceAttributeBinder.d.ts

@@ -0,0 +1,87 @@
+import { GLShader } from '../core/Shader';
+/**
+ * Manages WebGL attribute binding and GPU buffer synchronization.
+ *
+ * Responsibilities:
+ * - WebGL buffer creation and management
+ * - GPU data upload (full buffer or sub-buffer updates)
+ * - Attribute location caching per shader program
+ * - Vertex attribute binding/unbinding
+ *
+ * This class is the ONLY one that knows about WebGL state.
+ * It has NO knowledge of instance data layout details (delegates to InstanceAttributeLayout).
+ */
+export declare class InstanceAttributeBinder {
+    private _gl;
+    private _glBuffer;
+    private _bufferCapacity;
+    private _attributeLocationCache;
+    /**
+     * Create a new attribute binder.
+     * @param gl WebGL2 rendering context
+     * @param initialCapacity Initial GPU buffer capacity in instances
+     */
+    constructor(gl: WebGL2RenderingContext, initialCapacity?: number);
+    /**
+     * Create or recreate the WebGL buffer with specified capacity.
+     * @param capacity Buffer capacity in number of instances
+     */
+    private _createBuffer;
+    /**
+     * Recreate GPU buffer with new capacity.
+     * Called when CPU buffer grows beyond current GPU buffer capacity.
+     *
+     * @param newCapacity New capacity in number of instances
+     */
+    recreateBuffer(newCapacity: number): void;
+    /**
+     * Get the current GPU buffer capacity in instances.
+     */
+    get capacity(): number;
+    /**
+     * Upload instance data to GPU buffer.
+     *
+     * Performance-critical: This uploads data to the GPU every frame.
+     * Optimizations applied:
+     * - Only uploads used portion of buffer (not full capacity)
+     * - Uses bufferSubData for partial updates (faster than bufferData)
+     * - Binds buffer once and keeps it bound for attribute setup
+     *
+     * Pattern follows modern graphics engines (three.js, babylon.js):
+     * - Minimize data transfer size
+     * - Avoid redundant buffer bindings
+     * - Use streaming pattern for per-frame data
+     *
+     * @param data Float32Array containing instance data to upload
+     * @param instanceCount Number of instances in the data
+     */
+    upload(data: Float32Array, instanceCount: number): void;
+    /**
+     * Get cached attribute locations for a shader program.
+     * Queries locations once per program and caches them for performance.
+     *
+     * @param program WebGL shader program
+     * @returns Map of attribute name to location
+     */
+    private _getAttributeLocations;
+    /**
+     * Bind instance buffer and configure vertex attributes for instanced rendering.
+     *
+     * IMPORTANT: Assumes instance buffer is already bound to gl.ARRAY_BUFFER from upload().
+     * If upload() was not called immediately before this, the buffer will not be bound correctly.
+     * The buffer remains bound after this call for use by the draw command.
+     *
+     * @param shader The shader program to bind attributes for
+     */
+    bindAttributes(shader: GLShader): void;
+    /**
+     * Unbind instance attributes to clean up WebGL state.
+     *
+     * @param shader The shader program to unbind attributes for
+     */
+    unbindAttributes(shader: GLShader): void;
+    /**
+     * Dispose of WebGL resources.
+     */
+    dispose(): void;
+}

package/dist/types/rendering/webgl/{InstanceBatch.d.ts → batching/InstanceBatch.d.ts}

@@ -1,26 +1,32 @@
 import type { InstanceData } from './InstanceData';
-import { GLShader } from './Shader';
+import { GLShader } from '../core/Shader';
+import { type InstanceWriteData } from './InstanceWriter';
+export type { InstanceWriteData };
 /**
  * High-performance instance batch manager for WebGL instanced rendering.
- * Handles efficient buffer management, automatic capacity growth, and WebGL attribute setup.
+ *
+ * This is a facade that orchestrates three specialized components:
+ * - InstanceBuffer: CPU-side memory management
+ * - InstanceWriter: Zero-allocation instance data writing
+ * - InstanceAttributeBinder: WebGL state and attribute binding
  *
  * Features:
+ * - Direct Float32Array writing (zero allocations per instance)
  * - Automatic buffer growth with configurable growth factor
- * - Double buffering for smooth updates
  * - Efficient sub-buffer updates for animated content
  * - Optimized WebGL attribute binding
- * - Memory pooling to reduce garbage collection
+ * - Struct-of-arrays layout for maximum GPU efficiency
+ *
+ * Architecture:
+ * This class maintains the same public API as before but delegates work
+ * to specialized components. This improves maintainability and testability
+ * while preserving performance.
  */
 export declare class InstanceBatch {
     private _gl;
-    private _instances;
-    private _capacity;
-    private _growthFactor;
-    private _instanceBuffer;
-    private _needsUpload;
-    private _lastUploadedCount;
-    private _attributeLocationCache;
-    private _packedDataCache;
+    private readonly _buffer;
+    private readonly _writer;
+    private readonly _binder;
     /**
      * Creates a new instance batch.
      * @param gl WebGL2 rendering context
@@ -29,11 +35,17 @@ export declare class InstanceBatch {
      */
     constructor(gl: WebGL2RenderingContext, initialCapacity?: number, growthFactor?: number);
     /**
-     * Add a new instance to the batch.
+     * Add a new instance to the batch (legacy object-based path).
      * @param instance Instance data to add
      * @returns Index of the added instance
      */
     $addInstance(instance: InstanceData): number;
+    /**
+     * Write instance data directly to the buffer (zero-allocation fast path).
+     * @param data Instance write data
+     * @returns Index of the written instance
+     */
+    $writeInstance(data: InstanceWriteData): number;
     /**
      * Get the current number of instances in the batch.
      */
@@ -46,27 +58,6 @@ export declare class InstanceBatch {
      * Clear all instances from the batch.
      */
     clear(): void;
-    /**
-     * Ensure buffer capacity can handle the specified number of instances.
-     * Automatically grows buffer if needed.
-     * @param requiredInstances Number of instances that need to fit
-     */
-    private _ensureCapacity;
-    /**
-     * Create or recreate the WebGL instance buffer.
-     */
-    private _createBuffer;
-    /**
-     * Upload instance data to GPU buffer.
-     * Uses efficient sub-buffer updates when possible.
-     */
-    $upload(): void;
-    /**
-     * Get cached attribute locations for a shader program.
-     * @param program WebGL shader program
-     * @returns Map of attribute name to location
-     */
-    private _getAttributeLocations;
     /**
      * Bind instance buffer and configure vertex attributes for instanced rendering.
      * @param shader The shader program to bind attributes for

package/dist/types/rendering/webgl/batching/InstanceBuffer.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Manages raw Float32Array buffer with automatic capacity growth.
+ *
+ * Responsibilities:
+ * - Memory allocation and reallocation
+ * - Capacity management with configurable growth factor
+ * - Write pointer tracking
+ * - Buffer access for GPU upload
+ *
+ * This class has NO knowledge of WebGL or GPU state.
+ * It's purely a CPU-side memory manager.
+ */
+export declare class InstanceBuffer {
+    private _buffer;
+    private _capacity;
+    private _growthFactor;
+    private _writeIndex;
+    private _instanceCount;
+    /**
+     * Create a new instance buffer.
+     * @param initialCapacity Initial capacity in number of instances
+     * @param growthFactor Multiplier for capacity growth (default: 1.5)
+     */
+    constructor(initialCapacity?: number, growthFactor?: number);
+    /**
+     * Ensure buffer has capacity for the specified number of instances.
+     * Automatically grows buffer if needed, preserving existing data.
+     *
+     * @param requiredInstances Number of instances that need to fit
+     */
+    ensureCapacity(requiredInstances: number): void;
+    /**
+     * Get write pointer for direct buffer writing.
+     * Returns the current buffer and offset for zero-allocation writes.
+     *
+     * @returns Object containing buffer reference and current write offset
+     */
+    getWritePointer(): {
+        buffer: Float32Array;
+        offset: number;
+    };
+    /**
+     * Commit a write operation, advancing the write pointer.
+     * Call this after writing floats to the buffer obtained from getWritePointer().
+     *
+     * @param floatsWritten Number of floats written (should be FLOATS_PER_INSTANCE)
+     */
+    commitWrite(floatsWritten: number): void;
+    /**
+     * Reset buffer to empty state.
+     * Does not deallocate memory, just resets write pointer.
+     */
+    reset(): void;
+    /**
+     * Get a subarray of the buffer containing used data.
+     *
+     * @param start Starting float index (default: 0)
+     * @param end Ending float index (default: current write position)
+     * @returns Float32Array view of the specified range
+     */
+    subarray(start?: number, end?: number): Float32Array;
+    /**
+     * Get the number of instances currently in the buffer.
+     */
+    get instanceCount(): number;
+    /**
+     * Get the current buffer capacity in instances.
+     */
+    get capacity(): number;
+    /**
+     * Get the current write index in floats.
+     */
+    get writeIndex(): number;
+    /**
+     * Check if buffer is empty.
+     */
+    get isEmpty(): boolean;
+}

package/dist/types/rendering/webgl/{InstanceData.d.ts → batching/InstanceData.d.ts}

@@ -8,12 +8,13 @@ export interface InstanceData {
     _character: [number, number, number];
     _charColor: [number, number, number, number];
     _cellColor: [number, number, number, number];
-    _charRotation: [number, number];
+    _charRotation: number;
     _charTransform: [number, number, number];
-    _rotationX: number;
-    _rotationY: number;
-    _rotationZ: number;
-    _rotationCenter: [number, number];
+    _translation: [number, number, number];
+    _rotation: [number, number, number];
+    _depth?: number;
+    _baseZ?: number;
+    _geometryType?: number;
     _arcAngles?: [number, number];
     _bezierControlPoint1?: [number, number];
     _bezierControlPoint2?: [number, number];
@@ -24,30 +25,22 @@ export interface InstanceData {
  * Optimized packed instance data layout for GPU upload.
  * Designed for efficient WebGL attribute binding and minimal memory usage.
  *
- * Total size: 132 bytes per instance (with Arc + Bezier support)
- * Layout designed to minimize GPU bandwidth and maximize cache efficiency.
+ * Total size: 144 bytes per instance (with Arc + Bezier + Translation + 3D support + Geometry Type)
  */
 export declare class PackedInstanceData {
-    static readonly BYTES_PER_INSTANCE = 140;
-    static readonly FLOATS_PER_INSTANCE = 35;
+    static readonly BYTES_PER_INSTANCE = 144;
+    static readonly FLOATS_PER_INSTANCE = 36;
     /**
      * Pack instance data into a Float32Array for efficient GPU upload.
-     * @param instance The instance data to pack
-     * @param target Optional target array to write into (for reuse)
-     * @param offset Offset in the target array to start writing
-     * @returns Float32Array containing packed instance data
      */
     static $pack(instance: InstanceData, target?: Float32Array, offset?: number): Float32Array;
     /**
      * Pack multiple instances into a single Float32Array for batch upload.
-     * @param instances Array of instance data to pack
-     * @returns Float32Array containing all packed instance data
      */
-    static $packBatch(instances: InstanceData[]): Float32Array;
+    static $packBatch(instances: InstanceData[], targetBuffer?: Float32Array): Float32Array;
 }
 /**
  * WebGL attribute configuration for instance data.
- * Defines how packed instance data maps to vertex shader attributes.
  */
 export interface InstanceAttributeConfig {
     location: number;
@@ -62,6 +55,6 @@ export interface InstanceAttributeConfig {
  * Pre-configured attribute layouts for efficient WebGL setup.
  */
 export declare class InstanceAttributeLayout {
-    static readonly STRIDE = 140;
+    static readonly STRIDE = 144;
     static readonly ATTRIBUTES: Record<string, InstanceAttributeConfig>;
 }

package/dist/types/rendering/webgl/batching/InstanceWriter.d.ts

@@ -0,0 +1,70 @@
+import type { InstanceBuffer } from './InstanceBuffer';
+/**
+ * Data structure for direct instance writing (zero-allocation hot path).
+ * All fields are primitives to avoid object creation during rendering.
+ */
+export interface InstanceWriteData {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    char0: number;
+    char1: number;
+    char2: number;
+    r1: number;
+    g1: number;
+    b1: number;
+    a1: number;
+    r2: number;
+    g2: number;
+    b2: number;
+    a2: number;
+    invert: number;
+    flipX: number;
+    flipY: number;
+    charRot: number;
+    translationX: number;
+    translationY: number;
+    translationZ: number;
+    rotationX: number;
+    rotationY: number;
+    rotationZ: number;
+    curveParams0: [number, number, number, number];
+    curveParams1: [number, number, number, number];
+    depth: number;
+    baseZ: number;
+    geometryType: number;
+}
+/**
+ * High-performance instance writer for zero-allocation rendering.
+ *
+ * Responsibilities:
+ * - Direct Float32Array writing without intermediate allocations
+ * - Instance data packing according to GPU layout
+ * - Write coordination with InstanceBuffer
+ *
+ * This class knows about the instance data layout but has NO knowledge
+ * of WebGL, GPU buffers, or attribute binding.
+ */
+export declare class InstanceWriter {
+    private _buffer;
+    /**
+     * Create a new instance writer.
+     * @param buffer The buffer to write instances into
+     */
+    constructor(buffer: InstanceBuffer);
+    /**
+     * Write instance data directly to the buffer (zero-allocation fast path).
+     *
+     * This is the hot path for rendering - optimized for minimal overhead.
+     * Writes directly to Float32Array without any intermediate allocations.
+     *
+     * @param data Instance write data
+     * @returns Index of the written instance
+     */
+    writeInstance(data: InstanceWriteData): number;
+    /**
+     * Get the current number of instances written.
+     */
+    get instanceCount(): number;
+}

package/dist/types/rendering/webgl/{Framebuffer.d.ts → core/Framebuffer.d.ts}

@@ -1,4 +1,6 @@
 import type { GLRenderer } from './Renderer';
+import type { Material } from '../materials/Material';
+import type { IFramebuffer } from './interfaces/IFramebuffer';
 export type FramebufferOptions = {
     /** Texture filtering mode */
     filter?: 'nearest' | 'linear';
@@ -8,24 +10,39 @@ export type FramebufferOptions = {
     format?: 'rgba' | 'rgb';
     /** Data type for texture data */
     type?: 'unsigned_byte' | 'float';
+    /** Enable depth buffer (defaults to true for 3D support) */
+    depth?: boolean;
+};
+/**
+ * Options for creating a framebuffer.
+ */
+export type TextmodeFramebufferOptions = {
+    /** Width of the framebuffer in grid cells */
+    width: number;
+    /** Height of the framebuffer in grid cells */
+    height: number;
 };
 /**
  * Framebuffer class for managing offscreen rendering targets initialized via {@link Textmodifier.createFramebuffer}.
+ *
+ * `TextmodeFramebuffer` instances contain 3 attachments to support the rendering pipeline:
+ * - Attachment 0: Character and transform data *(RGBA)*
+ * - Attachment 1: Primary color data *(RGBA)*
+ * - Attachment 2: Secondary color data *(RGBA)*
  */
-export declare class GLFramebuffer {
+export declare class GLFramebuffer implements IFramebuffer {
     protected _width: number;
     protected _height: number;
     protected _options: FramebufferOptions;
-    protected _pixels: Uint8Array | null;
     private _gl;
     private _framebuffer;
     private _textures;
+    private _depthRenderbuffer;
     private _attachmentCount;
-    private _previousState;
-    private _attachmentPixels;
     private _renderer;
-    private _isolatedState;
-    private _stateForFBO;
+    private _material;
+    private _pixelCache;
+    private static _copyShader;
     /**
      * Create a new GLFramebuffer instance.
      * @param gl WebGL2 rendering context
@@ -34,28 +51,14 @@ export declare class GLFramebuffer {
      * @param attachmentCount Number of color attachments
      * @param options Framebuffer options
      * @param renderer Optional GLRenderer instance for state management
-     * @param isolatedState Optional flag to isolate framebuffer state from renderer
      * @ignore
      */
-    constructor(gl: WebGL2RenderingContext, width: number, height?: number, attachmentCount?: number, options?: FramebufferOptions, renderer?: GLRenderer | null, isolatedState?: boolean);
+    constructor(gl: WebGL2RenderingContext, width: number, height: number | undefined, attachmentCount: number | undefined, options: FramebufferOptions | undefined, renderer: GLRenderer);
     private _createTextures;
     private _attachTextures;
-    /**
-     * Update the framebuffer texture with canvas or video content
-     * Note: Only updates the first attachment in multi-attachment mode
-     * @ignore
-     */
+    private _createDepthRenderbuffer;
     $update(source: HTMLCanvasElement | HTMLVideoElement): void;
-    /**
-     * Resize the framebuffer.
-     * @param width New width
-     * @param height New height
-     */
     resize(width: number, height: number): void;
-    /**
-     * Read pixels from a specific color attachment into an RGBA Uint8Array.
-     * @ignore
-     */
     readPixels(attachmentIndex: number): Uint8Array;
     /**
      * Begin rendering to this framebuffer.
@@ -66,27 +69,22 @@ export declare class GLFramebuffer {
      */
     end(): void;
     /**
-     * Dispose of WebGL resources used by this framebuffer.
-     * This method is idempotent and safe to call multiple times.
+     * Get or create the material for rendering this framebuffer.
+     * @ignore
+     */
+    $getMaterial(): Material;
+    /**
+     * Update the material with current framebuffer textures.
      * @ignore
      */
+    private _updateMaterial;
     $dispose(): void;
-    /** Get the current framebuffer width. */
+    /** Get the width of the framebuffer */
     get width(): number;
-    /** Get the current framebuffer height. */
+    /** Get the height of the framebuffer */
     get height(): number;
-    /**
-     * Get all textures associated with this framebuffer.
-     *
-     * Useful for binding textures for reading in shaders.
-     *
-     * TextmodeFramebuffers have 5 attachments:
-     * - 0: Character colors that encode the character to display via red and green channels
-     * - 1: Character colors
-     * - 2: Cell background colors
-     * - 3: Rotation of each character encoded in red and green channels
-     * - 4: Inversion, horizontal, and vertical flip flags encoded in red, green, blue channels
-     *
-     */
+    /** Get the WebGL textures associated with this framebuffer */
     get textures(): WebGLTexture[];
+    /** Get the number of color attachments in this framebuffer */
+    get attachmentCount(): number;
 }

package/dist/types/rendering/webgl/core/Renderer.d.ts

@@ -0,0 +1,64 @@
+import { GLFramebuffer } from "./Framebuffer";
+import type { FramebufferOptions } from './Framebuffer';
+import { GLShader } from "./Shader";
+import { RenderState } from "../state/RenderState";
+import type { TextmodeImage } from "../../../textmode/loadables/TextmodeImage";
+import type { IRenderer } from "./interfaces/IRenderer";
+export declare class GLRenderer implements IRenderer {
+    private _gl;
+    private _currentShader;
+    private readonly _renderPipeline;
+    private readonly _materialManager;
+    private _renderState;
+    private _drawQueue;
+    private readonly _immediateQuad;
+    private _userShader;
+    private _userUniforms;
+    private _framebufferBindingStack;
+    private _viewportStack;
+    private _currentFramebuffer;
+    private _currentViewport;
+    constructor(gl: WebGL2RenderingContext);
+    /**
+     * Push current framebuffer and viewport state onto the stack.
+     * Used by framebuffer begin() to save state before binding.
+     * @internal
+     */
+    $pushFramebufferState(): void;
+    /**
+     * Pop framebuffer and viewport state from the stack.
+     * Used by framebuffer end() to restore previous state.
+     * @internal
+     */
+    $popFramebufferState(): {
+        framebuffer: WebGLFramebuffer | null;
+        viewport: [number, number, number, number];
+    };
+    /**
+     * Bind a framebuffer and update CPU-side tracking.
+     * @internal
+     */
+    $bindFramebuffer(framebuffer: WebGLFramebuffer | null, width: number, height: number): void;
+    $shader(shader: GLShader): void;
+    $createShader(vertexSource: string, fragmentSource: string): GLShader;
+    $setUserShader(shader: GLShader | null): void;
+    $setUniform(name: string, value: any): void;
+    $setUserUniforms(uniforms: Record<string, any>): void;
+    $createFilterShader(fragmentSource: string): GLShader;
+    $image(source: GLFramebuffer | TextmodeImage, width?: number, height?: number): void;
+    $quad(x: number, y: number, width: number, height: number): void;
+    $rect(width: number, height: number): void;
+    $line(x1: number, y1: number, x2: number, y2: number): void;
+    $ellipse(width: number, height: number): void;
+    $triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
+    $bezierCurve(x1: number, y1: number, cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): void;
+    $arc(width: number, height: number, start: number, stop: number): void;
+    $createFramebuffer(width: number, height: number, attachmentCount?: number, options?: FramebufferOptions): GLFramebuffer;
+    $background(r: number, g?: number, b?: number, a?: number): void;
+    $clear(r?: number, g?: number, b?: number, a?: number): void;
+    $resetViewport(): void;
+    $flushInstances(): void;
+    $dispose(): void;
+    get context(): WebGLRenderingContext;
+    get state(): RenderState;
+}