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

01 | 浏览器中实现可视化的四种方式

你好,我是月影。
上一节课我们了解了什么是可视化。可视化用一句话来说,本质上就是将数据信息组织起来后,以图形的方式呈现出来。在 Web 上,图形通常是通过浏览器绘制的。现代浏览器是一个复杂的系统,其中负责绘制图形的部分是渲染引擎。渲染引擎绘制图形的方式,我总结了一下,大体上有 4 种。
第 1 种是传统的 HTML+CSS。这种方式通常用来呈现普通的 Web 网页。
第 2 种是使用 SVG。SVG 和传统的 HTML+CSS 的绘图方式差别不大。只不过,HTML 元素在绘制矢量图形方面的能力有些不足(我们后面会讲到),而 SVG 恰好弥补了这方面的缺陷。
第 3 种是使用 Canvas2D。这是浏览器提供的 Canvas API 中的其中一种上下文,使用它可以非常方便地绘制出基础的几何图形。在可视化中,Canvas 比较常用,下一节课我们会学习它的基本用法。
第 4 种是使用 WebGL。这是浏览器提供的 Canvas API 中的另一种上下文,它是 OpenGL ES 规范在 Web 端的实现。我们可以通过它,用 GPU 渲染各种复杂的 2D 和 3D 图形。值得一提的是,WebGL 利用了 GPU 并行处理的特性,这让它在处理大量数据展现的时候,性能大大优于前 3 种绘图方式。因此,在可视化的应用中,一些数据量大、视觉效果要求高的特殊场景,使用 WebGL 渲染是一种比较合适的选择。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(32)

  • 最新
  • 精选
  • Meow戴
    canvas2d绘制出来的图形最终也是渲染到gpu中的吧,和webgl渲染到底区别在哪里,为啥webgl性能好啊,请问月影团长~~

    作者回复: 这个问题问得挺好的,说明自己思考了。我之前也有疑问。不过后来我自己尝试实践了一下,发现是因为canvas2d渲染只能由浏览器底层控制,并不能自己控制gpu,而很多优化其实浏览器并不能代替开发者去做。比如说同时绘制几万个小圆形,因为图形都一样,自己写webgl的话,可以用instanced drawing的方式批量绘制,而canvas2d写浏览器不会帮你去这么做。可以说webgl在渲染大量元素的时候手段要更多得多,所以性能差别就明显了。你可以看我spritejs的文档中的示例https://spritejs.org/demo 里面的benchmark子目录下的例子,里面有几个用canvas2d无法实现的case。

    5
    84
  • 工号996
    Canvas绘出圆形颜色渐变的倒计时图形有种朦胧感,怎么回事

    作者回复: 这个问题很好。这个牵扯到设备像素比dpr了。我们知道mac和iphone的dpr是2,也就是说一个如果你在这样的设备上绘制canvas,应当将它的画布坐标设置为样式坐标的2倍,才可以清晰地显示图像。浏览器的window.devicePixelRatio属性可以读取设备像素比。

    33
  • 皮特尔
    Canvas 是不是有5M的大小限制?这个问题怎么解决呢?

    作者回复: Canvas画布大小有限制,不同的浏览器不同,最新的Chrome下应该是不超过16384 X 16384,单个宽高不超过 32767像素,一般的可视化大屏足够用了。检测设备的Canvas大小可以用这个项目:https://github.com/jhildenbiddle/canvas-size

    18
  • 浮生若梦
    canvas和webgl都是GPU绘图,但是他们在代码中都是以js的形式来写的。那么首先需要解析js然后才能绘制,这里是CPU在起作用。但是后期更改图像(js代码)的时候,还是纯GPU操作吗?会不会插入js的CPU操作,最后绘制才进入GPU操作?相比html和css只是少了前期布局和绘制的步骤,因为浏览器最后将html和css的图像展现在页面最终也是会到GPU里。另外,threejs中的shader貌似比一般的threejs(如精灵)效果更好,这又是什么原理呢?

    作者回复: canvas2d绘图是通过自身的api,gpu是浏览器底层调用的,不受开发者控制。webgl不一样,将数据写入帧缓冲之后,最终通过WebGLProgram来执行shader完成图形渲染,所以webgl能够自己控制gpu渲染。有很多图形计算,webgl是可以放在shader里面去计算的,这样比用js计算快,这就是gpu和cpu计算的区别。另外为什么threejs的自定义的shader会更好,也是因为我们可以在shader中完成一些计算,还有threejs精灵默认的shader是根据材质生成的,里面的计算也是依照一些规则来给出的。自定义shader更灵活。

    2
    15
  • gltjk
    按老师的建议用 <path> 重构了 SVG 饼图(不过由声明式变成了命令式😂),同时把数据与视图分离了。https://codepen.io/gltjk/pen/vYLmdvJ

    作者回复: 写得挺好的呀。声明式和指令式只是和图形系统本身特性有关,是相对而言的。这里这个具体问题即使用svg也可以用指令式的思路来写,总体挺好的

    4
    10
  • 一步
    Canvas 2D 和 WebGL 都是 Canvas API 的一种上下文, 那么 Canvas API 到底有多少中上下文 API 呢? 还有问题就是 Canvas API 是不是就是一个接口规范, Canvas 2D 和 WebGL 只是其中的一种实现?

    作者回复: 现在浏览器的canvas一般有webgl2、webgl和2d三种上下文。它们并不是一个完整的canvas api规范,而是分成了2d规范和webgl规范。webgl规范是opengl es规范在web端的实现,其中webgl2对应opengl es 3.0,而webgl对应的是opengl es 2.0。

    7
  • 陈启年
    在使用HTML+CSS实现可视化章节中,月影说“从 CSS 代码里,我们很难看出数据与图形的对应关系”。那么使用variable还是能做到对应关系的,比如: .bargraph div{ // 初始值 --start: 100%; --end: 100%; background-image: linear-gradient( to top, pink var(--start), orange 0, orange var(--end), transparent 0 ); 有几个问题请教: 1,background-image无法使用transition,动画很硬; 2,柱子内部是画出来的,子色块无法交互; 3,数据项不定的情况下,没办法在css中以字面量去定义,只能在js中写一堆css;

    作者回复: css代码里很难直观看出数据的对应关系,用var和calc是可以解决一部分问题,不过还是比较麻烦。 1没有特别好的办法,可以用js或者用css预处理器来解决。 2也确实是如此,所以一般可视化不用html/css,只有最简单的存展示类的才用一下。 3的话动态数据项自然没法直接用css属性定义,用编译工具结合预处理器可以做,比较麻烦,估计还是要依靠css 所以结论就是html/css在可视化中适应很少,但是可以用来展示一些简单的图表,一般适合静态展示。

    6
  • 啊啊啊黑猫警长
    图形中运用到的数学知识,除了后面要讲的以外.平时应该通过什么来学习积累呢.典型案例吗

    作者回复: 可以系统地看一些资料,这里推荐油管上3blue1brown大神的视频。

    4
  • KeilingZhuang
    请问canvas是间接控制GPU渲染,webGL是直接控制GPU渲染吗?

    作者回复: 是的

    3
  • 温润玉
    请问月影老师对WebXR这种新技术有什么看法呢?非常感谢╰(*´︶`*)╯

    作者回复: 前沿技术只要有兴趣我还是鼓励大家多关注的。而且这些技术与可视化也能紧密结合。

    3
收起评论
显示
设置
留言
32
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部