数字孪生场景渲染能力中的WebGL技术路线

数字孪生场景渲染能力中的WebGL技术路线

引用

CSDN

1.

https://blog.csdn.net/amumuum/article/details/131416379

数字孪生场景渲染能力是当下数字孪生项目实际交付过程中的核心关注能力之一。本文将基于B/S和C/S两种技术架构以及云渲染技术架构分别介绍。

WebGL技术路线

基于WebGL的三大数字孪生技术路线

A. 基于WebGL纯代码开发

使用基于WebGL封装的渲染库直接进行开发，例如three.js、babylon.js。适用于体量较小、开发周期短而效果相求不高的项目。

优势：

• 灵活性高：根据业务需求进行深度定制，且易于其他业务系统通信或集成；
• 代码冗余少：代码体量小，易于问题排查；
• 建设成本低；

劣势：

• 复用性低：由于根据业务需求进行深度定制可复用的代码少，难以模块化以至于无法通过该路线批量化交付项目；
• 效果较差：能支撑的三维场景体量小，能达到的渲染效果比较有限，难以实现中大型场景或较为写实的场景风格；

B. 支持H5的游戏引擎打包WebGL

使用C/S的游戏引擎开发场景后打包成WebGL，例如Cocos、Egret、Unity3D。适用于业务特点上偏向于游戏，且无需于其他业务系统集成、通信的项目。

优势：

• 建设成本较低：C/S的游戏引擎提供了较为成熟完善的编辑器和工具，能够低成本实现高质量效果和高性能；
• 复用性高；
• 三维渲染效果好；

劣势：

• 灵活性低：难以嵌入其他业务系统或通信；
• 实现专业领域下的特有业务成本高或不可实现；
• 难以基于场景进行二次开发；
• 学习成本高；
• 代码冗余多：游戏场景中场景和逻辑同等重要，逻辑上多为事件驱动。且游戏场景对动画、特效、性能、包体和UI要求都很高。而数字孪生重场景、轻逻辑、以数据驱动为主，由于业务差异导致打包的WebGL代码冗余过多；
• 维护成本高：封装度过高，做后期优化空间小，bug难排查；每次场景修改都需要重新打包WebGL；

C. 自研B/S低代码融合渲染引擎

基于WebGL封装的渲染库开发适用于数字孪生项目的融合渲染引擎，再基于自研的引擎的进行开发，例如EasyTwin数字孪生融合渲染引擎。适用于有大量中大型数字孪生需求，项目间具有一定的可复制性且有与别的业务系统耦合的需求。

优势：

• 灵活性高：可根据通用业务自由定制；
• 学习成本较低：低代码化开发过程，开发人员无需熟知WebGL等技术栈；
• 代码体量合适：完全根据业务确定引擎功能；可深入到引擎底层做性能以及渲染效果的优化；排查bug高效、解决问题彻底；
• 复用性高：业务的可复用点可得到引擎层的支持；
• 维护成本低：低代码化、配置化实现孪生场景，业务的修改以及场景上的修改不需要修改代码；
• 效果较好：可开发各种通用或定制的编辑器，实现技术与美术的结合；

劣势：

• 渲染引擎的研发成本高：需要较强的技术能力通用化、组态化引擎的场景编辑能力、渲染效果、以及业务逻辑开发能力；

基于WebGL的数字孪生场景实践

以自然场景中的植被为例进行介绍，基于WebGL在地形模型上刷出符合自然环境的植被，并控制性能消耗。

准备工作：

1. 根据地形网格生成地形高度图(中间图)，白色表示最高点，黑色表示最低点，通过山的高度校对植被的垂直方向坐标；
2. 在现有地形模型的基础上，把相机放到模型正上方，范围覆盖整个地形，渲染一帧导出深度缓存；
3. 在PS中处理成一个黑白图片，白色表示”种树”，黑色表示“不种树”(左图)；
4. 计算生成植被点位的世界坐标；

生成植被示例：

1. 生成噪声图，用于给定植被的XY坐标、种类、色调、大小一个有规律的随机(右图)；
2. 为了生成的植被具备上下的空间层次，植被会包括以下表现方式：土壤纹理、草地纹理、草、灌木、树木；
3. 为了生成的植被具备远近的空间层次，会有以下实现植被的方式：模型、广告牌、ViewBillboard；

性能优化：

1. 视锥体剔除；
2. 遮挡剔除；
3. 实例化渲染；
4. LOD；
5. GPU Drvien；

生成效果：