数字孪生方案

UE

Unity

常见渲染引擎

OpenGL

底层技术

C/S渲染

WebGLStudio.js

A-Frame

PlayCanvas

Babylon.js

Three.js

场景设置

光照

纹理

GLSL ES

着色器

图形管道

渲染点

OpenGL ES

WebGL

B/S渲染

C/S一般为独立程序运行，不受限制；B/S在浏览器中运行，受浏览器沙箱的安全性限制，Web的内存管理限制

着色能力上，C/S采用HLSL（高级着色语言）；B/S采用GLSL ES

为什么B/S比C/S渲染效果差？

合并几何体来减少绘制调用数(draw calls)

简化模型（减少多边形数量）以减少渲染负担

减少几何体数量和复杂度

避免过度使用高级材质如ShaderMaterial或RawShaderMaterial除非确实需要

对材质进行合理的设置，比如关闭不需要的光反射特性

使用正确的材质类型

使用requestAnimationFrame来控制渲染循环，而不是使用setTimeout或setInterval

使用WebGLRenderer的.frustumCulled属性，确保只渲染相机视锥体内的物体

使用层(Layers)系统来决定哪些物体需要渲染

优化渲染流程

使用压缩纹理以减少内存使用和提高加载速度

适当地缩小纹理分辨率

使用mipmap以提高渲染质量和性能

注意纹理的使用

尽量减少场景中使用的光源数量

使用廉价（性能开销小的）光源，例如AmbientLight、HemisphereLight，避免过度使用费性能的SpotLight和PointLight

利用Three.js的内置性能优化功能

启用Renderer的.antialias来提高场景的平滑度，但要注意性能影响

使用.gammaOutput和.gammaFactor来获得更好的颜色管理和降低运算复杂度

光源优化

当需要渲染大量几乎相同的物体时，利用InstancedMesh以减少内存占用和提高性能

使用数据实例化

根据物体与相机的距离渲染不同的模型，远处的物体使用更低细节的模型

在合适的时候使用LOD (Level Of Detail)

通过性能分析工具，如Chrome DevTools，识别瓶颈

利用JavaScript代码优化策略，避免在渲染循环中创建垃圾，减少内存抖动

执行代码和工作流程优化

使用Frustum Culling剔除掉摄像机视场外的物体

剔除和摄像机视角优化

以Three.js引擎为例

怎么优化B/S渲染运行性能？

使用优化过的模型，减少不必要的细节

使用合理的纹理分辨率，避免过高的图像尺寸

使用贴图来提升细节而不是增加几何体的复杂度（法线贴图、置换贴图等）

使用高效的几何体和材质

使用阴影贴图来提供更深的场景感，但要精心调节分辨率和范围以优化性能

运用环境遮蔽（Ambient Occlusion）来模拟光线如何在紧密的空间内反弹

实现逼真的光照和阴影

实现物理渲染（PBR）流程可以提供更加逼真的材料外观

使用HDR渲染与色调映射（Tone Mapping）来提升场景的动态范围

使用高级的渲染技术

屏幕空间技术

使用后处理效果

选择正确的光源类型（如点光源、聚光灯等）和它们的位置，最大限度地提高视觉效果的同时确保效率

优化光源

使用预加载技术和懒加载，确保用户感知上的加载时间更短

分割模型和场景，按需加载，减少初始加载时间

精心安排场景加载

以Three.js为例

WebAssembly

渲染效果可能会有降低（非绝对），实际效果需要测试

UE4 4.23支持导出HTML

类似远程效果，跳过B/S的限制，但网络环境要求高、客户端数量限制或追加的一些问题、支持流方式交互（鼠标、键盘、触屏）支持程度效果要测试

像素流送技术

C/S转化B/S

怎么优化B/S渲染效果并兼顾运行性能？

优点：轻量快速、简单、浏览器友好

缺点：与3D引擎相比性能要低、缺少高级光照效果、模糊

案例效果

教程POI

教程

POI数据获取

API获取

百度/高德API批量获取POI

GIS数据获取与导入

QGIS

支持导出类型（很多）

导出CityEngine WebScene格式后上传到“城市幻想”网站，可在线观看

在线预览

City Engine

编写CGA规则

光影年年B站

参考教程

远端视角的次要模型

应用场景

CGA程序化建模

近端视角的主要模型、地标建筑模型

精细化建模

建模

在云端服务器上运行虚幻引擎应用程序，通过WebRTC将渲染的帧和音频流送到浏览器和移动设备

什么是像素流送？

1、移动设备和轻量级网页浏览器能借此显示原本无法显示的高质量画面。其能借助拥有强大GPU的本地桌面应用程序中可用的渲染功能，以高分辨率显示复杂场景。2、用户无需提前下载大型可执行文件或内容文件，也不需要安装任何内容。用户需要下载的唯一内容便是播放的媒体流送。3、无需创建并发布多个单独的包即可支持多平台。针对Windows打包应用程序后，用户使用任意平台均可体验项目。用户可在任意支持WebRTC连接模型的主流浏览器（如Google Chrome和Mozilla Firefox）中，在电脑、iOS和Android平台观看流送。详情参见像素流送参考。4、像素流送系统所含的组件数极少，在本地网络中进行设置相对容易。然而，经验丰富的团队也完全可以将其用作基础来创建自定义云端平台，部署网页服务。5、像素流送使用WebRTC点对点通信框架，使用者和虚幻引擎应用程序之间的延迟很低。

优点：

1、对网络稳定性要求高，网速波动会引起画面卡顿，操作体验类似于 “ 远程桌面 ” ；2、需根据最大支持的并发用户数，配置服务器显卡，部署成本高。每增加一部分用户，都对服务器显卡提出新的要求。3、服务器部署技术门槛较高，设置比较复杂

缺点：

像素流送（云渲染）

原生

基于UE4二次开发增强扩展H5能力，利用Webassembly提升web渲染性能

什么是UEPlus for HTML5？

1、支持UE4.27及更早版本2、支持UE UMG界面系统导出3、支持国产化操作系统4、支持导出场景被各种框架调用，包括Vue2/3、React5、支持一套开发同时打包发布客户端和网页端版本7、支持Chrome、Edge、FireFox浏览器，无需特别设置8、支持多人同时访问9、场景突破2GB限制，场景大10、无需配置服务器显卡，部署更省钱11、刷新页面不重复加载12、支持场景中视频导出播放

特性

官网

上海勇进软件有限公司   官网

背景

目前只支持UE4.27.2版本，目前UIPower公司正在开发基于UE5的增强

UE本身就支持H5，但是由于UE战略坚定转向游戏行业，则在UE4.27.2之后版本不再提供H5能力

限制

智慧园区

案例

UEPlus for HTML5（端渲染）

基于UE5的扩展插件

什么是Mapmost SDK for UE？

园测信息科技股份有限公司   官网

目前支持5.1.1版本，需要授权激活

智慧水利

Mapmost SDK for UE（端渲染）

增强

案例少，不支持端渲染，不建议采用

游戏引擎

视觉渲染引擎原生基于 WebGL 开发

山海鲸

EasyV

DTS

自研3D引擎厂商

视觉效果：  强游戏引擎（UE\\Unity）> UE for HTML > 山海鲸效果  > Three.js

数字孪生方案调研