从2017年到2020年，我花了大约4年的时间，从零到一，实现了一个可切换WebGL和Canvas2D渲染的，跨平台支持浏览器、SSR、小程序，基于DOM结构和支持响应式的，高性能支持批量渲染、针对可视化场景优化、支持WebWorker的图形系统——SpriteJS。
在这个“造轮子”过程中，我一步步将一个很简陋的渲染库，变成一个能够支撑可视化应用和游戏开发的，还算不错的一个图形库，其中有许多积累，也有许多思考。因为毕竟是两年多前的研究，有些细节可能记得不是特别清晰，其中有些特性也许已经有点过时，但我想，还是有不少内容能给大家带来参考和启发。
原始需求：和渲染无关
2017年底的时候，我还在奇虎360负责奇舞团。奇舞团是一个中台前端团队，支持很多360的业务需求，其中包括一些toB的需求，这些需求中有不少可视化图表和态势感知大屏。大概在2015-2016年，我们的同学就开始用D3来完成可视化项目，因为D3具有很高的灵活性。有些同学将D3简单归类为一种可视化渲染框架，实际上这种想法是错误的。D3并不是可视化框架，而是一个数据驱动引擎。
严格来说，D3关心的是数据的组织，它并不关心数据最终渲染的结果，但是，D3的数据组织形式是基于树状结构的，因为它天然契合树状结构的渲染形式。正因为如此，所以一般来说，D3的官方例子都是用DOM或SVG渲染，这是因为基于DOM树的渲染和D3的树状数据组织形式是绝配。
- 使用 DOM 渲染的 D3 柱状图：
- 使用SpriteJS渲染：
与 DOM 的一致性
为了达到上面的效果，SpriteJS参考浏览器DOM API，进行了适配。
SpriteJS & DOM & D3
理论上，操作SpriteJS元素和操作DOM元素完全一样，二者差异极小。
这种一致性使得SpriteJS完全可以和D3配合使用，灵活解决非常复杂的可视化问题。
设计一个图形系统的“骨架”
坐标系的选择
在图形系统的设计中，首先要确定默认坐标系。理论上讲，任何一种直角坐标系，甚至非直角坐标系（比如极坐标）都可以作为默认坐标系，在欧式几何中，这些坐标系都可以自由转换。不过，考虑与DOM的一致性，采用浏览器默认的坐标系是一个极好的选择。
对于WebGL渲染来说，我们需要将顶点坐标转换成WebGL坐标，在这里，我们采用根据canvas的坐标动态设置 projectionMatrix 即可。
updateResolution() {
const {width, height} = this.canvas;
const m1 = [ // translation
1, 0, 0,
0, 1, 0,
-width / 2, -height / 2, 1,
];
const m2 = [ // scale
2 / width, 0, 0,
0, -2 / height, 0,
0, 0, 1,
];
const m3 = mat3(m2) * mat3(m1);
this.projectionMatrix = m3;
if(this[_glRenderer]) {
this[_glRenderer].gl.viewport(0, 0, width, height);
}
}
attribute vec3 a_vertexPosition;
attribute vec3 a_vertexTextureCoord;
varying vec3 vTextureCoord;
uniform mat3 viewMatrix;
uniform mat3 projectionMatrix;
void main() {
gl_PointSize = 1.0;
vec3 pos = projectionMatrix * viewMatrix * vec3(a_vertexPosition.xy, 1.0);
gl_Position = vec4(pos.xy, 1.0, 1.0);
vTextureCoord = a_vertexTextureCoord;
}
图层、树形结构与元素类型
SpriteJS用Scene表示场景，一个Layer表示一个图层，在这里，我的设计是一个Layer对应一个画布，即默认每个Layer都是独立的Canvas元素。这么做有优点也有缺点，是一种设计上的取舍。
优点是，每个Layer彼此独立，Layer间不必考虑绘制次序，可以充分利用WebWorker这样的多线程来并行绘制，而且逻辑上比较简单，如果需要在多层响应事件，只需要注意事件处理的次序。缺点是如果分多层绘制，有可能产生较多Canvas对象实例，比较耗内存。
- 多线程绘制
前面说过，SpriteJS采用类似树状结构来管理元素，Scene、Layer和Group都是容器，而其他类型的图形元素挂载在容器上。
SpriteJS的元素类型比较多，一共有超过十五种图形元素，如下图所示。
这些元素可以分为两类，一类是Block元素，包括Sprite、Label和Group，一类是Path元素，包括各种图形。这两类元素中，Block比较类似于DOM元素，占据矩形区域，有盒模型，有border、padding、margin，可以计算大小；Path比较类似于SVG元素，通过Path2D构成矢量形状，有stroke和fill两类渲染，但不计算大小（不管Path还是Block都能计算boundingClientRect）。
Group比较特殊，SpriteJS v3里，它默认不计算大小，但继承它的Layer和Scene会计算大小。在v2中，Group计算大小，而且能够做区域剪裁和设置clipPath。v3里，Group主要的作用是给分组元素设置统一的transform。之所以这样设计，牵扯到WebGL的渲染模型。在后续会详细解释。
考虑到扩展性，用户可以通过spritejs.registerNode注册自定义节点元素。
registerNode的作用是注册一个唯一的nodeName到spritejs的文档树上，这样节点挂载之后，通过getElementById、querySelector等等就可以找到这个节点。
属性更新和重绘机制
SpriteJS与一般的图形库不同，通常情况下，一般的图形库会使用一个动画定时器来以固定帧率刷新画布。但SpriteJS采用的是属性变化时的异步更新机制。
具体原理如下图所示：
这里有些需要注意的细节：
-
不是所有的属性改变都会触发render，比如className、ID等改变不会触发
-
有些属性改变不仅触发render，还需要触发其他操作，比如anchor、border等属性的变化，需要重新计算图形元素的轮廓（后面会讲）；zIndex的变化，导致对group的children的renderOrder进行重排。
这样设计的好处显而易见，可以尽量减少不必要的重绘和其他计算，从而提高整体性能。
外部 Ticker
虽然SpriteJS有自己的更新机制，但是一些外部库，比如ThreeJS或者ClayGL，有自己的更新逻辑，所以SpriteJS增加了手动控制的设计，以方便与外部库配合。
跨平台
SpriteJS在实现的时候，尽量不使用浏览器原生提供的能力，除非是标准的Canvas和WebGL API。针对浏览器、NodeJS、微信小程序、微信小游戏等不同的环境，通过polyfill进行适配。
为了在NodeJS中集成WebGL和Canvas环境，做了下面这个库：
盒模型、事件、动画等
盒模型设计
对Block类型的元素，SprteJS采用标准的DOM盒模型，可以设置border、padding各属性，并可以通过boxSizing属性切换盒模型方式。
事件机制
- 事件模型、坐标转换
视口宽高： [viewportWidth, viewportHeight]
画布宽高：[resolutionWidth, resolutionHeight]
偏移量：[offsetLeft, offsetTop]
为什么会产生偏移量，详细见屏幕适配。
- 事件派发和命中
采用对每个三角网格进行命中检测（此处有优化空间，可以先排序用二分查找快速确定范围）
function inTriangle(p1, p2, p3, point) {
const a = p2.copy().sub(p1);
const b = p3.copy().sub(p2);
const c = p1.copy().sub(p3);
const u1 = point.copy().sub(p1);
const u2 = point.copy().sub(p2);
const u3 = point.copy().sub(p3);
const s1 = Math.sign(a.cross(u1));
let p = a.dot(u1) / a.length ** 2;
if(s1 === 0 && p >= 0 && p <= 1) return true;
const s2 = Math.sign(b.cross(u2));
p = b.dot(u2) / b.length ** 2;
if(s2 === 0 && p >= 0 && p <= 1) return true;
const s3 = Math.sign(c.cross(u3));
p = c.dot(u3) / c.length ** 2;
if(s3 === 0 && p >= 0 && p <= 1) return true;
return s1 === s2 && s2 === s3;
}
动画的设计
- Sprite-Timeline github.com/spritejs/sp…
为了实现可以在时间轴按照任意速度播放动画，包括正向播放和回放，在任意时间点可以跳跃，实时切换播放状态和时间轴状态，设计了 sprite-timeline 库。
这个库的设计是：
-
创建一个Timeline对象，它基于当前时间线和playbackRate来计算时间，playbackRate可以是任意数，所以时间可以停止，也可以回溯。playbackRate的设置和改变会影响Timeline对象的currentTime。
-
除了currentTime属性，Timeline对象还有一个entropy（熵）属性，它和currentTime的不同是，如果playbackRate为负数，currentTime会回溯，但entropy始终增加。
-
Timeline对象可以fork，fork出的新对象以被fork的Timeline对象的currentTime为时间线。这意味着Timeline对象可以嵌套，在SpriteJS中，所有元素会默认fork它的parent的timeline对象，所以当我们把layer的timeline的playbackRate设置为0的时候，这个layer中所有的动画就都会暂停。
- Sprite-animator
基于timeline封装，参考 Web Animations API - Web APIs | MDN
- Animation & Transition
- Transition-reverse
- Path Transition
- Play Animations
- Async frame animations
从2D到WebGL
在Sprite 1.0和2.0的时候，主要是使用Canvas2D渲染，直到3.0，我重写了底层引擎，开始默认采用WebGL渲染。
轮廓和网格
为了便于WebGL处理几何图形，尤其是Path的解析，我实现了一个底层渲染引擎 GitHub - mesh-js/mesh.js: A graphics system born for visualization 😘.，将2D几何图形分解成轮廓和网格对象，这有点像是ThreeJS中的Geometry和Material，只不过因为我们要处理的实际上是2D图形，所以模型更加简单。
在mesh.js中，要绘制一个几何图形，我们先构建该元素的轮廓（Figure/Contours），然后再根据轮廓创建网格对象。经过这样两个步骤之后，我们就可以将几何图形绘制出来，这个过程其实比较像Canvas2D，只是比Canvas2D稍复杂一点点。
三角剖分
众所周知，WebGL的基本图元只有点、线、三角形等，要绘制多边形，我们需要将图形进行三角剖分。对任意多边形进行三角剖分，有许多成熟算法，我选择的是GLU Tessellator。
我通过一系列工具库 parse-svg-path、normalize-svg-path、svg-path-contours 将SVGPath转换成多边形的顶点列表，这里就不重复造轮子了，有些工具库有点小bug，我给顺手修了一下。
获得顶点之后，对顶点进行三角剖分，就可以得到三角网格的拓扑结构，通过这个拓扑结构创建mesh2d对象。
Stroke
如果不常用WebGL渲染，很难想象，对Canvas2D来说非常简单的绘制带宽度折线这类需求，会难住WebGL开发者。
其实这个问题已经有比较经典的解决方案，就是用挤压（extrude polyline）曲线技术来实现。有两种方法，一种是用JS算顶点，另一种是在shader中进行处理。为了灵活实现Canvas2D中的“线帽（lineCap）”效果，SpriteJS采用JS计算的方式来处理。
如上图所示，黑色折线是原始的 1 个像素宽度的折线，蓝色虚线组成的是我们最终要生成的带宽度曲线，红色虚线是顶点移动的方向。因为折线两个端点的挤压只和一条线段的方向有关，而转角处顶点的挤压和相邻两条线段的方向都有关，所以顶点移动的方向，我们要分两种情况讨论。
首先，是折线的端点。假设线段的向量为（x, y），因为它移动方向和线段方向垂直，所以我们只要沿法线方向移动它就可以了。根据垂直向量的点积为 0，我们很容易得出顶点的两个移动方向为（-y, x）和（y, -x）。如下图所示：
端点挤压方向确定了，接下来要确定转角的挤压方向了，我们还是看示意图。
如上图，我们假设有折线 abc，b 是转角。我们延长 ab，就能得到一个单位向量 v1，反向延长 bc，可以得到另一个单位向量 v2，那么挤压方向就是向量 v1+v2 的方向，以及相反的 -(v1+v2) 的方向。
现在我们得到了挤压方向，接下来就需要确定挤压向量的长度。
首先是折线端点的挤压长度，它等于 lineWidth 的一半。而转角的挤压长度就比较复杂了，我们需要再计算一下。
绿色这条辅助线应该等于 lineWidth 的一半，而它又恰好是 v1+v2 在绿色这条向量方向的投影，所以，我们可以先用向量点积求出红色虚线和绿色虚线夹角的余弦值，然后用 lineWidth 的一半除以这个值，得到的就是挤压向量的长度了。
具体用 JavaScript 实现的代码如下所示：
function extrudePolyline(gl, points, {thickness = 10} = {}) {
const halfThick = 0.5 * thickness;
const innerSide = [];
const outerSide = [];
// 构建挤压顶点
for(let i = 1; i < points.length - 1; i++) {
const v1 = (new Vec2()).sub(points[i], points[i - 1]).normalize();
const v2 = (new Vec2()).sub(points[i], points[i + 1]).normalize();
const v = (new Vec2()).add(v1, v2).normalize(); // 得到挤压方向
const norm = new Vec2(-v1.y, v1.x); // 法线方向
const cos = norm.dot(v);
const len = halfThick / cos;
if(i === 1) { // 起始点
const v0 = new Vec2(...norm).scale(halfThick);
outerSide.push((new Vec2()).add(points[0], v0));
innerSide.push((new Vec2()).sub(points[0], v0));
}
v.scale(len);
outerSide.push((new Vec2()).add(points[i], v));
innerSide.push((new Vec2()).sub(points[i], v));
if(i === points.length - 2) { // 结束点
const norm2 = new Vec2(v2.y, -v2.x);
const v0 = new Vec2(...norm2).scale(halfThick);
outerSide.push((new Vec2()).add(points[points.length - 1], v0));
innerSide.push((new Vec2()).sub(points[points.length - 1], v0));
}
}
...
}
批量绘制
因为我们绘制2D图形，通常这些图形可视为同一材质，所以我们能够将这些图形网格数据全部压缩到一个大的类型数组中进行批量绘制。
Shader & Pass
SpriteJS可以使用自定义shader创建Program，将Program赋给绘图元素进行绘制。
我们可以在渲染管线中应用多个shader组成管道进行渲染，有一种特定的渲染管道叫做后期处理通道，SpriteJS支持定义后期处理通道。
关于性能优化的那些事儿
性能的直观感受
SpriteJS针对可视化场景进行了性能优化。可视化场景中有大量重复或类似形状的几何图形，因此用合并顶点批量渲染的方式会很有效。
auto Blending 和轮廓更新
WebGL在颜色混合的时候比较消耗性能，因此mesh-js对元素做了判断，如果当前绘制的元素都没有alpha通道（透明度），那么不会开启颜色混合，否则再开启颜色混合。
在SpriteJS中，元素的大部分样式改变，比如transform、position、bgcolor等等，不涉及轮廓的变化，这些情况下，我们不用重新计算轮廓，所以我们将元素轮廓计算好之后缓存起来，大部分情况下我们不需要重复计算。只有一些特殊属性，比如Path的d、lineWidth、lineCap、Block的border等改变，才需要重新计算轮廓。
Seal & Cloud
Seal 是一种特殊的方式，当我们使用一个group来组合一组图形时，如果只是需要使用固定的图形拓扑结构，我们可以使用group的seal方法将子元素的几何图形合并成为group的几何图形。这样group的几何图形将被合并的几何图形替代，成为一个单一的元素被渲染，并且不再能够改变几何图形（但是依然可以改变位置、transform、颜色等等属性）。
seal生效的时候，原子元素的属性将失效，由group的属性替代。
当我们用group构建组合图形的时候，这种特殊方式能够大大提升渲染性能。
对于绘制完全重复的几何图形，我们还可以利用WebGL的instanced array来进行渲染。
关于 Shader 的性能开销
有一条需要格外注意：尽量使用条件编译代替条件分支。
