Loading...
墨滴

张春成

2021/08/28  阅读:36  主题:默认主题

WebGL绘图(之一)

WebGL绘图(之一)

WebGL是重要的前端技术之一, 是高性能的像素级渲染工具。


使用场景

在网页前端, 我们可以通过CanvasSVG等多种方式进行图像绘制。 但在需要渲染大量像素的“极端情况”下, 不管是p5.js还是d3.js都显得力不从心。 这就是WebGL技术的应用场景。

如何绘制一张图像

以一个简单的渲染场景为例

RenderDiff
RenderDiff

这是一个典型的渲染场景, 渲染的目的是渲染一个平面区域, 该区域以中心为轴, 呈现一个类似HSV颜色空间的色盘图像

也就是说,该区域的颜色与它的角度有关, 该角度与HSV颜色空间的HUE通道相同。

上图以分层的形式同时显示了两种渲染方式

  • 下层是围绕顶点的渲染方式,

    我们只是指定了4个顶点的颜色, 整个四边形的颜色由这些顶点颜色插值而成。 这样我们其实只需要绘制4个顶点, 在前面网页也只需要维护这些数量极少的顶点, 就可以使用这些颜色“铺满”一个区域。

    在大多数的, 对像素颜色要求不严格的情况下, 这样的渲染方式是可行的。

  • 上层是围绕像素的渲染方式,

    为了避免上层将下层盖住, 我们采取了随机采样的方法, 只显示了部分像素。

    由于我们直接操作像素颜色, 而不是放任系统对它们进行自动插值, 可以看到二者具有较大的不同。

  • 两种渲染方式的计算开销差异很大,

    • 顶点渲染方式需要前端程序绘制的顶点数量为4个;
    • 像素渲染方式需要前端程序绘制的像素数量则是相当大的值, 在本图中, 这样的散点数量为300个。 若要渲染与下层相同的区域, 就需要渲染800 x 600数量级的像素。

可见,虽然像素渲染方式能够更加“忠实”地传达设计者的意图, 但计算开销过大, 导致对前端绘图效率要求极高。

基于WebGL的快速渲染

此时,WebGL工具可以有效解决性能问题。 这里我使用REGL[1]进行渲染, 可以绘制如下交互场景。

【这是一段棒到不行的视频】

接下来的问题,就是解决如何绘制的工程问题。 我接陆续解释我对这个工具的理解。

本案例可以在我的ObservableHQ[2]工程里找到。 欢迎转载和交流。

参考资料

[1]

http://regl.party/: http://regl.party/

[2]

ObservableHQ: https://observablehq.com/@listenzcc/simple-regl

张春成

2021/08/28  阅读:36  主题:默认主题

作者介绍

张春成