本文最后更新于 2024-10-30，距离文章更新已经超过30天，部分内容可能已经过时。

写在前面

2017年，我进入到一个软件开发公司，开始接触跟界面设计相关的工作，重心是数据可视化。如今7年过去，行业和技术都发生了翻天覆地的变化，近期正好又因为工作需要对市面上部分知名的可视化系统构建工具进行了粗浅的了解，趁此机会做个总结。

我自己主要从事的UI工作，文章的不足或错误之处，还请包涵指正。

三维数据可视化的发展

数据可视化或许从人类发明数字的时期就有了（数据可视化：历史、创新与未来）。人们在纸、屏幕等多种媒介用更加醒目、直观地方式，通过数据去传达事物所处的某种状态、趋势都可以算作数据可视化。而今天说的数据可视化，或许可以狭隘地界定于以数据分析为主的软件系统，包括数据报表软件、商业BI系统和近年来比较热门的“数字孪生”系统等。本文重点讨论的范围更偏向于类“数字孪生”可视化系统中的数据可视化。它是伴随着数据尤其是大数据分析与应用的发展而发展的。（大数据发展历程）

平面行业的数据可视化

从表现形式来看，数据可视化经历了纯图表式的数据可视化【暂称之为二维可视化】、图表➕场景的数据可视化（其中场景包括GIS场景和三维模型场景）【暂称之为三维可视化】。

早先的数据可视化系统主要以各种数据图表为主。其中知名的工具有echarts。

后来，部分设计师为了追求页面的设计感开时融入一些透视手法，利用透视绘图或3D软件，在数据报表中结合表现力更强的图形设计进行业务表达，但大多只是一张静态或动态的2维图片。（部分开发人员也通过图形渲染技能实现了三维前端的开发，但实现成本较高。）

2017年前后，国内部分企业开始尝试用游戏引擎开发可视化系统，引擎的引入简化了图形渲染尤其是三维图形渲染的技术，提供了优秀的表现效果，开发人员仅需将精力重心放在业务逻辑的处理上，大大提高了开发效率。同时伴随新冠疫情的爆发、数字孪生、智慧城市等概念的兴起，市场端也表现出了火热的行情。三维可视化获得了快速发展。（大数据时代的数据可视化技术：趋势、挑战与未来展望）

三维数据可视化主流技术路线

从开发模式来看，三维可视化开发可以通过前端实现，也可以通过三维引擎实现

数字孪生三维可视化技术可以通过前端实现或使用专门的图形引擎来实现，每种方式都有其特点和适用场景。

前端实现

前端三维可视化开发，主要依托于WebGL、WebGPU等技术标准和如Three.js、Babylon.js这样的JavaScript库，在Web浏览器中实现复杂、交互式的3D图形和动画。

其优势是：

  1. 无需安装，广泛访问：基于浏览器的前端应用无需用户安装任何软件。用户只需通过链接即可访问，这大大降低了用户访问3D内容的门槛。

  2. 跨平台：前端三维可视化应用能够运行在各种设备和操作系统上，包括桌面、平板和智能手机，只要有支持HTML5的现代浏览器即可。

  3. 易于集成和部署：前端技术（如HTML、CSS和JavaScript）容易与现有的Web技术栈集成，同时也便于部署和更新。开发者可以轻松将3D可视化功能集成到现有的网站或Web应用中。

  4. 互动性和动态内容：前端开发允许实现高度互动的用户界面和动态内容更新。用户可以通过界面直接与3D模型进行交互，如旋转、缩放和移动，同时可以根据用户的操作或数据变化实时更新3D场景。

  5. 减轻服务器压力：部分计算可在客户端进行（如场景渲染、动画处理等），从而减轻服务器的计算压力和带宽使用。

劣势

  1. 性能限制：虽然现代浏览器和前端技术已经能够处理复杂的3D场景，但与专用的3D引擎（如Unity或Unreal Engine）相比，前端实现可能在性能和渲染质量上有一定的局限性，尤其是在低端设备上。

  2. 兼容性问题：不同浏览器之间可能存在兼容性问题，特别是对于一些使用最新Web技术的前端应用。这可能需要额外的开发和测试工作，以确保跨浏览器的兼容性。

  3. 安全性问题：前端应用运行在用户浏览器中，可能会面临跨站脚本攻击（XSS）、点击劫持等安全风险。开发时需要采取相应的安全措施来保护应用和用户数据。

  4. 学习曲线：尽管Three.js等库已经大大简化了3D内容的创建，但要想充分利用这些工具开发复杂的前端3D应用，仍然需要掌握一定的3D数学和图形编程知识。

  5. 复杂的调试和性能优化：前端3D应用可能会遇到性能瓶颈，需要开发者具备性能分析和优化的能力，如合理使用资源、优化渲染循环、实现LOD（Level of Detail）等策略。

常见的前端框架和工具

  1. Three.js：一个基于WebGL的JavaScript库，能够让开发人员轻松创建复杂的3D图形。Three.js封装了WebGL，使得开发者可以更容易地实现高性能的3D渲染，而无需深入掌握WebGL细节。

  2. Babylon.js： 同样是一个基于WebGL的3D引擎，提供丰富的特性和工具来创建详尽的3D场景和游戏。Babylon.js注重开发者体验和性能，支持物理引擎，粒子系统等。

  3. WebGL： WebGL是一种JavaScript API，允许在Web浏览器中渲染交互式3D和2D图形。它是Khronos集团定义的一个标准，基于OpenGL ES 2.0，并使用GLSL ES（OpenGL Shading Language for Embedded Systems）版本进行着色器编写。

  4. A-Frame： A-Frame是一个开源的Web框架，用于构建虚拟现实（VR）体验。它是一个基于Three.js的声明式框架，让创建3D和VR场景变得简单，适合初学者和高级开发者。

  5. CesiumJS： CesiumJS是一个用于创建三维地球和地图的开源JavaScript库。它基于WebGL，能展示大规模的3D数据集，包括地形、建筑模型、点云、三维模型等，并提供了丰富的地理空间数据解析和可视化功能。

  6. D3.js（Data-Driven Documents）： 虽然D3.js主要用于数据可视化，但它也可以用来创建基于数据的3D可视化效果。通过结合其他3D库，如Three.js，D3.js可以帮助实现数据驱动的3D图形和交互。

  7. GLTF & DRACO： GLTF（Graphics Language Transmission Format）是一种为3D模型和场景设计的文件格式，非常适合在Web上传输和加载。DRACO是一个开源压缩库，可以大幅度减小3D模型的文件大小，与之结合使用可以提升加载速度和渲染性能。

  8. WebVR & WebXR： WebVR是早期的一项技术，允许Web浏览器实现虚拟现实体验。WebXR是WebVR的继任者，提供了更广泛的增强现实（AR）、虚拟现实（VR）和混合现实（MR）支持，使开发者能够创建更加丰富和交互的沉浸式体验。

  9. Three.js + React / Vue： 在现代前端框架（如React或Vue）中集成Three.js，可以更好地管理3D可视化应用的组件状态和生命周期，提高开发效率。

  10. 性能优化工具与技术： 包括使用高级着色器编程优化渲染效果、实现LOD（Level of Detail）技术减少渲染压力、使用实例化渲染（Instancing）技术批量处理相似对象等。

传统的 HTML 和 CSS 可以说是应用最广泛的图形技术了，但是对于复杂图形来说，它维护成本很高，性能开销大。SVG 放大缩小不降低质量，一定程度上弥补了 HTML + CSS 不足，但它的最小单元是图形，而非像素，细节处理能力不足。canvas2D 就是我们今天所熟知的 <canvas> 标签，它调用绘图指令直接在页面上绘制图形，并且表现力深入到了像素级。但到这里还只在二维的世界里，直到 2011 年发布的 WebGL 的 1.0 标准规范。

相对于 canvas2D，WebGL 不仅仅是只增加了一个 z 轴，而是更加底层的图形编程技术。WebGL 是基于openGL 在浏览器实现，利用了 GPU 并行处理的特性，可以渲染各种复杂的 2D 和 3D 图形。这也让它在处理大量数据展现的时候，性能大大优于之前。

今年我们可能多多少少听说过 WebGPU，它可以看作是下一代 WebGL。WebGL 是基于 openGL 在浏览器中实现。而 openGL 在 GPU 届可以是一个老古董了，现代 GPU 硬件技术的飞速进步无法在它身上反应。因此苹果提出了基于 Vulkan、Metal 和 Direct3D 12 的 WebGPU，今年据说会推出 1.0 版本。

简单回顾后我们可以看到，与传统游戏类图形开发相比，Web端更多的是技术栈的不同，图形底端接口和实现技术是相同的。

——《现代前端如何入门 3D 开发》

可以看出普通的开发人员直接通过图形库进行开发并不容易。这时候就需要借助引擎了。就像我们前端会调用的各种库一样，可以把引擎看作一种对于图形的库，它提供各种工具，让图形呈现的更好、效率更高，为上层的开发团队提供了开发平台。

三维引擎实现

目前主流的引擎工具有nity、Unreal Engine、Cesium等。使用专业引擎实现数字孪生三维可视化系统的开发，具有许多优势，但同时也存在一些劣势。

优势

  1. 高质量渲染：专业引擎如Unreal Engine提供电影级渲染能力，可以创建极其逼真的视觉体验，这对于需要高度仿真现实环境的应用场景尤其重要。

  2. 广泛的平台支持：引擎如Unity支持从PC到移动设备，甚至是VR/AR设备和游戏主机等多种平台，便于跨平台部署和开发。

  3. 丰富的工具集和库：这些引擎通常提供了丰富的开发工具、库和插件，支持物理仿真、碰撞检测、AI逻辑、动画处理等，极大地扩展了数字孪生应用的功能。

  4. 易用性和灵活性：通过可视化的编辑界面和脚本支持（如Unity的C#脚本、Unreal Engine的蓝图系统），这些引擎为用户提供了灵活的开发手段，即使没有深厚的编程背景也能创建复杂的逻辑和场景。

  5. 大型社区和资源丰富：拥有庞大的用户社区和丰富的学习资源，如在线教程、文档、论坛等，同时还有大量的免费或商业资产可供使用，如3D模型、纹理、插件等。

  6. 实时数据集成：支持通过API或其他方式集成实时数据，实现数字孪生模型与现实世界数据的动态同步，提高了仿真的准确性和实用性。

劣势

  1. 学习曲线：尽管这些引擎设计之初考虑了易用性，但深入掌握并充分利用其高级功能仍需要时间和努力，特别是对于复杂项目的开发。

  2. 资源消耗：高端渲染和仿真需求可能会需要较高的计算资源，这可能导致应用对目标设备的性能要求较高，特别是在移动或Web平台上。

  3. 成本问题：某些引擎或其专业版本的使用可能涉及许可费用，特别是对于商业项目。此外，开发过程中可能还需购买额外的付费插件、资产或服务。

  4. 开发复杂性：对于需要高度专业化定制和优化的数字孪生项目，开发和维护工作可能会变得复杂，需要跨学科的知识和经验。 5

  5. 性能优化挑战：为了在保证视觉品质的同时提供流畅的用户体验，进行性能优化往往是必要的，但这可能会相当具有挑战性，尤其是在硬件条件有限的情况下。

  6. 依赖于第三方：使用特定引擎开发也可能导致项目依赖于第三方平台，可能会面临未来软件版本更新、价格变动或服务终止等风险。

  7. 国产化和信创考量。

通过国内厂家封装的SDK、低代码平台、gis地图等进行实现

除了通过前端和引擎实现外，国内部分厂家也提供了专门用于数字孪生三维可视化系统开发的SDK、低代码平台或依托比分地图厂商的gis引擎实现。不过这些方案大部分仍然属于上述实现范畴。在应急指挥、城市治安治理等领域，有相当于一部分系统是依托于地图厂家提供的gis服务和gis引擎进行开发的。如果有伙伴对这部分内容有所研究，欢迎找我交流赐教。

国内厂家的工具对比

从渲染方式看，市面上主要有端渲染、流渲染两条路线

端渲染（通常指的是在客户端进行渲染）和流渲染（一般指渲染结果通过网络流式传输）是3D图形和视频处理中两种不同的渲染和展示方法。

客户端渲染（端渲染）

客户端渲染是指在用户的设备上（客户端），如PC、游戏主机、智能手机或平板电脑上，通过本地的硬件（CPU、GPU）和软件资源来执行渲染过程。在这种模式下，应用程序或游戏将3D模型、纹理、光照等信息下载到客户端，然后利用客户端的图形处理器（GPU）进行渲染，最终将渲染的结果显示给用户。

特点

  1. 资源消耗：依赖于客户端的硬件性能，对GPU有较高要求。

  2. 交互性：能够提供较好的即时交互性，因为用户的操作可以直接通过本地计算快速响应。

  3. 网络依赖：相对来说，对网络依赖较小，一旦资源加载到本地，应用或游戏就可以离线运行。

  4. 跨平台：依赖于客户端设备的硬件和软件环境。如果使用Web技术（如WebGL）进行端渲染，那么理论上可以兼容任何设备的浏览器，只要它们支持相应的标准。如果是基于特定平台的渲染（如使用DirectX或Metal），则兼容性受限于特定操作系统和设备。

应用场景

适合需要高交互性的应用，如视频游戏、交互式3D设计和仿真软件。

流渲染

流渲染，也称为基于云的渲染或云游戏，是一种将渲染过程移至云端服务器或数据中心执行的方法。在流渲染架构中，3D应用程序或游戏在远程服务器上进行渲染，渲染的结果（通常是压缩的视频流）通过网络传输到用户的设备上。用户的设备不需要强大的渲染能力，只需要能够接收视频流并展示，同时将用户输入传送回云端。

特点

  1. 资源消耗：减轻了客户端的资源消耗，因为重负荷的渲染工作在云端进行。

  2. 交互性：可交互，由于依赖网络传输，可能会有较高的延迟，影响操作的即时响应性。

  3. 网络依赖：高度依赖于网络的带宽和稳定性，网络质量直接影响体验。

  4. 跨平台：极大地降低了对客户端设备的要求，因为渲染过程在服务器上进行。客户端只需要能够接收视频流（如通过HTML5视频标签播放），这意味着几乎所有现代设备和浏览器都可以成为潜在的接收端，跨平台性极强。

  5. 受限于硬件资源，流渲染解决方案在处理高并发场景时还存在风险。