1.常见的3D渲染引擎

一、模型渲染解决方案

1. Three.js

a. 简述

1. Three.js 是一款基于 WebGL 的强大 JavaScript 库，用于在 Web 浏览器中创建和呈现三维图形。它提供了基础的 3D 渲染功能，包括几何体创建、材质和光照效果。通过设计API，Three.js 成功地降低了 WebGL 的复杂性，开发3D 场景、模型、动画以及粒子系统。

b. 示例

1. 小米su7示例：su7 (gamemcu.com)
2. 汽车移动游戏：_______________🚗_____ (bruno-simon.com)
3. 数字孪生-智慧工厂：数字像素 -可视化设计、开发、互动综合服务平台
4. VR 看房：宸翰/threejs-vr-viewroom

c. 主要功能

1. 3D 场景与模型：Three.js 支持导入多种格式的 3D 模型，包括 OBJ, STL, FBX 等，并可以创建自定义的 3D 几何体。
2. 材质与材质材料：Three.js 支持多种材质类型，如基础材质、材质材料等，可以实现逼真的渲染效果。
3. 灯光与阴影：Three.js 支持各种光源，如点光源、平行光源等，并且可以设置阴影，增强场景的真实感。
4. 动画与物理引擎：Three.js 内置动画库，可以创建关键帧动画，同时也支持使用 Cannon.js 等物理引擎实现更真实的物理动画效果。
5. 插件扩展：Three.js 有活跃的社区，有许多第三方插件可以扩展其功能，如 GLTFLoader 用于导入 GLTF 模型，OrbitControls 用于轨迹控制等。
6. 支持 VR 与 AR：Three.js 支持 VR 和 AR 体验，可以通过相关插件实现在 VR 设备上的 3D 应用。

d. 特点

1. 开源，上手难度低；中文资料较多，方便查找文档。
2. 适用于小场景，可以做中小型的重表现的Web项目。
3. 支持格式：stl，obj+mtl+png，FBX，gltf格式（主要格式，兼容性比较好）

e. 应用场景

数字孪生、智慧城市、智慧园区、网页游戏、数据可视化、三维展示等。

f. 相关教程

1. 官网入门教程（简单入门，API参考; 官网打开较慢，可将文档下载到本地，请看2.threejs简介）
   three.js docs
2. Three.js 中文网（大量代码图片，方便理解学习）
   Three.js中文网
3. Three.js入门（大量示例，边学边练）
   入门：真正的乐趣从这里开始！ | Discover three.js (discoverthreejs.com)
    

2. Babylon.js

a. 简介

1. Babylon.js 是一个开源的 3D 引擎，专门为 Web 浏览器设计，允许开发者创建和展示交互式 3D 内容，无需安装任何插件。
2. 它是基于WebGL 技术构建的，这意味着它可以利用现代浏览器内置的图形硬件加速功能来渲染 3D 图形。

b. 示例

1. 智慧看板：营销管理智慧中心 - 预览仪表板 - Wyn 商业智能 (grapecity.com.cn)

c. 特点

1. 开源，强大，美观，简单和开放的3D渲染体验，支持ts。
2. 适合做中大型项目，尤其是多种媒体混杂的或者是游戏项目VR体验项目。
3. 支持格式：glTF，OBJ，STL，.babylon (常用格式)
4. 模型显示不失真，有较为详细的api文档。
5. 学习难度大、周期长。

d. 主要功能

1. WebGL 支持：支持WebGL 1.0、2.0 和 WebGPU，使得3D 内容可以在无需插件的情况下在现代浏览器中运行。
2. 完整的场景图：包括灯光、摄像机、材质、网格、动画、音频和动作等元素。
3. 跨平台原生应用部署：支持 iOS、Android、MacOS、Win32 和 UWP（微软基于win10开发的通用平台，微软希望自己所有的设备（包括Surface，Xbox，HoloLens等）都运行于同样的系统） 等平台。
4. 物理引擎集成：支持 oimo.js、ammo.js 和 cannon.js 等多种物理引擎。
5. 粒子系统：支持 CPU 和 GPU 两种模式渲染的粒子系统，以及立体粒子系统。
6. 基于 Web Audio 的音频引擎：提供高质量的音频支持
7. 硬件加速的 GUI：提供交互式图形控件，如按钮、多选框等。
8. 着色器和渲染：支持节点材质、基于物理的渲染(PBR)、镜面反射、透明度贴图等多种着色器效果。
9. VR 和 WebXR 支持：允许开发者创建沉浸式的虚拟现实体验。

e. 应用场景

游戏开发、教育、建筑可视化、产品展示、数据可视化、虚拟现实和增强现实(AR)。

f. 相关教程

1. Babylon.js 中文网：
   https://www.cnbabylon.com/
2. 教程大全：
   https://doc.cnbabylon.com/
3. 案例大全：
   https://example.cnbabylon.com/

3. Oasis Engine

a. 简介:

Oasis Engine是一套 Web 为先、移动优先、开源共建的实时互动解决方案，采用组件化架构并用 Typescript 编写。它包含渲染、物理、动画、交互、XR等功能，并提供了具备完善工作流的可视化在线编辑器，帮助你在浏览器上创作绚丽的 2D/3D 互动应用。它主要由两部分组成：

b. 示例

官方示例：Galacean Engine

c. 主要功能

1. Web 优先：Oasis Engine 设计为支持Web技术栈，特别是HTML5、CSS3和JavaScript（尤其是TypeScript）。这意味着它能够很好地在Web浏览器中运行，无需安装额外的客户端。
2. 移动优先：考虑到移动设备的普及，Oasis Engine 优化了在移动设备上的表现，包括对触摸输入的支持和对移动硬件的优化。
3. 2D 和 3D 图形支持：Oasis Engine 支持先进的2D和3D图形渲染，能够创建复杂的视觉效果，包括阴影、纹理、动画等。
4. 动画系统：引擎具备强大的动画管理能力，支持多种类型的动画，包括骨骼动画和属性动画。
5. 脚本支持：Oasis Engine 支持使用TypeScript编写脚本来控制游戏逻辑，这是一种静态类型的编程语言，可以提供更好的类型检查和开发效率。
6. 组件化架构：采用组件化的架构，允许开发者灵活地组合和重用功能模块，使开发过程更加高效。
7. 多平台支持：除了Web环境外，Oasis Engine 也支持支付宝小程序，这使得它可以在支付宝生态系统内部署应用。
8. 开源：Oasis Engine 开源的事实意味着开发者社区可以贡献代码、报告错误并参与到引擎的发展中。

d. 特点

1. 支持可视化编辑，在编辑器中导入模型，通过操作栏调整模型与场景信息，大量减少代码工作量。
2. 支持代码导出，可将可视化编辑后的业务进行导出，支持React导出与Vanilla导出。
3. 导出代码可进行二次编辑。
4. 支持移动端渲染。

e. 应用场景

1. 支付宝五福等活动：Oasis Engine 被用来支持支付宝中的各种互动活动，例如“五福”活动，这类活动往往涉及到大量的用户参与和复杂的3D图形展示。
2. 小游戏开发：由于支持Web技术和移动优先的设计，Oasis Engine 可以用于开发在网页和移动平台上运行的小游戏。
3. 互动广告和营销活动
4. 虚拟现实(VR)和增强现实(AR)：尽管主要关注Web技术，Oasis Engine 也可能被扩展至支持VR和AR应用，提供更加沉浸式的体验。

f. 相关教程

官方文档：Galacean Engine

4. Unreal Engine

a. 简介

1. Unreal Engine（简称 UE）是由 Epic Games 开发的一款功能强大的游戏引擎，它被广泛用于开发各种类型的游戏、模拟、可视化项目以及交互式体验。
2. Unreal Engine 5（UE5）是最新版本的引擎，它引入了新的技术和功能，如 Lumen 全局光照系统、Nanite 虚拟化微多边形几何技术等，进一步提高了渲染质量和开发效率。
3. 为什么会推荐 UE , 因为在 UE 中我们可以使用 Cesium for Unreal 插件来将 Cesium 集成到 Unreal Engine 中，从而实现 Cesium 在 Unreal Engine 中的使用。

b. 主要功能

1. Cesium ion 集成：Cesium for Unreal 插件提供了与 Cesium ion 的集成，Cesium ion 是一个基于云的平台，提供了对全球高分辨率 3D 内容的即时访问，包括摄影测量、地形、图像和建筑物。
2. 地理参考组件：CesiumGeoreference 组件允许开发者将场景放置在全球环境中，以便与 Unreal Engine 中的本地环境更平滑地交互。
3. 数据流和可视化：Cesium for Unreal 可以流式传输和可视化来自Cesium ion 的数据，使用开放标准构建丰富的 3D 地理空间应用程序。
4. 跨平台支持：与Unreal Engine 一样，Cesium for Unreal 支持多种平台，包括PC、游戏主机、移动设备和 VR/AR 设备。
5. 开源和免费：作为一个开源项目，Cesium for Unreal 对所有用户免费，拥有活跃的社区支持。

c. 实现原理

1. vue通过使用像素流插件进行像素流送，详情请看像素流送：向任何地方的任何设备提供高质量UE4内容 (unrealengine.com)
2. 像素流（PixelStreaming插件）克隆地址git clone GitHub - EpicGames/PixelStreamingInfrastructure: Moved to: https://github.com/EpicGamesExt/PixelStreamingInfrastructure

d. 应用场景

游戏和模拟、可视化、交互式体验、虚拟现实和增强现实(AR)、产品展示和数据可视化、智慧城市、智慧园区。

e. 相关教程

1. UE5+Cesium智慧城市&园区视频教程：
   光影年年-宁晓东的个人空间-光影年年-宁晓东个人主页-哔哩哔哩视频

5. Unity3D

a. 简介

1. Unity 3D 简称 U3D 或者 Unity，是当今世界范围内主流的 3D 游戏开发引擎，用 Unity 3D 开发的游戏可以在电脑、手机、游戏机、浏览器等几乎所有常见平台上运行。
2. Unity 3D 是由 Unity Technologies 公司开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具。
3. Unity 3D 可以运行在 Windows 和MacOS X下，可发布游戏至 Windows、Mac、Wii、iPhone、WebGL（需要 HTML5）、Windows Phone 8 和 Android 平台。也可以利用 Unity Web Player插件发布网页游戏，支持Mac和 Windows平台的网页浏览，是一个全面整合的专业游戏引擎。

b. 主要功能

1. 3D 渲染：Unity WebGL 支持高质量的3D渲染，包括光照、阴影、粒子系统等，可以在网页上呈现复杂和真实的3D场景。
2. 物理模拟：支持刚体物理和碰撞检测，可以实现物体之间的相互作用和自然运动。
3. 动画与特效：支持骨骼动画、粒子特效、动画混合等，让网页内容更加生动。
4. UI 元素：支持 GUI 和 UI 元素的创建，如按钮、文本框等，方便用户与网页内容互动。
5. 音频支持：支持音频播放、音效处理等功能，增加用户体验的真实感。

c. 特点

1. 跨平台：Unity WebGL 生成的内容可以在支持 WebGL 的任何现代浏览器上运行，无需插件。
2. 高性能：得益于 Unity 引擎的优化，Unity WebGL 可以在网页上流畅运行复杂的3D应用。
3. 易用性：开发者可以使用熟悉的 Unity 编辑器进行开发，然后一键发布到 Web 平台。
4. 资源管理：支持资源的动态加载和卸载，有助于减少初始加载时间和内存消耗。
5. 多语言支持：支持 C# 编程语言，同时可以通过 JavaScript 或 TypeScript 与网页环境交互。

d. 实现原理

Unity WebGL 的工作原理是将 Unity 引擎中的内容转换成可以在 Web 浏览器中运行的 JavaScript 和 WebGL 渲染指令。这个过程主要包括以下几个步骤：

1. 打包：Unity 编辑器将项目中的所有资源和逻辑代码编译成 JavaScript 文件。
2. 资源转换：将 Unity 中使用的模型、纹理等资源转换成适合在浏览器中加载的格式。
3. WebGL 渲染：使用 WebGL API 来渲染 3D 图形，WebGL 是一种在浏览器中绘制 3D 图形的标准。
4. 加载与执行：最终生成的文件通过 HTTP 下载到客户端，并在浏览器环境中执行。

e. 应用场景

在线游戏、产品展示、虚拟现实 (VR) 和增强现实 (AR)

f. 相关教程

1. unity3D官网教程：
   使用 WebGL 模板 - Unity 手册 (unity3d.com)

二、3D地图解决方案

1. Echarts

a. 简介

ECharts 3D 地图功能是指在 ECharts 中通过特定配置来显示三维地理信息。虽然 ECharts 的核心并不包含专业的3D地图功能，但是开发者可以通过组合现有的2D地图和3D图表功能来创建接近于3D地图的可视化效果。此外，ECharts 的高度可定制性也允许开发者通过自定义扩展来实现更复杂的3D地图功能。

b. 主要功能

1. 基本3D图表：ECharts 支持创建3D散点图、3D线图、3D柱状图等基本3D图表，可以用来表示地理位置上的数据分布。
2. 自定义扩展：虽然 ECharts 本身没有提供专业的3D地图功能，但是开发者可以通过自定义扩展来实现更复杂的3D地图功能，比如叠加地形信息、显示建筑物模型等。
3. 交互性：ECharts 提供了丰富的交互方式，包括缩放、旋转、平移等操作，可以让用户更好地探索3D空间中的数据。
4. 数据绑定：可以将地理坐标数据与3D图表绑定，从而在3D空间中展示数据点的位置信息。

c. 应用场景

1. 地理数据分析：ECharts 的3D地图功能可以用来展示和分析地理相关的数据，比如人口密度、气候条件等。
2. 城市规划与建筑设计：可以用来展示城市规划方案或者建筑设计模型，在3D空间中直观地呈现建筑物的位置关系。
3. 物流与交通规划：在物流行业中，可以用来展示货物运输路径；在交通规划中，可以用来模拟交通流量。
4. 科学研究：对于地质学、气象学等领域，可以用来展示地形地貌、气候分布等。
5. 商业智能：企业可以用来展示销售网点的分布情况，或者根据市场调研结果来展示不同地区的市场潜力。

d. 注意

虽然 ECharts 可以用来创建接近3D地图的效果，但对于专业级的3D地理信息系统（GIS），可能还需要借助其他专门的3D地图工具或框架，比如 Three.js 结合 GIS 数据，或者是使用专为3D地图设计的库如 CesiumJS 等。ECharts 更多的是作为一种轻量级的解决方案，适用于不需要特别精细的3D地图展示场景。

e. 示例

1. 官方案例资源：Examples - Apache ECharts

f. 相关教程

1. 官方文档：快速上手 - 使用手册 - Apache ECharts

2. Mapbox GL

a. 简介

1. Mapbox GL 是一个现代的地图平台，它提供了一整套工具和服务，用于构建交互式、可定制的地图和地理位置服务。
2. Mapbox GL 包括客户端库、服务器端组件和在线服务。
3. Mapbox GL 的主要优势在于其高性能、灵活性和可定制性。
4. 它适用于各种应用场景，包括地理位置服务、数据分析可视化、互动地图应用开发、移动导航、自动驾驶等。通过Mapbox GL，开发者可以快速构建功能丰富、视觉吸引人的地图应用。

b. 主要功能

1. 矢量瓦片渲染：Mapbox GL 使用矢量瓦片（vector tiles）技术，这意味着地图数据是动态加载和渲染的，从而提供更快的响应速度和更小的数据量。
2. WebGL 支持：它利用 WebGL 技术进行图形渲染，这使得地图可以在各种设备上平滑地缩放和平移，无需重新加载图像。
3. 样式定制：Mapbox GL 允许用户定制地图的样式，包括颜色方案、符号图标等，以打造独特的品牌地图。
4. 数据驱动的样式：Mapbox GL 支持数据驱动的样式定义，允许开发者根据数据属性动态改变地图元素的颜色、大小甚至形状。
5. 开源：Mapbox GL 是一个开源项目，这意味着它拥有活跃的社区支持，并且可以免费使用。
6. 集成 Mapbox 服务：Mapbox GL 可以与 Mapbox 提供的其他服务如 Mapbox Studio、Mapbox Tiling Service 或 Uploads API 集成，使用户能够访问和展示自己的地理数据。

c. 应用场景

地理信息服务和数据分析可视化、互动地图应用开发、移动导航和自动驾驶、虚拟现实和增强现实(AR)、产品展示和数据可视化、智慧城市、智慧园区。

d. 相关教程

1. 官方案例资源：https://docs.mapbox.com/mapbox-gl-js/example/
2. 官方 Api：https://docs.mapbox.com/

3. Cesium

a. 简介

1. Cesium 是一款开源的基于 JavaScript 的 3D 地图框架，它利用了现代 Web 技术，如 HTML5、WebGL 和 WebAssembly，来提供跨平台和跨浏览器的三维地理空间数据可视化。
2. 支持大规模地形渲染和实时数据流，支持丰富的 API 来控制和扩展地图功能，交互式 3D 地球和地图应用的创建

b. 主要功能

1. 多视图支持：Cesium 支持以 2D、2.5D 和 3D 形式展示地图，无需为每种视图分别编写代码。
2. 动态地理信息数据可视化：Cesium 能够使用时间轴动态展示具有时间属性的数据，支持使用符合OGC 标准的 WMS、WMTS 等多种地图服务。
3. 多种数据格式支持：Cesium 支持加载 KML、GeoJSON 等格式的数据绘制矢量图形，以及加载 3D Tiles 和 glTF 格式的三维模型，包括点云、倾斜摄影等大规模模型数据。
4. 高性能和高精度：Cesium 对 WebGL 进行优化，充分利用硬件加速功能，并提供底层渲染方法进行可视化，包括绘制大型折线、多边形、广告牌、标签等API，以及控制摄像头和创造飞行路径等坐标、向量、矩阵运算方法。
5. 开源和免费：作为一个开源项目，Cesium 是免费使用的，拥有活跃的社区支持和持续的更新。

c. 示例

1. 数字城市的3D可视化球 (217dan.com)

d. 应用场景

地理信息系统（GIS）、城市规划与设计、航空与卫星图像的可视化、数字孪生、智慧城市、智慧园区、数据可视化

e. 相关教程

1. Cesium 官网案例：https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Styling.html
2. Cesium 中文 API：http://cesium.xin/cesium/cn/Documentation1.72/index.html
3. Cesium 中文基础教程：https://github.com/hujiulin/CesiumJS-tutorial
4. Cesium 120+ 实战效果：https://blog.csdn.net/weixin_45782925/article/details/123269490