V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
acbox
V2EX  ›  分享创造

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

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

    创作背景

    在我九年级的时候,我们班主任是数学老师,有一次上课,他掏出了他的清朝保存下来的幻灯片,其中包含有一个 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

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

    24 条回复
    acbox
        1
    acbox  
    OP
       209 天前
    可以给我们一个 Star 支持一下 qwq
    cydian
        2
    cydian  
       209 天前
    我 Chrome 打开 playground 里面的 demo 有卡顿 动画不丝滑 掉帧
    acbox
        3
    acbox  
    OP
       209 天前
    @cydian 那个东西暂时没有开发好,等一个星期后就行了
    acbox
        4
    acbox  
    OP
       209 天前
    @cydian 你可以把代码克隆到本地,里面有个 examples 目录,用 vite 启动它就行了
    cydian
        5
    cydian  
       209 天前   ❤️ 1
    感觉有前景,希望尽快完善在线 demo ,有一个完善的 demo 列表能很好地促进项目发展
    Leon6868
        6
    Leon6868  
       209 天前   ❤️ 4
    完成度如此高,非常有意思的作品,期待添加更多的 demo 。回首几年前高中时代的自己,实在羞愧难当。
    Leon6868
        7
    Leon6868  
       209 天前
    对于普通用户来说,增加一个图形化编辑器能极大地扩大用户面
    acbox
        8
    acbox  
    OP
       209 天前
    @Leon6868 图形化编辑器我们也在制作,只不过我们需要先把 1.0.0 发布了,现在还在 alpha 预发布阶段
    yanyao233
        9
    yanyao233  
       209 天前 via Android
    高中...羞愧难当///
    acbox
        10
    acbox  
    OP
       209 天前 via Android
    playground 暂时有问题,暂时不要用
    LHRUN
        11
    LHRUN  
       209 天前   ❤️ 1
    已 Star, 需要更多的 demo +1 , 没有示例不太有兴趣深入了解
    iMusic
        12
    iMusic  
       209 天前
    强嘞我滴乖乖
    xjngbla
        13
    xjngbla  
       209 天前
    是高中生我吃
    suyuyu
        14
    suyuyu  
       208 天前
    对高中生表示怀疑 (
    tyzandhr
        15
    tyzandhr  
       208 天前 via Android
    强而有力,强而有力口牙!
    nexmoe
        16
    nexmoe  
       208 天前
    支持
    7gugu
        17
    7gugu  
       208 天前
    看起来不错,希望能看到更多 demo
    acbox
        18
    acbox  
    OP
       208 天前
    @suyuyu 但是我们真的是(((
    chesha1
        19
    chesha1  
       207 天前
    请问文档站用的是什么主题,挺好看的
    zy0829
        20
    zy0829  
       207 天前
    经常能在 b 站看到你直播
    acbox
        21
    acbox  
    OP
       207 天前 via Android
    @chesha1 就是默认主题啊
    chesha1
        22
    chesha1  
       207 天前
    @acbox 哦不是,我说错了,我想问文档站用的是什么框架(类似 vuepress ,mkdocs )
    acbox
        23
    acbox  
    OP
       207 天前   ❤️ 1
    @chesha1 用的 vitepress, 记住是 vitepress 不是 vuepress
    mynameisSimple
        24
    mynameisSimple  
       205 天前
    感觉不像是高中生
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3557 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 04:59 · PVG 12:59 · LAX 20:59 · JFK 23:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.