[发明专利]基于WebGL的大批量三维文字高效显示的方法

权利要求书

1.一种基于WebGL的大批量三维文字高效显示的方法，其特征在于包括下述步骤：

(1)遍历模型中的所有文字对象，构建字符hash表；

(2)采用Canvas绘制hash表中每个字符，并计算SDF信息，生成SDF纹理图片，记录每个字符的纹理坐标值；

(3)创建着色器材质对象，在片元着色器里实现基于SDF的着色，SDF图片作为输入纹理；

(4)依据文字的几何位置、大小和颜色构建geometry对象，每个字符用两个三角面片构成的矩形表示；

(5)合并材质相同的geometry对象创建显示mesh对象，加入到场景树中进行绘制。

2.根据权利要求1所述基于WebGL的大批量三维文字高效显示的方法，其特征在于步骤(1)具体为：

(1-1)将字体按正常、加粗、斜体、斜体加粗分为四种，每种对应一张hash表；

(1-2)遍历获取模型里的每一个字符串对象及其对应的字体信息，找到这个字符串对应的hash表；

(1-3)遍历每一个字符，以“字体名+字符”作为键值，判断是否在hash表已存在，没有则加入hash表。

3.根据权利要求2所述基于WebGL的大批量三维文字高效显示的方法，其特征在于步骤(2)具体为：

(2-1)根据hash表中字符的个数计算SDF图片的大小，并创建一张图片；

(2-2)遍历每个字符：

(i)根据hash表类型和字符字体，设置canvas画笔样式，绘制字符到canvas；

(ii)从canvas获取字符位图像素值，采用Felzenszwalb等提出的欧式距离转换算法计算每个像素的SDF值；

(iii)计算当前字符在SDF图片中的位置，拷贝字符每个像素的SDF值到SDF图片中，SDF值只保存在图片的alpha分量中；

(iv)记录字符矩形四个角点在SDF图片中的纹理坐标值，作为字符对应的hash值存到hash表中；

(2-3)每个hash表对应生成一张SDF图片，最多生成四张SDF图片，分别对应正常、加粗、斜体、斜体加粗四种字符表，如果某个hash表的大小为0则不生成SDF图片。

4.根据权利要求3所述基于WebGL的大批量三维文字高效显示的方法，其特征在于步骤(3)具体为：

(3-1)根据SDF图片的数量创建相应数量的着色器材质对象，每个材质绑定相应的SDF图片，作为输入纹理对象；

(3-2)在片元着色器里对每个像素获取距离值，通过光滑插值在边缘处做平滑处理，消除字体边缘处的锯齿问题。

5.根据权利要求4所述基于WebGL的大批量三维文字高效显示的方法，其特征在于步骤(4)具体为：

(4-1)根据字体大小来决定字符矩形的高度，对于非中文字符，由字符本身的像素宽度来计算宽高比例，从而来决定字符矩形的宽度；中文字符是等宽字符，字符矩形的宽高相等；

(4-2)根据文字的位置、宽高信息计算字符矩形四个顶点的position值；

(4-3)根据文字的颜色设置字符矩形顶点的color值；

(4-4)从字符hash表中获取字符对应的纹理坐标值设置字符矩形顶点的uv值；

(4-5)如果设置为双面渲染，从反面看过来也能看见和正面一样的内容，就要在相同的位置再反过来构建一个geometry对象。

6.根据权利要求5所述基于WebGL的大批量三维文字高效显示的方法，其特征在于步骤(5)具体为：

(5-1)创建文字geometry对象的时候，以材质为区分，分别放入不同的数组里面；

(5-2)进一步合并材质相同的多个geometry对象的position、uv、color元素值生成一个新的geometry，并创建一个显示mesh对象加入到场景中,减少渲染的批次，提高渲染效率。