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

说明书

本发明涉及一种基于WebGL的大批量三维文字高效显示的方法，包括下述步骤：(1)遍历模型中的所有文字对象，构建字符hash表；(2)采用Canvas绘制hash表中每个字符，并计算SDF信息，生成SDF纹理图片，记录每个字符的纹理坐标值；(3)创建着色器材质对象，在片元着色器里实现基于SDF的着色，SDF图片作为输入纹理；(4)依据文字的几何位置、大小和颜色构建geometry对象，每个字符用两个三角面片构成的矩形表示；(5)合并材质相同的geometry对象创建显示mesh对象，加入到场景树中进行绘制。本发明不仅能高效绘制大批量文字，在缩放时保持清晰的文字效果，而且可以满足各种字体显示需求。

技术领域

本发明属于计算机图形Web显示技术领域，具体地说是涉及一种基于WebGL的大批量三维文字高效显示的方法。

背景技术

随着HTML5/WebGL技术的发展和成熟，为我们在Web和移动端显示CAD模型和图纸提供了新的选择。WebGL将OpenGL ES与JavaScript结合，可以为HTML5 Canvas提供硬件3D加速渲染，提供了基于浏览器的无插件三维渲染跨平台方案，越来越广泛的用于在Web上进行三维模型和二维图纸的轻量化展示和交互。三维CAD模型的产品制造信息(PMI)、二维工程图纸中常含有大量的文字信息，如何对这些字体、样式、大小都有可能不同的大批量文字进行高效渲染，并支持缩放操作是一个难点。WebGL本身没有提供直接进行文字绘制的接口，而且不能直接访问系统字体，目前在网页三维场景里渲染文字的方式有下面几种：

(1)使用DOM API添加HTML元素来表示文字，将三维坐标点投影到屏幕坐标作为文字的位置，每次相机或坐标变化时需要重新计算文字元素的屏幕坐标。这种方式适用于数量不大、大小固定的静态文本的展示，当文本数量变多时交互性能会很差，不适合CAD模型和图纸里大批量文字的显示。

(2)从字体文件中获取文字的矢量几何表示，创建文字的三维显示网格。这种方式文字直接成为三维场景里的几何对象，能很好的适应缩放、平移、旋转等视图交互操作，但每个文字都包含很多的三角面，场景里文字数量很多时，三角面的数量会急剧增加，从而加大渲染的负担,引起卡顿现象。

(3)使用文字位图贴图，将字符集预渲染到一张或多张图片上，记录每个字符的位置，场景中的每个文字用一个矩形表示，将文字图片作为纹理贴到文字对象上。这种方式在绘制大批量文字时有很高的性能，但只适合固定大小的文字显示，位图字体不适合缩放，放大时会产生明显的锯齿效果。

(4)使用基于Signed Distance Field(有向距离场，以下简称SDF)的矢量信息保存和渲染方法，可以很好的解决位图字体缩放时产生的模糊问题。SDF方法通过将字体位图中每个像素存储的颜色值换成距离文字边缘的最短距离，当像素在文字内，则用正数距离，在文字外则用负数距离，文字边缘距离则是零，这样就通过矢量距离描述了字符中的边缘，在着色器中，通过光滑插值对边缘处做平滑处理，就可以轻易化解边缘问题。SDF的计算是个耗时的过程，该方法一般需要事先对字符集生成SDF图，如果只是英文还好，字母加字符也就几十的数量，便于提前生成一张SDF纹理图片，但是中文汉字常用就有6000多个，提前生成SDF图片会很大，而且对不同字体要生成不同的图片，加大网页端显示时的加载开销和内存显存开销。

发明内容

为了克服现有技术存在的不足，本发明提供了一种基于WebGL的大批量三维文字高效显示的方法，解决了使用WebGL技术在网页端查看CAD模型和图纸时因存在大量文字而导致模型在显示、移动、缩放等交互浏览时出现的明显卡顿问题。

本发明基于活字印刷思想，在加载模型时采用HTML5 canvas渲染和快速欧氏距离计算方法实时生成包含当前模型使用字符的SDF纹理图片，以纹理贴图方式基于SDF信息绘制文字，不仅能高效绘制大批量文字，并在缩放时保持清晰的文字效果，而且HTML5 canvas能直接使用系统字体，不需额外加载庞大的字体文件，满足各种字体显示需求。

为了实现上述目的，本发明采用的技术方案为：