你一定见过甚至使用过各种包含无限画布的应用，infinitecanvas 上就展示了从设计工具到创意画板在内的众多案例，其中不乏一些知名产品包括 Figma 、Modyfi 、Motiff 、rnote 、tldraw 、excalidraw 等等。
作为一个前端，我对其中涉及到的渲染技术很感兴趣。尽管 tldraw 、excalidraw 等普遍使用易用性更高的 Canvas2D / SVG 技术，但 JS 和 Rust 生态中也有很多编辑器、设计工具使用更底层的渲染技术对 2D 图形进行 GPU 加速，以获得更好的性能和体验。
因此在这个教程中，我希望实现以下特性：
- 使用支持 WebGL1/2 和 WebGPU 的硬件抽象层。
- 使用 SDF 渲染圆、椭圆、矩形等。
- GPU 加速的文本和贝塞尔曲线渲染。
- 使用 rough.js 支持手绘风格。
- 使用 CRDT 支持协同 Yjs 。
目前已经写了十多章了，希望得到更多关注！
19 条回复 • 2025-03-18 18:01:43 +08:00
 |
1
chingli 3 天前 via Android
这个也太强了，现代计算机绘图技术之集大成，一定认真学习。
|
 |
2
shilianmlxg 3 天前 via iPhone
tql 正好现在在学可视化拖拽
|
 |
4
Rrrrrr 3 天前
先 收藏 再看
|
 |
5
kenberkeley 3 天前 via iPhone
请收下我的膝盖。
|
 |
6
rekulas 3 天前
写图形的都是大佬
|
 |
7
enchilada2020 3 天前 via Android
大佬🐮🍺 已 star 不过好像有点太硬核了 在线求一份 Canvas/SVG 制作画布的教程…
|
 |
8
SayHelloHi 3 天前
在线求一份 Canvas/SVG 制作画布的教程 +1
|
 |
9
sakura0508 3 天前
🐮🍺 先 start 再看
|
 |
10
Hanser002 3 天前
太赞了！最近正好在研究 webGPU
|
 |
11
boyzhang 3 天前
很强啊，收藏了，有空就学习下
|
 |
12
Daru 3 天前
太強了，正好需要這個，收藏了
|
 |
13
Chiqing 3 天前
想问问佬，这种教程网站是有模板的吗，感觉看过几次类似风格的
|
 |
14
sankemao 3 天前
之前写画布应用的时候参考过
|
1 |
16
maoxianCk 2 天前
强，支持大佬
|
 |
17
terito11122 2 天前
太强了 学习下
|
 |
18
zhangchaojie 2 天前
强，star 了
|
 |
19
shui14 2 天前
可以直接放弃 webgl2 。除非锚定 web ，直接 dawn 开发向下兼容到 js 应该更有空间
跨平台，按照现在 llm 的趋势，很快就会有全能 app 出现，imgui 迎来第二波春天，我压宝它 类似的 zed 那个团队的 gpui ，长桥的开发谈到过不过他们是桌面。还有一个香港的团队搞光追也挺有特色 |
Select Language