|
你一定见过甚至使用过各种包含无限画布的应用，infinitecanvas 上就展示了从设计工具到创意画板在内的众多案例，其中不乏一些知名产品包括 Figma 、Modyfi 、Motiff 、rnote 、tldraw 、excalidraw 等等。
作为一个前端，我对其中涉及到的渲染技术很感兴趣。尽管 tldraw 、excalidraw 等普遍使用易用性更高的 Canvas2D / SVG 技术，但 JS 和 Rust 生态中也有很多编辑器、设计工具使用更底层的渲染技术对 2D 图形进行 GPU 加速，以获得更好的性能和体验。
因此在这个教程中，我希望实现以下特性：
- 使用支持 WebGL1/2 和 WebGPU 的硬件抽象层。
- 使用 SDF 渲染圆、椭圆、矩形等。
- GPU 加速的文本和贝塞尔曲线渲染。
- 使用 rough.js 支持手绘风格。
- 使用 CRDT 支持协同 Yjs 。
目前已经写了十多章了，希望得到更多关注！
项目地址： https://github.com/xiaoiver/infinite-canvas-tutorial
| 
