Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【文章自荐】一份无限画布教程 #4358

Open
xiaoiver opened this issue Apr 25, 2024 · 0 comments
Open

【文章自荐】一份无限画布教程 #4358

xiaoiver opened this issue Apr 25, 2024 · 0 comments

Comments

@xiaoiver
Copy link

一些知名产品包括 FigmaModyfirnotetldrawexcalidraw等等都会使用无限画布。

作为一个前端,我对其中涉及到的渲染技术很感兴趣。尽管 tldrawexcalidraw 等普遍使用易用性更高的 Canvas2D / SVG 技术,但 JS 和 Rust 生态中也有很多编辑器、设计工具使用更底层的渲染技术对 2D 图形进行 GPU 加速,以获得更好的性能和体验,例如:

  • Figma 使用 C++ 编写了一个 tile-based 的渲染引擎,编译成 WASM 后调用 WebGL 渲染
  • Modyfi 使用了 Rust 生态中的 wgpu,同样编译成 WASM 后调用 WebGL2 渲染

因此我想通过一份教程一步步实现一个简单的无限画布,主要通过 WebGL1/2 和 WebGPU 实现高性能渲染。
目前写了 7 小节,希望能得到大家的支持和鼓励。

这是教程地址:https://infinitecanvas.cc/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant