查看代码：https://code.juejin.cn/pen/7089261885949739016

• Path Transition

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7088265547250401293

• Async frame animations

nerror="javascript:errorimg.call(this);">

• 查看代码：https://code.juejin.cn/pen/7088238218914562088

4. 从 2D 到 WebGL

在 Sprite 1.0 和 2.0 的时候，主要是使用 Canvas2D 渲染，直到 3.0，我重写了底层引擎，开始默认采用 WebGL 渲染。

4.1 轮廓和网格

为了便于 WebGL 处理几何图形，尤其是 Path 的解析，我实现了一个底层渲染引擎 GitHub - mesh-js/mesh.js: A graphics system born for visualization（ https://github.com/mesh-js/mesh.js ），将 2D 几何图形分解成轮廓和网格对象，这有点像是 ThreeJS 中的 Geometry 和 Material，只不过因为我们要处理的实际上是 2D 图形，所以模型更加简单。

在 mesh.js 中，要绘制一个几何图形，我们先构建该元素的轮廓（Figure/Contours），然后再根据轮廓创建网格对象。经过这样两个步骤之后，我们就可以将几何图形绘制出来，这个过程其实比较像 Canvas2D，只是比 Canvas2D 稍复杂一点点。

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7160967356489924622

4.2 三角剖分

众所周知，WebGL 的基本图元只有点、线、三角形等，要绘制多边形，我们需要将图形进行三角剖分。对任意多边形进行三角剖分，有许多成熟算法，我选择的是 GLU Tessellator。

• https://github.com/mesh-js/mesh.js/blob/master/src/tess2/index.js
• https://github.com/mesh-js/mesh.js/blob/master/src/triangulate-contours/index.js

我通过一系列工具库 parse-svg-path、normalize-svg-path、svg-path-contours（https://github.com/mesh-js/mesh.js/tree/master/src/svg-path-contours）将 SVGPath 转换成多边形的顶点列表，这里就不重复造轮子了，有些工具库有点小 bug，我给顺手修了一下。

获得顶点之后，对顶点进行三角剖分，就可以得到三角网格的拓扑结构，通过这个拓扑结构创建 mesh2d 对象。

4.3 Stroke

如果不常用 WebGL 渲染，很难想象，对 Canvas2D 来说非常简单的绘制带宽度折线这类需求，会难住 WebGL 开发者。

nerror="javascript:errorimg.call(this);">

其实这个问题已经有比较经典的解决方案，就是用挤压（extrude polyline）曲线技术来实现。有两种方法，一种是用 JS 算顶点，另一种是在 shader 中进行处理。为了灵活实现 Canvas2D 中的“线帽（lineCap）”效果，SpriteJS 采用 JS 计算的方式来处理。

nerror="javascript:errorimg.call(this);">

如上图所示，黑色折线是原始的 1 个像素宽度的折线，蓝色虚线组成的是我们最终要生成的带宽度曲线，红色虚线是顶点移动的方向。因为折线两个端点的挤压只和一条线段的方向有关，而转角处顶点的挤压和相邻两条线段的方向都有关，所以顶点移动的方向，我们要分两种情况讨论。

首先，是折线的端点。假设线段的向量为（x, y），因为它移动方向和线段方向垂直，所以我们只要沿法线方向移动它就可以了。根据垂直向量的点积为 0，我们很容易得出顶点的两个移动方向为（-y, x）和（y, -x）。如下图所示：

nerror="javascript:errorimg.call(this);">

端点挤压方向确定了，接下来要确定转角的挤压方向了，我们还是看示意图。

nerror="javascript:errorimg.call(this);">

如上图，我们假设有折线 abc，b 是转角。我们延长 ab，就能得到一个单位向量 v1，反向延长 bc，可以得到另一个单位向量 v2，那么挤压方向就是向量 v1+v2 的方向，以及相反的 -(v1+v2) 的方向。

现在我们得到了挤压方向，接下来就需要确定挤压向量的长度。

首先是折线端点的挤压长度，它等于 lineWidth 的一半。而转角的挤压长度就比较复杂了，我们需要再计算一下。

nerror="javascript:errorimg.call(this);">

绿色这条辅助线应该等于 lineWidth 的一半，而它又恰好是 v1+v2 在绿色这条向量方向的投影，所以，我们可以先用向量点积求出红色虚线和绿色虚线夹角的余弦值，然后用 lineWidth 的一半除以这个值，得到的就是挤压向量的长度了。

具体用 Javascript 实现的代码如下所示：https://github.com/mesh-js/mesh.js/blob/master/src/extrude-contours/stroke.js

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));    }  }  ...}

4.4 批量绘制

因为我们绘制 2D 图形，通常这些图形可视为同一材质，所以我们能够将这些图形网格数据全部压缩到一个大的类型数组中进行批量绘制。

https://github.com/mesh-js/mesh.js/blob/master/src/utils/compress.js

nerror="javascript:errorimg.call(this);">

nerror="javascript:errorimg.call(this);">

4.5 Shader & Pass

SpriteJS 可以使用自定义 shader 创建 Program，将 Program 赋给绘图元素进行绘制。

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7088623553993506852

我们可以在渲染管线中应用多个 shader 组成管道进行渲染，有一种特定的渲染管道叫做后期处理通道，SpriteJS 支持定义后期处理通道。

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7088626022244941839

5. 关于性能优化的那些事儿

5.1 性能的直观感受

SpriteJS 针对可视化场景进行了性能优化。可视化场景中有大量重复或类似形状的几何图形，因此用合并顶点批量渲染的方式会很有效。

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7088268165032968223

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7088274902167322631

5.2 auto Blending 和轮廓更新

WebGL 在颜色混合的时候比较消耗性能，因此 mesh-js 对元素做了判断，如果当前绘制的元素都没有 alpha 通道（透明度），那么不会开启颜色混合，否则再开启颜色混合。

在 SpriteJS 中，元素的大部分样式改变，比如 transform、position、bgcolor 等等，不涉及轮廓的变化，这些情况下，我们不用重新计算轮廓，所以我们将元素轮廓计算好之后缓存起来，大部分情况下我们不需要重复计算。只有一些特殊属性，比如 Path 的 d、lineWidth、lineCap、Block 的 border 等改变，才需要重新计算轮廓。

5.3 Seal & Cloud

http://spritejs.com/#/zh-cn/guide/performance

Seal 是一种特殊的方式，当我们使用一个 group 来组合一组图形时，如果只是需要使用固定的图形拓扑结构，我们可以使用 group 的 seal 方法将子元素的几何图形合并成为 group 的几何图形。这样 group 的几何图形将被合并的几何图形替代，成为一个单一的元素被渲染，并且不再能够改变几何图形（但是依然可以改变位置、transform、颜色等等属性）。

seal 生效的时候，原子元素的属性将失效，由 group 的属性替代。

当我们用 group 构建组合图形的时候，这种特殊方式能够大大提升渲染性能。

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7088273623122706466

对于绘制完全重复的几何图形，我们还可以利用 WebGL 的来进行渲染。

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7088273623122706466

nerror="javascript:errorimg.call(this);">

查看代码：https://code.juejin.cn/pen/7088274222738505732

5.4 关于 Shader 的性能开销

有一条需要格外注意：尽量使用条件编译代替条件分支。

6. 一些细节，屏幕适配等

• 黏连模式：http://spritejs.com/#/zh-cn/guide/resolution
• 资源加载：http://spritejs.com/#/zh-cn/guide/resource

顶一下()     踩一下()