[发明专利]一种基于webgl提升设计效率的方法及装置

说明书

本发明公开了一种基于webgl提升设计效率的方法及装置，主要解决现有技术中存在的现有通过U3D编辑器制作3D效果存在的制作成本高，文件较大，开发人员无从得知开发逻辑，增加公司开发成本的问题。该一种基于webgl提升设计效率的方法为：根据所需3D效果模块编写着色器，根据不同的3D效果组合进行不同着色器拼接后渲染，最后显示。通过上述方案，本发明达到了方便开发人员进行相关需求的开发，实现公司人力资源的合理利用，降低成本的目的，具有很高的实用价值和推广价值。

技术领域

本发明涉及3D可视化领域，具体地说，是涉及一种基于webgl提升设计效率的方法及装置。

背景技术

U3D编辑器功能强大，能够制作非常丰富的3D效果；一般通过U3D编辑器实现3D合成，但该过程中需要根据业务场景制作3D效果，然后导出视频或U3D编辑器支撑的文件交给开发人员进行对照开发，需要专业的特效制作人员，增加了3D效果的制作成本，同时开发人员得到的文件或视频往往较大，跨平台性差，且并且只能得到效果，而无法知道其中的开发逻辑，从而增加公司的开发投入成本。

发明内容

本发明的目的在于提供一种基于webgl提升设计效率的方法及装置，以解决现有通过U3D编辑器制作3D效果存在的制作成本高，文件较大，开发人员无从得知开发逻辑，增加公司开发成本的问题。

为了解决上述问题，本发明提供如下技术方案：

一种基于webgl提升设计效率的方法为：根据所需3D效果模块编写着色器，根据不同的3D效果组合进行不同着色器拼接后渲染，最后显示。

现有基于U3D编辑器实现3D效果的合成方法的步骤为：第一步，新建场景，导入设计稿；第二步，根据业务场景制作3D效果；第三步，导出视频或U3D支持的文件交由开发人员对照开发；该过程中第二步需要专业的特效制作人员，增加3D效果制作成本；第三步中导出的文件或视频往往较大，跨平台性差，开发人员只能知道效果，不知道制作的逻辑，增加工作难度，增加开发投入成本；本发明将3D效果模块化，各个效果模块分别编写着色器最后编入总着色器中，建立了可视化交互界面，方便美术人员设计直观的3D可视化效果，无需开发人员介入，从而降低公司实施大屏可视化项目的人力资源成本。

进一步的，编写着色器之前需先确定系统中需要内置的3D效果模块种类，提取各个模块通用及私有配置，确定默认参数值，构建webgl基础环境。

进一步的，3D效果模块种类包括粒子、飞线、辉光。

进一步的，根据所需3D效果模块编写着色器的具体过程如下：

S1、将各3D效果模块进行初始化顶点数据attribute_positions，颜色数据attribute_colors，创建缓冲区对象并写入顶点数据和颜色数据；

S2、初始化时间参数uniform_time，实现各个模块动画效果根据步骤S1中顶点数据及颜色数据根据时间参数变化的方法；

S3、将步骤S1中各3D效果模块的顶点数据和颜色数据，步骤S2中的方法编写入总着色器，用于管理各3D效果模块的通用参数及方法。

进一步的，步骤S3中通过#includexx编入总着色器中。

进一步的，拼接后的着色器导入GPU渲染管线中渲染，然后在web端显示最终效果。

进一步的，通过webpack将拼接渲染后显示的效果导出为浏览器可以直接浏览的文件。

一种基于webgl提升设计效率的装置包括存储器：用于存储可执行指令；处理器：用于执行所述存储器中存储的可执行指令，实现一种基于webgl提升设计效率的方法。

与现有技术相比，本发明具有以下有益效果：