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 么……沿用的是上个版本遗留下来的函数啦……

分享到 评论