数字孪生方案思维导图模板_ProcessOn思维导图、流程图

C/S渲染

常见渲染引擎

UE

Unity

底层技术

OpenGL

B/S渲染

常见渲染引擎

WebGLStudio.js

A-Frame

PlayCanvas

Babylon.js

Three.js

底层技术

WebGL

OpenGL ES

渲染点

场景设置

光照

纹理

着色器

GLSL ES

图形管道

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

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

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

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

以Three.js引擎为例

减少几何体数量和复杂度

合并几何体来减少绘制调用数(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剔除掉摄像机视场外的物体

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

以Three.js为例

使用高效的几何体和材质

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

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

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

实现逼真的光照和阴影

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

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

使用高级的渲染技术

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

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

屏幕空间技术

使用屏幕空间反射（Screen Space Reflections, SSR）和屏幕空间环境遮蔽（Screen Space Ambient Occlusion, SSAO）增加视觉效果

使用后处理效果

后处理可以提高渲染质量，比如使用抗锯齿（如FXAA), 光晕效果（Bloom），景深（Depth of Field）等效果

优化光源

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

精心安排场景加载

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

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

C/S转化B/S

UE4 4.23支持导出HTML

WebAssembly

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

像素流送技术

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

Three.js

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

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

案例效果

游戏引擎

UE

原生

建模

CGA程序化建模

QGIS

GIS数据获取与导入

POI数据获取

教程

百度/高德API批量获取POI

教程

City Engine

支持导出类型（很多）

在线预览

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

编写CGA规则

参考教程

光影年年B站

应用场景

远端视角的次要模型

精细化建模

应用场景

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

像素流送（云渲染）

什么是像素流送？

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

优点：

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

缺点：

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

增强

UEPlus for HTML5（端渲染）

什么是UEPlus for HTML5？

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

特性

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

背景

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

限制

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

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

案例

智慧园区

Mapmost SDK for UE（端渲染）

什么是Mapmost SDK for UE？

基于UE5的扩展插件

背景

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