在WebGL中显示绘制文字的几种手段

起源

闲人在2017年做过一年小游戏，自研了个小型2D游戏框架，包含了富文本绘制逻辑。
后来看着别人用3D引擎渲染的游戏特别高大上，也想入行，就在研究WebGL的使用，其中就有文字绘制的部分。
今天有群友问起这个问题，就在这里吧经验分享给大家。

方法

1. 通过一些软件，预先生成好要绘制的文字的纹理，载入WebGL中使用。

   使用场景：文字不多时，比如游戏的得分数字。

2. 通过一些软件，预先生成好要位置的文字的模型，载入WebGL中使用。

   使用场景：需要可3D旋转的文字时。

3. 在要绘制文字时，先在2Dcanvas中画上要用的字，然后用这个2Dcanvas作为纹理，载入WebGL中使用。

   使用场景：需要动态显示的文字。
   注：因为分辨率原因，需要设定好显示精度，高精度需要在更大的canvas中绘制文字，然后按比例缩放绘制到最终显示的WebGL中去。

4. 在WebGL的DOM元素上再叠加一个2DCanvas元素用来绘制文字。

   使用场景：所有文字都可以显示在最上层。

总结

一般使用第三种方式进行绘制，更加灵活。

const scale = 20; // 精度
const size = '字体大小';
const value = '要绘制的文字';
const ctx = createContext('2d');// 获取2D绘图上下文
ctx.font = size + 'px 字体'
ctx.canvas.width = ctx.measureText(value).width * scale;
ctx.canvas.height = size * scale;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = size * scale + 'px 字体';
ctx.fillText(value, ctx.width / 2, ctx.height / 2);
drawTextCanvasToWebGL(ctx.canvas); //绘制文字纹理到WebGL