https://github.com/antvis/infinite-canvas-tutorial
An infinite canvas tutorial
https://github.com/antvis/infinite-canvas-tutorial
Last synced: over 1 year ago
JSON representation
An infinite canvas tutorial
- Host: GitHub
- URL: https://github.com/antvis/infinite-canvas-tutorial
- Owner: antvis
- Created: 2024-05-14T01:52:25.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-14T02:31:30.000Z (about 2 years ago)
- Last Synced: 2025-04-13T06:16:07.692Z (over 1 year ago)
- Language: TypeScript
- Homepage: http://antv.vision/infinite-canvas-tutorial/
- Size: 4.57 MB
- Stars: 11
- Watchers: 8
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# An Infinite Canvas Tutorial
What is an Infinite Canvas? The term "infinite" in [infinitecanvas] is described as follows:
- High scalability. Users can freely organize content structures in a non-linear fashion.
- Zooming. Emulates the "zoom in" to get an overview and "zoom out" to observe details as in the real world.
- Direct manipulation. Provides intuitive editing capabilities for basic shapes, including moving, grouping, and modifying styles.
The [infinitecanvas] showcases numerous examples ranging from design tools to creative boards, including some well-known products such as: [Figma], [Modyfi], [rnote], [tldraw], [excalidraw] and so on.
As a front-end developer, I am very interested in the rendering technologies involved. Although tldraw, excalidraw, and others generally use more user-friendly technologies like Canvas2D/SVG, there are also many editors and design tools in the JS and Rust ecosystems that use more low-level rendering technologies for 2D graphics with GPU acceleration to achieve better performance and experience:
- [Figma] uses a tile-based rendering engine written in C++, compiled into WASM and then calls WebGL for rendering.
- [Modyfi] uses [wgpu] from the Rust ecosystem, also compiled into WASM and then calls WebGL2 for rendering.
- [Zed] uses GPUI to render rectangles, shadows, text, images, and other UI elements.
- [Vello] and [xilem] experimentally use Compute Shader for 2D rendering.
Therefore, in this tutorial, I hope to implement the following features:
- Use [@antv/g-device-api] as a hardware abstraction layer, supporting WebGL1/2 and WebGPU.
- Referencing [mapbox] and [Figma], attempt to use tile-based rendering.
- Use SDF (Signed Distance Field) rendering for circles, ellipses, rectangles, etc.
- GPU-accelerated text and Bezier curve rendering.
- Use [rough.js] to support hand-drawn styles.
- Use CRDT (Conflict-free Replicated Data Type) to support collaborative [Yjs].
Let's get started!
## Getting Started
The course project uses pnpm workspace, so you need to install pnpm first.
```bash
pnpm i
```
After entering the course directory, run [vite]:
```bash
cd packages/lesson_001
pnpm run dev
```
## Lesson 1 - Initialize canvas
- A hardware abstraction layer based on WebGL1/2 and WebGPU.
- Canvas API design.
- Implementing a simple plugin system.
- Implementing a rendering plugin based on the hardware abstraction layer.
## Lesson 2 - Draw a circle
- Adding shapes to the canvas.
- Drawing a circle using SDF.
- Anti Aliasing.
- Dirty flag design pattern.
## Lesson 3 - Scene graph and transform
- Transformations. Make shapes support pan, zoom, rotate, and skew transformations.
- Scene graph.
## Lesson 4 - Camera
- What is a Camera?
- Projection transformation.
- Camera transformation.
- Camera animation. Using Landmark transition between different camera states.
## Lesson 5 - Grid
- Drawing straight lines using Line Geometry or screen-space techniques.
- Drawing dots grid.
## Lesson 6 - Event System
- Implement an event system compatible with DOM Event API.
- How to pick a circle.
- Implement a drag-and-drop plugin based on our event system.
- Support for pinch zoom gestures.
## Lesson 7 - Web UI
- Developing Web UI with Lit and Shoelace
- Implementing a canvas component
- Implementing a zoom toolbar component
# Lesson 8 - Optimize performance
- What is a draw call
- Reducing draw calls with culling
- Reducing draw calls by combining batches
- Using spatial indexing to improve pickup efficiency
[infinitecanvas]: https://infinitecanvas.tools/
[Figma]: https://madebyevan.com/figma/building-a-professional-design-tool-on-the-web/
[Modyfi]: https://digest.browsertech.com/archive/browsertech-digest-how-modyfi-is-building-with/
[rnote]: https://github.com/flxzt/rnote
[tldraw]: https://github.com/tldraw/tldraw
[excalidraw]: https://github.com/excalidraw/excalidraw
[rough.js]: https://github.com/rough-stuff/rough
[zed]: https://zed.dev/blog/videogame
[wgpu]: https://wgpu.rs/
[vello]: https://github.com/linebender/vello
[xilem]: https://github.com/linebender/xilem
[@antv/g-device-api]: https://github.com/antvis/g-device-api
[mapbox]: https://blog.mapbox.com/rendering-big-geodata-on-the-fly-with-geojson-vt-4e4d2a5dd1f2?gi=e5acafcf219d
[Yjs]: https://yjs.dev/