使用WebGL显示文本

Question

我想用WebGL显示文本,我知道没有内置的方法来做到这一点.但是,我知道可以用纹理完成它.我是OpenGL的新手,所以我对着色器并没有多少经验,所以如果有人可以添加如何设置着色器.我想在同一个对象上绘制整个字符串,而不是一堆单独的字母,并且字符串不是预设的,它们并不总是相同的.如何才能显示文字？另外,我怎么知道每个字母的间距？

我读了第7篇文章this page,这听起来就像我想要做的那样,但我并不完全明白这一切意味着什么.(这主要是我不理解的着色器).

顺便说一句,我正在使用 sylvester.js

Answer 1

渲染文本有很多种方法,但最简单的方法之一是称为位图字体渲染.

您需要开始的只是一张精灵表,其中包含您可能想要呈现的所有字母.然后,您只需渲染一个四边形,其纹理坐标设置为您要绘制的角色的位置.要渲染一个完整的句子,只需绘制一堆四边形,每个四边形代表一个字母.

你的精灵表看起来像下面的纹理.

一旦你有了这个,你就需要纹理坐标,基本上是(x,y)坐标,范围是0到1,用于精灵纹理中的每个角色.生成四边形网格时使用这些.你最终会在屏幕上画出这样的东西:

现在你在屏幕上有文字,你可以得到想象并考虑字母之间的字形字距.这允许您渲染更自然的文本.

不幸的是,我找不到指向你的教程.而且这不是我能在这里为你鞭打的东西.拼图有很多部分,它的任务不小(矩阵数学,相机,正投影,纹理坐标,纹理,精灵,生成网格等等).

如果您愿意,可以查看我使用WebGL完成此项目的一个项目.我甚至使用javascript + 2d画布生成初始精灵表.

这里生成的Sprite表:

• https://github.com/zfedoran/prefab.js/blob/master/app/graphics/spriteFont.js

在此文件中生成的四边形网格:

• https://github.com/zfedoran/prefab.js/blob/master/app/controllers/labelController.js

WebGL周围的包装:

• https://github.com/zfedoran/prefab.js/blob/master/app/graphics/device.js

或者你可以

Watch Notch(制作Minecraft的人)只用了大约30分钟就用Java做了这件事(快进到2:21小时):

• http://www.twitch.tv/notch/b/487451713
• http://www.twitch.tv/notch/b/487621698

祝好运并玩得开心点 :)