一种基于webgl提升设计效率的方法及装置制造方法及图纸

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

【技术实现步骤摘要】
一种基于webgl提升设计效率的方法及装置
本专利技术涉及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中通过#include<xx>编入总着色器中。进一步的，拼接后的着色器导入GPU渲染管线中渲染，然后在web端显示最终效果。进一步的，通过webpack将拼接渲染后显示的效果导出为浏览器可以直接浏览的文件。一种基于webgl提升设计效率的装置包括存储器：用于存储可执行指令；处理器：用于执行所述存储器中存储的可执行指令，实现一种基于webgl提升设计效率的方法。与现有技术相比，本专利技术具有以下有益效果：（1）本专利技术将3D效果模块化，各个效果模块分别编写着色器最后编入总着色器中，根据需要拼接组合对应的3D效果，通过用户交互进行组合展示的方式，提升大屏UI设计效率，降低公司人力成本和资源投入，缩短大屏可视化项目周期的方案。（2）本专利技术将3D效果模块化，各个效果模块分别编写着色器最后编入总着色器中，形成可视化交互界面，方便美术人员设计直观的3D可视化效果，无需开发人员介入，从而降低公司实施大屏可视化项目的人力资源成本。（3）本专利技术在web端能快速进行大屏3D效果的设计，提升设计效率，快速响应客户需求，方便开发人员进行相关需求的开发，实现公司人力资源的合理利用，降低成本，缩短项目实施周期。具体实施方式为了使本专利技术的目的、技术方案和优点更加清楚，下面将结合实施例对本专利技术作进一步地详细描述，所描述的实施例不应视为对本专利技术的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本专利技术保护的范围。对本专利技术实施例进行进一步详细说明之前，对本专利技术实施例中涉及的名词和术语进行说明，本专利技术实施例中涉及的名词和术语适用于如下的解释。大屏可视化：是指将一些业务的关键指标，通过柱状图、面积图、折线图等数据可视化的方式展示到一块或多块LED大屏上，经常用在公司的展览中心、老板的办公室，还有城市交通管控中心、交易大厅等等。大屏UI设计：是指UI设计人员通过抽取业务场景关键指标，确立分析维度、选取合适的数据可视化方案之后，在确定尺寸及设计风格的大屏上面进行页面布局、划分的过程。3D效果设计：是指在大屏UI设计中，通过三维的方式展示传统二维无法展现的动态效果，包括河流流动、飞机航迹、视角切换等等，能够丰富大屏UI设计，使大屏可视化更加酷炫。3D模块化：是指将现有的3D效果拆分为单独的模块，并且能够通过将模块进行组合形成内容丰富、大气美观的3D效果。Webgl：一种3D绘图协议，这种技术允许JavaScript和OpenGLES2.0结合在一起，使得在支持HTML的canvas标签的浏览器中，不需要安装任何插件，便可以使用基于OpenGLES2.0的API在canvas中进行2D和3D渲染。GLSL:是一个以C语言为基础的高阶着色语言。它是由OpenGLARB所建立，提供开发者对绘图管线更多的直接控制，而无需使用汇编语言或硬件规格语言。随着近年来显卡的进步，已在渲染管线中的顶点（vertex）和片断（fragment）层次中，加入更具弹性的新功能。达到在这个层次中，使用片断和顶点着色器的可编程性。Shader:即着色器，是指在计算机图形系统将三维模型渲染到二维屏幕上的过程是有固定渲染管线的，而渲染管线中可以编程的部分就是着色器，包括顶点着色器和片元着色器。前端：是指创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。Webpack:一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个独立文件。实施例1一种基于webgl提升设计效率的方法的实现步骤如下：第一步，确定系统中需要内置的3D效果模块种类，3D效果模块种类包括粒子、飞线、辉光等等，提取各个3D效果模块通用及私有配置，确定默认参数值，构建webgl基础环境；其中3D效果模块化是将复杂的3D效果拆分成一个个单独的效果，即模块化。第二步，结合GLSL语言，根据各模块效果编写着色器代码：a.将各3D效果模块进行初始化顶点数据attribute_positions,颜色数据本文档来自技高网...

【技术保护点】
1.一种基于webgl提升设计效率的方法，其特征在于，/n根据所需3D效果模块编写着色器，根据不同的3D效果组合进行不同着色器拼接后渲染，最后显示。/n

【技术特征摘要】
1.一种基于webgl提升设计效率的方法，其特征在于，
根据所需3D效果模块编写着色器，根据不同的3D效果组合进行不同着色器拼接后渲染，最后显示。


2.根据权利要求1所述的一种基于webgl提升设计效率的方法，其特征在于，编写着色器之前需先确定系统中需要内置的3D效果模块种类，提取各个模块通用及私有配置，确定默认参数值，构建webgl基础环境。


3.根据权利要求2所述的一种基于webgl提升设计效率的方法，其特征在于，3D效果模块种类包括粒子、飞线、辉光。


4.根据权利要求3所述的一种基于webgl提升设计效率的方法，其特征在于，根据所需3D效果模块编写着色器的具体过程如下：
S1、将各3D效果模块进行初始化顶点数据attribute_positions，颜色数据attribute_colors，创建缓冲区对象并写入顶点数据和颜色数据；
S2、初始化时间参数uniform_time，实现各个模块动画效果根据步骤S1中顶...

【专利技术属性】
技术研发人员：张艳清，杜凯，徐祥，张艳，王国玉，
申请(专利权)人：成都四方伟业软件股份有限公司，
类型：发明
国别省市：四川;51