GLantern 更新：文字和 Tween

文章目录

1. 1. 一、文本绘制
2. 2. 二、Tween

GLantern 更新到 0.3.0-alpha，提供了初步的文本和缓动（tween）支持。

一、文本绘制

由于我使用的是原生的 WebGL，所以文字绘制并不像高级的库那么方便。

怎么绘制文字呢？有请 <canvas>。注意初始化 WebGLTexture 的时候，是可以导入如下内容的：

1. 空（null），代表创建一个空白的贴图，大小用户指定；
2. ArrayBufferView，代表在用户指定的大小范围内填充这些像素内容；
3. HTMLCanvasElement；
4. HTMLVideoElement；
5. HTMLImageElement；
6. ImageData。

后四个选项是会拷贝对应元素的当前帧到贴图中。按照我的试验，是按照1:1比例复制，例如缓冲区为 100×100，图像为 50×50，则复制后图像内容会处于 (0,0,50,50) 区域。更多信息请查看规范。（虽然里面标的是 TexImageSource，但是实际上 TypeScript 的 lib.d.ts 并不支持此定义，所以得写成联合类型的形式。）

于是问题就简单了，将文本绘制到一个缓冲 <canvas> 上，然后将其内容拷贝过来。Pixi.js 和 THREE.js 采用的都是此方式。

具体实现其实挺简单的，在已有基础上改造出一对拷贝网页元素的顶点/片元 shader 就好。注意的是拷贝的是当前内容，所以要记得更新。

二、Tween

Tween 么……沿用的是上个版本遗留下来的函数啦……