DOCSEARCHbyAlgolia
Submit Docs

Infinite Canvas Documentation

website·Indexed 31 days ago

https://infinitecanvas.cc

A comprehensive guide and reference for building an infinite canvas application. It covers 2D and 3D rendering techniques using the vello engine and GPU compute shaders, ECS architecture, vector networks, text rendering, and SDF representations for shapes. The documentation includes detailed lessons on performance optimization, AI integration (fal.ai), and plugins for Figma, Mermaid, and draw.io, as well as implementation details for camera states, history management, and coordinate systems.

Tokens
106.3K
Snippets
548
Records
676
Agent score
62%

What's inside Infinite Canvas

  1. Overview of ECS Architecture

    Entity Component System (ECS) is a software pattern that decouples data from logic by breaking a program into three parts:

    • Entities: Unique identifiers (like rows in a database) that are assigned groups of Components.
    • Components: Pure data structures associated with entities (like fields in a database row) containing no processing logic.
    • Systems: The logic that processes entities. A system uses a 'Query' to select all entities that possess a specific set of components and then performs operations on them.

  2. Overview of the 3D Mesh Rendering Architecture

    The 3D rendering system is implemented as a branch within the existing 2D pipeline, allowing 3D meshes to be composited with 2D layers on the same canvas using a shared WebGL/WebGPU context. The MeshPipeline render graph executes passes in the following order: 3D meshes, 3D Gizmos, 2D vectors/grid, and finally post-processing.

    Key system components include:

    • Renderer3DPlugin: Registers 3D components and schedules the GPU cache (MeshPipeline3D), camera coupling (CameraSync), selection/dragging (Pick3D), and transform gizmos (RenderGizmo3D).
    • MeshPipeline3D: Handles drawing 3D content before 2D content, sharing color and depth attachments.
    import {
    App,
    DefaultPlugins,
    DefaultRenderer3DPlugin,
} from '@infinite-canvas-tutorial/ecs';

const app = new App().addPlugins(...DefaultPlugins, DefaultRenderer3DPlugin);
app.run();

  3. Overview of Vello tile-based rendering architecture

    Vello is a GPU tile-based renderer that utilizes compute shaders and WebGPU to achieve high-performance 2D graphics. Unlike traditional mesh-based renderers with O(pixels × shapes) complexity, Vello partitions screen space into tiles, reducing complexity to O(tiles × shapes_per_tile).

    Vello provides three implementation backends:

    1. vello (GPU): Pure GPU compute shader implementation.
    2. vello CPU: CPU-only implementation using multithreading and SIMD.
    3. vello hybrid: A combination of CPU and GPU modes.

    All three implementations share the same core algorithm based on Sparse Strips.

  4. Use the Pencil tool for freehand curves

    The Pencil tool provides a freehand mode that fits splines or subdivided curves rather than dense polylines. This approach is optimized for signatures and sketches, resulting in smaller file sizes compared to polyline exports. For a complete drawing workflow, the Pencil tool should be paired with laser and eraser tools.

  5. Understand CRDT concepts for collaborative editing

    Conflict-free Replicated Data Types (CRDTs) are data structures that allow multiple computers in a network to update replicas independently and in parallel without coordination, guaranteeing eventual consistency. Under the CAP theorem, CRDTs prioritize Availability and Partition Tolerance (A + P) over immediate consistency.

    There are two primary types of CRDTs:

    1. Op-based: Synchronizes a sequence of operations. If all users execute the same sequence, they reach the same state. This requires handling operation order and idempotency.
    2. State-based: Synchronizes the entire state between nodes. Implementation is simpler, often utilizing a merge function that must be associative, commutative, and idempotent (e.g., a Last-Writer Wins (LWW) Register).

  6. Publish a headless-gl layer to AWS Lambda

    After building the headless-gl-layer.zip archive, use the AWS CLI to publish the layer version. Ensure the compatible runtime is set to nodejs20.x and the architecture to arm64.
    aws lambda publish-layer-version \
  --layer-name headless-gl-layer \
  --description "Headless GL for Node.js on AL2 arm64" \
  --compatible-runtimes nodejs20.x \
  --compatible-architectures arm64 \
  --content S3Bucket=<your-bucket>,S3Key=headless-gl-layer.zip

  7. Translate GLSL shaders to WGSL at runtime

    To avoid maintaining separate shader codebases for WebGL (GLSL) and WebGPU (WGSL), the system uses a runtime translation pipeline. Shaders are written in GLSL 300 syntax, converted to GLSL 440, and then processed by a WASM-based compiler (using naga and naga-oil) into WGSL for WebGPU targets.

  8. Understand the core concepts of an Infinite Canvas

    An infinite canvas is characterized by three primary capabilities:

    1. High Scalability: Allows users to organize content structures in a non-linear fashion.
    2. Zooming: Emulates real-world behavior by zooming in for detail and zooming out for a high-level overview.
    3. Direct Manipulation: Provides intuitive editing for basic shapes, including moving, grouping, and style modification.

  9. Manage scene graph order with fractional indexing

    To handle the ordering of elements in a collaborative scene graph without constant re-indexing, use fractional indexing. This allows elements to be inserted between two existing elements by assigning a value between their respective indices, avoiding conflicts during concurrent edits.

  10. Replace a rendering pipeline with a Vello-based ECS plugin

    Because Vello is a pure 2D renderer, high-level features like viewport culling and spatial indexing must be implemented by the application. In an ECS architecture, you can swap the default rendering systems for Vello-based implementations by configuring a RendererPlugin and replacing the DefaultRendererPlugin in the plugin stack.
    import {
    DefaultPlugins,
    DefaultRendererPlugin,
    RendererPlugin,
} from '@infinite-canvas-tutorial/ecs';

const VelloRendererPlugin = RendererPlugin.configure({
    setupDeviceSystemCtor: InitVello,
    rendererSystemCtor: VelloPipeline,
});

DefaultPlugins.splice(
    DefaultPlugins.indexOf(DefaultRendererPlugin),
    1,
    VelloRendererPlugin,
);

  11. Implement advanced text shaping using HarfBuzz

    HarfBuzz is the industry-standard text shaper used to implement complex typography features such as ligatures, kerning, and script-specific shaping rules. It moves beyond simple codepoint-to-glyph mapping to ensure correct visual rendering of text across different languages and scripts. To optimize performance and keep initial bundle sizes small, it is recommended to ship HarfBuzz as a WASM build with lazy loading.

  12. Implement a Tree diagram layout

    Tree layouts provide a subset of graph drawing using deterministic passes to arrange nodes. This layout is distinct from FlexTree, which uses different spacing policies. To optimize readability, developers should tune the node size and rank spacing.