CN112506511A - Method and device for improving design efficiency based on webgl - Google Patents

Abstract

The invention discloses a method and a device for improving design efficiency based on webgl, and mainly solves the problems that in the prior art, the manufacturing cost is high, files are large, developers cannot know development logic and the development cost of companies is increased when 3D effects are manufactured through a U3D editor. The method for improving the design efficiency based on the webgl comprises the following steps: and compiling a shader according to the required 3D effect module, performing splicing and rendering of different shaders according to different 3D effect combinations, and finally displaying. Through the scheme, the invention achieves the purposes of facilitating development of relevant requirements of developers, realizing reasonable utilization of human resources of companies and reducing cost, and has very high practical value and popularization value.

Description

Method and device for improving design efficiency based on webgl

Technical Field

The invention relates to the field of 3D visualization, in particular to a method and a device for improving design efficiency based on webgl.

Background

The U3D editor has strong functions and can make very rich 3D effects; generally, 3D composition is realized by a U3D editor, but in the process, a 3D effect needs to be made according to a service scene, and then a video or a file supported by the U3D editor is exported and handed to a developer for contrast development, so that a professional special effect maker is needed, which increases the cost for making the 3D effect, and meanwhile, the file or video obtained by the developer is often large, has poor cross-platform performance, can only obtain the effect, and cannot know the development logic therein, thereby increasing the development investment cost of a company.

Disclosure of Invention

The invention aims to provide a method and a device for improving design efficiency based on webgl, and aims to solve the problems that the existing method for manufacturing a 3D effect through a U3D editor is high in manufacturing cost and large in file, developers cannot know development logic from the existing method, and the development cost of a company is increased.

In order to solve the above problems, the present invention provides the following technical solutions:

a method for improving design efficiency based on webgl comprises the following steps: and compiling a shader according to the required 3D effect module, performing splicing and rendering of different shaders according to different 3D effect combinations, and finally displaying.

The existing synthesis method for realizing 3D effect based on U3D editor comprises the following steps: step one, creating a scene and importing a design draft; secondly, manufacturing a 3D effect according to the service scene; thirdly, exporting the video or files supported by U3D to be developed by developers; in the process, professional special effect making personnel are needed in the second step, and the 3D effect making cost is increased; the files or videos exported in the third step are often large and have poor cross-platform performance, developers can only know the effect and do not know the logic of manufacturing, the working difficulty is increased, and the development investment cost is increased; according to the invention, the 3D effect is modularized, each effect module writes a shader respectively and is finally coded into the total shader, a visual interactive interface is established, so that the visual 3D visual effect can be conveniently designed by art workers, and the intervention of developers is not required, thereby reducing the human resource cost of a company for implementing a large-screen visual project.

Furthermore, before writing the shader, the type of a 3D effect module which needs to be built in the system needs to be determined, the general and private configuration of each module is extracted, the default parameter value is determined, and the webgl basic environment is constructed.

Further, the 3D effect module types include particles, flying lines, and glowing.

Further, the specific process of writing the shader according to the required 3D effect module is as follows:

s1, initializing vertex data attribute _ positions and color data attribute _ colors of each 3D effect module, creating a buffer area object and writing the vertex data and the color data;

s2, initializing a time parameter uniform _ time, and realizing a method that animation effects of each module change according to the vertex data and the color data in the step S1 according to the time parameter;

s3, the vertex data and color data of each 3D effect module in the step S1 and the method in the step S2 are compiled into a total shader for managing the general parameters and methods of each 3D effect module.

Further, in step S3, the total shader is programmed with # include < xx >.

Furthermore, the spliced shader is guided into a GPU rendering pipeline for rendering, and then the final effect is displayed at the web end.

Furthermore, the effect displayed after splicing and rendering is exported to a file which can be directly browsed by a browser through webpack.

An apparatus for improving design efficiency based on webgl comprises a memory: for storing executable instructions; a processor: the method is used for executing the executable instructions stored in the memory and realizing a method for improving the design efficiency based on webgl.

Compared with the prior art, the invention has the following beneficial effects:

(1) according to the invention, the 3D effect is modularized, each effect module respectively compiles a shader and finally codes the shader into the total shader, the corresponding 3D effects are spliced and combined as required, and the combined display mode is carried out through user interaction, so that the large-screen UI design efficiency is improved, the human cost and resource investment of a company are reduced, and the large-screen visualization project period is shortened.

(2) According to the invention, the 3D effect is modularized, each effect module writes a shader respectively and is finally coded into the total shader to form a visual interactive interface, so that the visual 3D visual effect can be conveniently designed by art workers, and the intervention of developers is not required, thereby reducing the human resource cost of a company for implementing a large-screen visual project.

(3) According to the invention, the large-screen 3D effect can be rapidly designed at the web end, the design efficiency is improved, the client requirements are rapidly responded, the development of related requirements of developers is facilitated, the reasonable utilization of human resources of companies is realized, the cost is reduced, and the project implementation period is shortened.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention clearer, the present invention will be further described in detail with reference to the following embodiments, which should not be construed as limiting the present invention, and all other embodiments obtained by those skilled in the art without making creative efforts shall fall within the protection scope of the present invention.

Before further detailed description of the embodiments of the present invention, terms and expressions mentioned in the embodiments of the present invention are explained, and the terms and expressions mentioned in the embodiments of the present invention are applied to the following explanations.

Large screen visualization: the method is characterized in that key indexes of some businesses are displayed on one or more LED large screens in a data visualization mode such as bar charts, area charts, line charts and the like, and the method is often used in exhibition centers of companies, offices of boss, urban traffic control centers, trading halls and the like.

Designing a large-screen UI: the method is characterized in that a UI designer determines analysis dimensions and selects a proper data visualization scheme by extracting key indexes of a service scene, and then performs page layout and division on a large screen with determined size and design style.

3D effect design: the large-screen UI design can be enriched by displaying the dynamic effect which cannot be displayed by the traditional two-dimensional mode in a three-dimensional mode in the large-screen UI design, including river flow, airplane flight path, view angle switching and the like, so that the large-screen visualization is cool and dazzling.

3D modularization: the existing 3D effect is divided into separate modules, and the modules are combined to form the 3D effect with rich content and beautiful atmosphere.

Webgl: A3D drawing protocol allows JavaScript and OpenGL ES 2.0 to be combined together, so that in a browser supporting HTML canvas tags, 2D and 3D rendering can be performed in the canvas using OpenGL ES 2.0-based APIs without installing any plug-ins.

GLSL is a high-level coloring language based on C language. It is built by OpenGL ARBs, providing developers more direct control over the graphics pipeline, without the use of assembly language or hardware specification language. With the advancement of graphics cards in recent years, new more flexible functions have been added at the vertex (vertex) and fragment (fragment) level in the rendering pipeline. To achieve the programmability in this level, fragment and vertex shaders are used.

Shader, i.e. Shader, means that the process of rendering a three-dimensional model on a two-dimensional screen in a computer graphics system has a fixed rendering pipeline, and the programmable parts in the rendering pipeline are shaders, including a vertex Shader and a fragment Shader.

Front end: the method is a process of creating a front-end interface such as a Web page or app and presenting the front-end interface to a user, and realizes user interface interaction of an Internet product through HTML, CSS and JavaScript and various derived technologies, frames and solutions.

Webpack-a static module wrapper (module bundler) for modern JavaScript applications. As the webpack processes the application, it recursively builds a dependency graph (dependency graph) containing each of the modules required by the application, and then packages all of the modules into one or more independent files.

Example 1

The method for improving the design efficiency based on the webgl comprises the following implementation steps:

the method comprises the steps of firstly, determining the type of a 3D effect module which needs to be built in a system, wherein the type of the 3D effect module comprises particles, flying lines, glow and the like, extracting general and private configurations of each 3D effect module, determining default parameter values, and constructing a webgl basic environment; the 3D effect modularization is to split a complex 3D effect into individual effects, i.e. modularization.

And secondly, combining with a GLSL language, writing shader codes according to the effect of each module:

a. initializing vertex data attributes _ positions and color data attributes _ colors for each 3D effect module, creating a buffer area object and writing the vertex data and the color data;

b. initializing a time parameter uniform _ time, and realizing a method for changing animation effect vertex data and color data of each module according to the time parameter;

c. and c, compiling the vertex data and the color data of the 3D effect modules in the step a and the method in the step b into a total shader code for managing general parameters and methods of all the 3D modules, and compiling all the 3D effect module shaders into the total shader through # include < xx >, so that all the 3D effect module shaders can be combined at will.

And thirdly, splicing different shaders according to different 3D effect module combinations, guiding the spliced shaders into a GPU rendering pipeline, and displaying the final effect at a web end.

And fourthly, exporting the final effect as a file which can be directly browsed by a browser by using webpack.

Example 2

An apparatus for improving design efficiency based on webgl comprises a memory: for storing executable instructions; a processor: the method is used for executing the executable instructions stored in the memory and realizing a method for improving the design efficiency based on webgl.

Example 3

The embodiment is to implement part of the function codes of the scheme:

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

'uniform float width',// width

' uniform float maxHeight;,// maximum height

' attribute vec3 translate ', ' location offset value

'attribute vec2 size',// size

'varying vec3 c_position;',

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

'#include <ctmAnimat_uniform>',

'void main() {',

// calculation 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);',

// rotation 180 around the z-axis

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

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

'mPosition += translate.xyz;',

V/a public _ animal- -an essential variable vec3 mP ion, float uvy;

'float uvy = 1.0;',

'#include <ctmAnimat_vert_in> ', // in

'#include <ctmAnimat_vert_out> ', // out

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

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

according to the invention, the large-screen 3D effect can be rapidly designed at the web end, the design efficiency is improved, the client requirements are rapidly responded, the development of related requirements of developers is facilitated, the reasonable utilization of human resources of companies is realized, the cost is reduced, and the project implementation period is shortened.

In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method can be implemented in other ways. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved.

In addition, the functional modules in the embodiments of the present invention may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.

The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims (8)

1. A method for improving design efficiency based on webgl is characterized in that,

and compiling a shader according to the required 3D effect module, performing splicing and rendering of different shaders according to different 3D effect combinations, and finally displaying.

2. The method as claimed in claim 1, wherein before programming the shader, the types of 3D effect modules to be built in the system are determined, the general and private configurations of each module are extracted, the default parameter values are determined, and the webgl basic environment is constructed.

3. The method of claim 2, wherein the 3D effects module category comprises particle, fly line, glow.

4. The method of claim 3, wherein the shader is written according to the 3D effect module as follows:

s1, initializing vertex data attribute _ positions and color data attribute _ colors of each 3D effect module, creating a buffer area object and writing the vertex data and the color data;

s2, initializing a time parameter uniform _ time, and realizing a method that animation effects of each module change according to the vertex data and the color data in the step S1 according to the time parameter;

s3, the vertex data and color data of each 3D effect module in the step S1 and the method in the step S2 are compiled into a total shader for managing the general parameters and methods of each 3D effect module.

5. The method of claim 4, wherein the step S3 is performed by # include < xx > incorporated into a total shader.

6. The method of claim 1, wherein the tiled shaders are directed to a GPU rendering pipeline for rendering and then displaying the final effect on the web side.

7. The method of claim 1, wherein the effect of the tiled rendered display is exported to a file that can be directly browsed by a browser via webpack.

8. A device for improving design efficiency based on webgl is characterized by comprising

A memory: for storing executable instructions;

a processor: the executable instructions stored in the memory are executed to implement a method for increasing design efficiency based on webgl as claimed in any one of claims 1 to 7.