前端界的 Manim? 一群高中生开发的动画引擎——Newcar

39次阅读

共计 891 个字符,预计需要花费 3 分钟才能阅读完成。

创作背景

在我九年级的时候,我们班主任是数学老师,有一次上课,他掏出了他的清朝保存下来的幻灯片,其中包含有一个 flash 动画演示。但是我们刚换了教学屏幕,没有装 flash,作为班里的电脑管理员,我也不允许 flash 这种漏洞多端的东西出现在电脑上,于是,我就在想,能不能使用 JavaScript 来开发一个原生的 H5 动画引擎

那天以后吗,我便开始构思,并开始与团队内部成员讨论这件事。十二月底,因为疫情刚刚放开,各个学校纷纷改为网课,我也获得了足够的空闲时间,于是,我带领着团队里的前端主力开始了 Newcar 动画引擎的开发

发展历程

Newcar 初版是基于原生 Canvas2D 的,没有使用任何优化算法,就是单单的把数据渲染到画布上

后来我们便想过使用 WebGL 来替代,于是我开始疯狂学图形学。但一个普通的高一学生怎么可能学得会呢?虽然我们后来短暂的添加了 WebGL2D 支持,但是依然没有解决根本的性能问题——按需渲染

随后我们发现了 Skia 图形库的 WebAssembly 版本——CanvasKit-WASM. 在看完《Vue3 设计与实现》这本书后,我也从中得到了启发,将 diff 算法移植到了 Newcar 上,现在的 Newcar 可以按需更新,有了 Skia 强大后台的支持,Newcar 的渲染性能基本上不用担心了

特点

  1. 高度可自定义化的 API

  2. 链式语法,区别于传统动画引擎和游戏引擎需要将物体保存为变量的方式,链式语法会让开发效率更高

  3. 拥有类似于 Vue 的 diff 算法的内核,进一步保证了动画的效率和“按需更新”的进行

  4. 多平台,可以在现代支持 WebAssembly 的浏览器上和 nodejs 上运行

截至今日,Newcar 已经可以做出一些 Manim 做不到的动画,比如各种统计图表,Markdown 的解析渲染等等。未来,我们会添加更多的官方 mod 使我们的功能更加强大。也欢迎大家的贡献,不管是对内核也好,周边生态也好,我们都希望你能参与进来

Preview

点击跳转到哔哩哔哩演示视频

正文完
 0