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

起源

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

方法

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

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

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

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

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

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

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

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