WebGL technology route in digital twin scene rendering capability

After using the 3D modeling technology to construct the virtual reality scene, it is necessary to realize the high-precision, high-fidelity and real-time rendering of the scene through the rendering engine. At the same time, it is necessary to integrate the data information in the real scene into the virtual scene to realize the monitoring and control of the real situation.

At present, most digital twin city projects generally have two options for the technical selection of 3D rendering engines, one is the mainstream game engine technology route based on C/S architecture (Unreal Engine, Unity3D, etc.), and the other is based on B The WebGL technical route of /S architecture.

The digital twin scene rendering capability is one of the core capabilities in the actual delivery process of the current digital twin project. This section will introduce the two technical architectures based on B/S and C/S and the cloud rendering technology architecture.

1. WebGL technology route
1) Three major digital twin technology routes based on WebGL
A. Pure code development based on WebGL

Use WebGL-based rendering libraries for direct development, such as three.js and babylon.js. Applicable to projects with small volume, short development cycle and low effect

Advantage:

High flexibility : in-depth customization according to business needs, and easy to communicate or integrate with other business systems; less code redundancy: small code size, easy to troubleshoot; low construction cost;

Disadvantages:

Low reusability : Due to the lack of reusable code for in-depth customization according to business needs, it is difficult to modularize so that it is impossible to deliver projects in batches through this route;

Poor effect : the supported 3D scene is small in size, and the rendering effect that can be achieved is relatively limited, making it difficult to achieve medium and large-scale scenes or more realistic scene styles;

B. Support H5 game engine packaging WebGL

Use the C/S game engine to develop the scene and package it into WebGL, such as Cocos, Egret, Unity3D. It is suitable for projects that are biased towards games in terms of business characteristics and do not require integration and communication with other business systems.

Advantage:

Low construction cost : C/S game engine provides relatively mature editors and tools, which can achieve high-quality effects and high performance at low cost; high reusability; good 3D rendering effect;

Disadvantages:

Low flexibility : Difficult to embed into other business systems or communications; high cost or impossible to achieve unique business in professional fields; difficult to carry out secondary development based on scenarios; high learning costs;

Lots of code redundancy : In the game scene, the scene and logic are equally important, and the logic is mostly event-driven. And the game scene has high requirements on animation, special effects, performance, packaging and UI. However, the digital twin focuses on scenarios, light logic, and is mainly data-driven. Due to business differences, the packaged WebGL code is too redundant;

High maintenance cost : the packaging is too high, there is little room for post-optimization, and bugs are difficult to troubleshoot; every scene modification needs to repackage WebGL;

C. Self-developed B/S low-code fusion rendering engine

Based on the WebGL packaged rendering library, develop a fusion rendering engine suitable for digital twin projects, and then develop based on self-developed engines, such as the EasyTwin digital twin fusion rendering engine. It is suitable for a large number of medium and large-scale digital twin needs, and there is a certain degree of reproducibility between projects and the need for coupling with other business systems.

Advantage:

High flexibility : can be freely customized according to general business;

Low learning cost : low-code development process, developers do not need to be familiar with technology stacks such as WebGL;

The size of the code is appropriate : the engine function is completely determined according to the business; it can go deep into the bottom layer of the engine to optimize the performance and rendering effect; it is efficient to troubleshoot bugs and solve problems thoroughly;

High reusability : the reusable point of the business can be supported by the engine layer;

Low maintenance cost : Low-code and configuration-based implementation of twin scenarios, business modification and scenario modification do not require code modification;

The effect is better : various general or customized editors can be developed to realize the combination of technology and art;

Disadvantages :

The R&D cost of the rendering engine is high : strong generalization of technical capabilities, scene editing capabilities of the configuration engine, rendering effects, and business logic development capabilities are required;

2) WebGL-based digital twin scene practice

Taking the vegetation in the natural scene as an example, the vegetation in line with the natural environment is drawn on the terrain model based on WebGL, and the performance consumption is controlled.

Preparation:
insert image description here

① Generate a terrain height map (middle image) based on the terrain grid, white indicates the highest point, black indicates the lowest point, and check the vertical coordinates of the vegetation through the height of the mountain;

② On the basis of the existing terrain model, place the camera directly above the model, covering the entire terrain, render one frame and export the depth buffer;

③ Process it into a black and white picture in PS, white means "plant a tree", and black means "not plant a tree" (left picture);

④ Calculate and generate the world coordinates of vegetation points;

Generate vegetation example:

① Generate a noise map, which is used to give a regular randomness of the XY coordinates, types, hues, and sizes of the vegetation (right picture);

② In order to have the upper and lower spatial levels of the generated vegetation, the vegetation will include the following expressions: soil texture, grass texture, grass, shrubs, trees;

③ In order to generate vegetation with far and near spatial levels, there will be the following ways to realize vegetation: model, billboard, ViewBillboard;

Performance optimization:

① Frustum removal;

② Occlusion removal;

③ Instanced rendering;

④ LOD;

⑤ GPU Drvien;

Generating effect:

insert image description here

Guess you like

Origin blog.csdn.net/amumuum/article/details/131416379