跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

加餐2 | SpriteJS:我是如何设计一个可视化图形渲染引擎的?

文字排版和布局系统
缓存策略
Web Animation API
标准的DOM事件
DOM底层的API
渲染能力和性能目标
结构图
设计目标
未解决问题
支持的渲染方式
性能优化
适配层设计
特性取舍
新特性
支持的环境
适配层设计
重构代码
跨平台需求
实现特性
设计初衷
对 SpriteJS 未来版本的期待
使用 SpriteJS 实现可视化项目的效果
启发和期待
对图形系统架构的思考和取舍
设计发展过程
SpriteJS 的未来版本(2020年~2021年)
SpriteJS v3.x (2019年~2020年)
SpriteJS v2.x (2018年~2019年)
SpriteJS v1.x (2017年~2018年)
时间:2020年
作者:月影
标题:加餐 | SpriteJS:我是如何设计一个可视化图形渲染引擎的?
推荐阅读
课后思考
总结
SpriteJS 设计与演进
参考文章
加餐 | SpriteJS:我是如何设计一个可视化图形渲染引擎的?

该思维导图由 AI 生成,仅供参考

你好,我是月影。
今天,我们来聊一个相对轻松的话题,它不会有太多的代码,也不会有什么必须要掌握的理论知识。不过这个话题对你理解可视化,了解渲染引擎也是有帮助的。因为我今天要聊的话题是 SpriteJS,这个我亲自设计和实现的图形渲染引擎的版本迭代和演进。
SpriteJS 是从 2017 年下半年开始设计的,到今天已经快三年了,它的大版本也从 1.0 升级到了 3.0。那么它为什么会被设计出来?它有什么特点?1.0、2.0、3.0 版本之间有什么区别,未来会不会有 4.0 甚至 5.0?别着急,听我一一道来。

SpriteJS v1.x (2017 年~2018 年)

我们把时间调回到 2017 年下半年,当时我还在 360 奇舞团。奇舞团是 360 技术中台的前端团队,主要负责 Web 开发,包括 PC 端和移动端的产品的前端开发,比较少涉及可视化的内容。不过,虽然团队以支持传统 Web 开发为主,但是也支持过一部分可视化项目,比如一些 toB 系统的后台图表展现。那个时候,我们团队正要开始尝试探索可视化的方向。
如果你读过专栏的预习篇,你应该知道,要实现可视化图表,我们用图表库或者数据驱动框架都能够实现,前者使用起来简单,而后者更加灵活。当时,奇舞团的小伙伴更多是使用数据驱动框架D3.js来实现可视化图表的。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

SpriteJS是一个经历了多个版本迭代和演进的图形渲染引擎,从1.0到3.0版本,不断优化性能和跨平台适配能力。SpriteJS 1.0解决了D3.js只能操作HTML和SVG的局限性,通过Canvas绘制提升性能。SpriteJS 2.0实现了跨平台渲染,支持服务端渲染和小程序环境,并增加了文字排版、布局系统等特性。然而,SpriteJS 2.0存在一些缺点,如性能不足、维护困难、文件过大、不支持3D绘图。因此,SpriteJS 3.0对特性进行取舍,追求极致的性能,支持WebGL渲染、2D和3D图形绘制,以及多线程渲染,提升性能100倍。SpriteJS 4.0将打造成更纯粹的图形系统,不依赖于Web浏览器,采用OpenGL ES和Skia渲染3D和2D图形,力求渲染性能超越市面上的主流图形系统。整个设计发展过程包含了对整个图形系统架构的思考和取舍,为读者提供了对图形系统和渲染引擎设计的启发。文章内容吸引人,展示了SpriteJS在不断演进中追求技术创新和性能提升的过程。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(7)

  • 最新
  • 精选
  • 点滴
    使用 JavaScript Core 和 JS Bindings技术,除了跨平台,脱离浏览器,在其他方面有什么提升?目前很多跨平台的框架到后期都会面临性能与native开发性能差距。这块如何考量

    作者回复: 因为脱离浏览器,可以使用更高性能的底层库

    2020-09-22
    3
  • 赤道
    与threejs对比一下,4.0与之优劣势?

    作者回复: 使用场景不一样,不好比较,不过4.0性能应该会远高于threejs

    2021-01-15
    2
  • LJT
    这个4版本不就是flutter么?
    2022-07-03
  • ryannz
    另外能讲讲GPGPu就更好了
    2022-02-17
  • ryannz
    v4的代码在有放出来嘛?很感兴趣。要从native做起,兼容web感觉也挺难的。 - native用c++实现?还是rust?? - skia的wasm体积问题怎么解决? - 文字和布局放弃掉挺可惜的,如果做成插件挺好的 - 文字和布局其实在native都有现成的解决方案可以借用,但是不一定能迁移到web - native对体积倒是不太敏感 - 怎么看webgpu呢? - skia的性能对可视化足够了吗
    2022-02-17
  • 蓝海
    想做智慧城市,3D楼群和城市设备的相关展示。目前正在做技术选型,请问使用SpriteJS是否试用。有没有相关推荐,谢谢!
    2021-04-25
  • 馒头爱学习
    聆听牛人的思路,非常受用!
    2021-04-16
收起评论
显示
设置
留言
7
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部