V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoiver
V2EX  ›  前端开发

一个简单的无限画布教程

  •  
  •   xiaoiver · 244 天前 · 489 次点击
    这是一个创建于 244 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一些知名产品包括 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/zh/lesson-001

    2 条回复    2024-11-28 10:49:13 +08:00
    daolanfler
        1
    daolanfler  
       177 天前
    好东西,顶一下!值得被更多人看到
    zzq825924
        2
    zzq825924  
       28 天前
    太牛了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1072 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:16 · PVG 03:16 · LAX 11:16 · JFK 14:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.