一种基于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中通过#include编入总着色器中。

进一步的，拼接后的着色器导入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和OpenGL ES 2.0结合在一起，使得在支持HTML 的 canvas 标签的浏览器中，不需要安装任何插件，便可以使用基于OpenGL ES 2.0 的 API 在 canvas 中进行2D和3D渲染。

GLSL: 是一个以C语言为基础的高阶着色语言。它是由 OpenGL ARB 所建立，提供开发者对绘图管线更多的直接控制，而无需使用汇编语言或硬件规格语言。随着近年来显卡的进步， 已在渲染管线中的顶点（vertex）和片断（fragment）层次中，加入更具弹性的新功能。 达到在这个层次中，使用片断和顶点着色器的可编程性。

Shader:即着色器，是指在计算机图形系统将三维模型渲染到二维屏幕上的过程是有固定渲染管线的，而渲染管线中可以编程的部分就是着色器，包括顶点着色器和片元着色器。

前端：是指创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

Webpack:一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个独立文件。

实施例1

一种基于webgl提升设计效率的方法的实现步骤如下：

第一步，确定系统中需要内置的3D效果模块种类，3D效果模块种类包括粒子、飞线、辉光等等，提取各个3D效果模块通用及私有配置，确定默认参数值，构建webgl基础环境；其中3D效果模块化是将复杂的3D效果拆分成一个个单独的效果，即模块化。

第二步，结合GLSL语言，根据各模块效果编写着色器代码：

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

b.初始化时间参数uniform_time,实现各个模块动画效果顶点数据及颜色数据根据时间参数变化的方法；

c.将步骤a中3D效果模块的顶点数据和颜色数据，步骤b中的方法编写总着色器代码，用于管理各3D模块的通用参数及方法，并将各3D效果模块着色器通过#include编入总着色器中，这样可以将各3D效果模块着色器进行任意组合。

第三步，根据不同的3D效果模块组合进行不同着色器的拼接，并将拼接好的着色器导入GPU渲染管线中，在web端显示最终效果。

第四步，利用webpack将最终的效果导出为浏览器可以直接浏览的文件。

实施例2

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

实施例3

本实施例为实现本方案的部分功能代码：

'vec4 quaternion = vec4(0, 0, 1, 6.123233995736766e-17);', // 四元数

'uniform float width;', // 宽度

'uniform float maxHeight;', // 最大高度

'attribute vec3 translate;', // 位置偏移值

'attribute vec2 size;', // 大小

'varying vec3 c_position;',

// ---------public_animat-------uniform

'#include ',

'void main() {',

// 计算position

'vec2 scale = vec2(size.x*width,abs(size.y)*maxHeight) + vec2(0.5, 0.5);',

'vec3 mPosition = position*vec3(scale.x,scale.y,scale.x);',

// 绕z轴旋转180

'if(size.y<0.)mPosition += 2.0 * cross( quaternion.xyz, cross(quaternion.xyz, mPosition ) '

+ '+ quaternion.w * mPosition );',

'mPosition += translate.xyz;',

// ---------public_animat-------必要变量 vec3 mPosition; floatuvy;

'float uvy = 1.0;',

'#include ', // in

'#include ', // out

'c_position=vec3(mPosition.x,abs(mPosition.y), mPosition.z);',

'gl_Position=projectionMatrix*modelViewMatrix*vec4(mPosition,1.0);', '}'

本发明在web端能快速进行大屏3D效果的设计，提升设计效率，快速响应客户需求，方便开发人员进行相关需求的开发，实现公司人力资源的合理利用，降低成本，缩短项目实施周期。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述方法的全部或部分步骤。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。