DOCSEARCHbyAlgolia
Submit Docs

Infinite Canvas Tutorial

repository·master·Indexed 21 days ago

https://github.com/xiaoiver/infinite-canvas-tutorial

An educational project for building a high-performance, GPU-accelerated infinite canvas. It covers low-level rendering, ECS architecture, and advanced graphics techniques such as SDF and tile-based rendering. The project includes the @antv/g-device-api hardware adaptation layer (HAL) for WebGL1/2 and WebGPU, and integrates with Supabase for authentication and database management via drizzle-orm.

Tokens
235.1K
Snippets
675
Records
1K
Agent score
77%

What's inside infinite-canvas-tutorial

  1. Overview of the Infinite Canvas Tutorial

    master

    The Infinite Canvas Tutorial is a step-by-step guide for building a high-performance 2D graphics rendering implementation using WebGL and WebGPU. It covers a wide range of topics from basic shape rendering to advanced systems like ECS, Render Graphs, and AI integration.

    Core Capabilities

    • High-Performance Rendering: Uses WebGL and WebGPU for underlying graphics.
    • Framework Agnostic UI: UI components are implemented using Web Components.
    • AI Integration: Uses Vercel AI SDK to generate, decompose, and vectorize images.
    • Interactive Documentation: Supports executable code blocks via genji.

  2. Overview of the Infinite Canvas Tutorial

    master

    The Infinite Canvas Tutorial is a technical guide focused on implementing high-performance, GPU-accelerated infinite canvas applications. Unlike standard Canvas2D or SVG approaches, this project explores low-level rendering techniques used by professional tools like Figma and Modyfi.

    Core Technical Stack:

    • Hardware Abstraction: @antv/g-device-api (supporting WebGL1/2 and WebGPU).
    • Architecture: Becsy for a high-performance Entity Component System (ECS).
    • Rendering: SDF (Signed Distance Fields) for basic shapes, GPU-accelerated text, and Bezier curves.
    • Styling: rough.js for hand-drawn aesthetics.
    • Collaboration: Yjs (CRDT) for real-time synchronization.
    • Optimization: Tile-based rendering inspired by Mapbox and Figma.

  4. Overview of the Infinite Canvas Tutorial curriculum

    master

    This tutorial provides a deep dive into building a high-performance infinite canvas using low-level rendering technologies. Key technical concepts covered include:

    • Hardware Abstraction: Using @antv/g-device-api for WebGL1/2 and WebGPU support.
    • ECS Architecture: Implementing scalable systems using Becsy.
    • Rendering Techniques:
      • SDF (Signed Distance Field) for shapes (circles, ellipses, rectangles).
      • GPU-accelerated text and Bezier curve rendering.
      • Tile-based rendering (inspired by Mapbox and Figma).
      • Hand-drawn styles via rough.js.
    • Collaboration: Using CRDTs with Yjs.
    • Advanced Features: Scene graphs, camera systems, event systems (compatible with DOM), spatial indexing for performance, and complex text shaping (BiDi, Arabic, TeX math).

  5. Overview of Vello rendering implementations

    master

    Vello is a GPU tile-based renderer that utilizes compute shaders and WebGPU. It provides three parallel execution modes that share the same core Sparse Strips algorithm:

    1. vello (GPU): A pure GPU compute shader implementation.
    2. vello CPU: A CPU-only implementation utilizing multithreading and SIMD.
    3. vello hybrid: A hybrid mode that combines both CPU and GPU execution.

  7. Current Implementation Status of the Animation Experiment

    master

    The current experimental implementation is in an early stage with the following capabilities:

    • LLM Output: Claude 3.5 Sonnet is used to return a Schema containing graphics and animation descriptions.
    • Rendering Style: Supports a hand-drawn style rendering engine.
    • Animation Engine: Built upon the Web Animations API.
    • Limitations: Currently supports a limited variety of animation types.

  8. Curriculum Roadmap

    master

    The tutorial is structured into progressive lessons covering the following topics:

    • Basics: Canvas initialization, drawing circles (SDF), and scene graphs/transforms.
    • Navigation: Camera implementation (projection/camera transforms) and grid drawing.
    • Interaction: Event systems (picking, dragging, gestures) and Web UI development.
    • Performance: Draw call optimization (culling, batching) and spatial indexing.
    • Advanced Shapes: Ellipses, rectangles, paths (triangulation/fill rules), and hand-drawn styles.
    • Media: Image import/export and rendering.
    • Text Rendering: TextMetrics, shaping (kerning/letter-spacing), SDF/MSDF atlases, BiDi support, and TeX formula rendering.
    • Visual Effects: Gradients (linear, radial, conic, mesh) and patterns.
    • Testing: Unit testing, visual regression (headless-gl/Playwright), and SSR.

  9. Technical roadmap and technologies used in this tutorial

    master

    The tutorial implements an infinite canvas using a modern, high-performance technology stack designed for GPU acceleration. Key technical implementations include:

    • Hardware Abstraction: Uses @antv/g-device-api to support WebGL1, WebGL2, and WebGPU.
    • Rendering Strategy: Employs tile-based rendering (inspired by Mapbox and Figma).
    • Shape Rendering: Uses SDF (Signed Distance Field) rendering for circles, ellipses, and rectangles.
    • Advanced Graphics: GPU-accelerated text and Bezier curve rendering.
    • Styling: Integration of rough.js for hand-drawn/sketch styles.
    • Collaboration: Uses CRDT (Conflict-free Replicated Data Type) via Yjs to support real-time collaborative editing.

  10. Overview of i18n and Theme architecture

    master

    The project uses next-intl for internationalization and next-themes for theme management (Light, Dark, and System).

    Key Files:

    • i18n/request.ts: Handles translation loading and locale validation per request.
    • i18n/routing.ts: Defines the routing strategy and supported locales.
    • i18n/navigation.ts: Provides type-safe navigation helpers.
    • messages/*.json: Contains the actual translation strings.
    • components/providers/theme-provider.tsx: Provides the theme context to the application.
    • proxy.ts: A middleware/proxy that handles both i18n routing (detection/redirection) and Supabase authentication.

  11. Extend components using Web Component slots

    master

    You can make components extensible (like toolbars) by reserving expandable positions using the <slot> element. This allows users to inject their own elements into specific parts of your component tree.

    1. Define a slot in the base component

    In your Lit component, use <slot> with a name attribute to define where content should be placed.

    export class Penbar extends LitElement {
    render() {
        return html`<sp-action-group class="penbar">
            <slot name="penbar-item"></slot>
        </sp-action-group>`;
    }
}

    2. Use the slot in a parent component

    When passing a <slot> through multiple layers of the component tree, ensure the named slot is correctly passed through using the slot attribute in the parent.

    <!-- Inside ic-spectrum-penbar -->
<ic-spectrum-canvas>
    <ic-spectrum-penbar>
        <slot name="penbar-item" slot="penbar-item"></slot>
    </ic-spectrum-penbar>
</ic-spectrum-canvas>

    3. Inject content

    Users can then provide content for that specific slot:

    <ic-spectrum-canvas>
    <ic-spectrum-penbar-eraser slot="penbar-item"><ic-spectrum-penbar-eraser /></ic-spectrum-canvas>
</ic-spectrum-canvas>

  12. Understand Tile-based Rendering principles

    master

    Tile-based rendering improves performance by partitioning screen space into smaller tiles. Instead of a traditional mesh-based approach with complexity O(pixels × shapes), tile-based rendering achieves O(tiles × shapes_per_tile). This is significantly faster because shapes_per_tile is much smaller than the total number of shapes in the scene.

    Key Concept:

    • Traditional Renderer: For every pixel, check all shapes.
    • Tile-based Renderer: For each tile, check only the shapes that intersect that specific tile.

    Note: A potential performance bottleneck occurs when a single massive shape covers the entire screen, as it must be checked against every tile.