我正在写一份无限画布教程

xiaoiver · 昨天 08:13 · 1958 次点击

你一定见过甚至使用过各种包含无限画布的应用,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

举报· 1958 次点击
登录 注册 站外分享
18 条回复  
zhangchaojie 初学 昨天 16:14
强,star 了
terito11122 初学 昨天 13:58
太强了 学习下
maoxianCk 初学 昨天 13:48
强,支持大佬
xiaoiver 楼主 初学 昨天 10:51
@Chiqing 这个用的是 VitePress 生成的,默认主题
sankemao 小成 昨天 10:44
之前写画布应用的时候参考过
Chiqing 小成 昨天 10:35
想问问佬,这种教程网站是有模板的吗,感觉看过几次类似风格的
Daru 初学 昨天 10:24
太強了,正好需要這個,收藏了
boyzhang 初学 昨天 09:41
很强啊,收藏了,有空就学习下
Hanser002 小成 昨天 09:40
太赞了!最近正好在研究 webGPU
12下一页
返回顶部