无限画布教程
一份通过 WebGL1/2 和 WebGPU 实现高性能渲染的无限画布教程，旨在帮助开发者理解并实现类似 Figma、Modyfi 等产品的渲染技术。
• Copy the embed code to showcase this product on your website
• Share on X to spread the word about this amazing tool
一些知名产品包括 Figma、Modyfi、rnote、tldraw、excalidraw等等都会使用无限画布。作为一个前端，我对其中涉及到的渲染技术很感兴趣。尽管 tldraw、excalidraw 等普遍使用易用性更高的 Canvas2D / SVG 技术，但 JS 和 Rust 生态中也有很多编辑器、设计工具使用更底层的渲染技术对 2D 图形进行 GPU 加速，以获得更好的性能和体验，例如：* Figma 使用 C++ 编写了一个 tile-based 的渲染引擎，编译成 WASM 后调用 WebGL 渲染* Modyfi 使用了 Rust 生态中的 wgpu，同样编译成 WASM 后调用 WebGL2 渲染因此我想通过一份教程一步步实现一个简单的无限画布，主要通过 WebGL1/2 和 WebGPU 实现高性能渲染。目前写了 7 小节，希望能得到大家的支持和鼓励。这是教程地址：https://infinitecanvas.cc/