[发明专利]一种实现二维文字转换三维文字的展示方法

说明书

本发明属于视觉技术领域，涉及文字处理工具，尤其涉及一种实现二维文字转换三维文字的展示方法；即用户自定义的二维文字，通过数据建模，利用Web GL技术，将二维内容转换为三维的文字展示效果。用户只需要在Web端，输入文字、设置文字相关的属性、纹理贴图等，之后程序会通过计算，将用户设置的内容，渲染成一个3D的文字，用户无序考虑复杂的三维坐标计算以及字体模型建立，通过设置的字体以及文字构建三维模型；将纹理图片映射到三维文字模型上；用户自定义文字模型的三维旋转；用户保存后将3D文字保存成一张图片；程序保存用户的数据后完成制作。本方法制作简单，无需计算；复用率高；渲染性能高；兼容性强。

技术领域

本发明属于视觉技术领域，涉及文字处理工具，尤其涉及一种实现二维文字转换三维文字的展示方法。

背景技术

在前端技术领域能够使用样式表或者元素叠加的方式，简单模拟一个3D文字，但是这种方式实现的文字效果较差，并且不支持3D旋转等功能。

传统的3D文字制作过程比较复杂并且有较高的难度，需要制作者具有一定的数学建模基础并且有一定的编程能力。且模型的复用率较低，往往属于单独定制的效果，一般费用较高，且周期不会太短。

如今消费者对于创意或者视觉效果，都随着审美不断提高而有了更高的要求，所以基础的样式效果，并不能吸引到消费者。随着网页技术不断发展，Web端也逐渐有了高效且性能优秀的三维视觉效果处理方案Web GL，而如何通过Web GL三维渲染引擎，提供一种上手简单，能兼容多端且拥有良好性能的解决方案成为了日益迫切的需求。

发明内容

本发明针对现阶段各种浏览器的性能和用户的操作习惯，提供了一种基于Web GL技术，将二维平面文字，转换成SVG，再将SVG转换称为三维路径模型，最终实现了一个富有立体感的3D文字的方法。

为了达到上述目的，本发明采用的技术方案为，

1.一种实现二维文字转换三维文字的展示方法，具体包括以下步骤：

1)在Web端增加3D文字的添加入口以及3D文字的配置项；

2)用户输入文字，设置字体，Web端启动Web worker；

3)开始获取字体，根据字体片段路径，加载二进制流并经过转换；

4)获取用户配置的数据以及SVG路径，Web worker开始字体模型的创建，根据SVG开始绘制路径模型，渲染出路径模型之后，开始计算字间距、行距，根据以上内容，再进行三维坐标建立、模型顶点着色器以及片段着色器的创建，即得出一个完整的三维字体模型；

5)获得的3D字体模型，通过传输，将模型传回主线程，主线程获取到模型之后，开始初始化渲染3D文字的相关工具；

6)Web GL渲染引擎，创建三维图形绘制场景，定义好环境光源，初始化相机，调整相机视口，创建好场景；

7)在创建好的场景中添加字体模型和灯光，Web GL渲染引擎，根据所得场景以及相机，渲染出3D文字；

8)加载纹理贴图，即通过URL加载出图片，再根据图片创建出纹理贴图，根据片段着色器，将纹理贴图映射到对应的字体模型上，通过触发Web GL引擎刷新，此时得到了一个完整的3D文字；

9)调整画布的大小，即根据3D文字的字号，计算出对应字号所需的二维平面尺寸，设置好画布大小，用户可以开始操作3D文字，进行3D旋转，当旋转到合适的角度时，用户可以保存3D文字，将数据存储到服务器上，并且将3D文字保存成一张图片。

作为优选，所述3D文字的配置项包括文字字体设置、字号设置、文字间距调整、文字行距调整、文字3D旋转、3D文字纹理贴图。