Web 3D 技术的发展趋势及应用
在当下“Web 3.0”概念不断升温的背景下，人们对于网络交互式、沉浸式的体验要求越来越高。这种趋势不仅体现在游戏和娱乐领域，也逐渐渗透到教育、医疗、工业和商业等多个领域。传统的 2D 网络体验已经无法满足人们的需求，而随着 Web 3D 技术的不断发展和创新，越来越多的人开始意识到其潜在的应用价值。通过 Web 3D 技术，用户可以在 Web 上体验到逼真的 3D 场景、物体和角色，实现更加沉浸式的交互体验。因此，随着人们对于网络体验的不断追求，Web 3D 技术无疑将会迎来更加广阔的应用前景，同时也为未来的数字经济带来了无限的想象空间。
图片来源网络，侵删
上图中左上是 Clou 建筑设计公司的官方网站，利用仿 3D 的交互设计给用户带来沉浸式的交互体验，更显独特。右上则是谷歌地球，Google 在 2017 年发布了首个 Web 版本的谷歌地球，这标志着 Web 平台对于大数据量的渲染已经具备很好的支持能力。同样也是在 GIS 领域，Cesium 提供了在 Web 平台进行大规模 3D 地理空间数据可视化的解决方案，右下是 Uber 结合自身业务发布的大规模地理空间数据集的可视化分析平台工具 kepler.gl。左下为一个数字展厅案例，在疫情的压迫下，会展经济遭受重创，“云上展会”已经成为会展业弥补疫情所带来损失的又一重要途径，线下展会三维数字化转型体系与产业链条正逐渐完善。3D 技术在数字展销及商品展示方面的应用将成为重要发展趋势。
除了以上所列举案例，Web 3D 技术在家具家装、电商购物、二手房交易、数字孪生/虚拟仿真、数字虚拟人等多个行业/领域都有实际应用的案例，可见，Web 3D 技术在各行各业的应用热潮正在发生。
Web 3D 技术的发展历程可以追溯到 1990 年代初期。1995 年，Netscape 公司发布了首个支持 3D 图形的浏览器插件——Netscape Navigator 2.0，这标志着 Web 3D 技术的开端。此后一直到 2009 年，HTML5 标准发布，它为 Web 3D 技术的发展奠定了基础，并支持在 Web 上使用 3D 图形和动画效果。直至 2014 年，WebGL 技术成为了 Web 3D 技术的重要组成部分，它是一种基于 OpenGL ES 的 JavaScript API，使得在 Web 上使用硬件加速 3D 图形成为可能。其中，2010 年 9 月，Unity3D 官方发布了 Web Player 对 Web 平台首次进行支持，现如今 Unity3D Web Player 已经被 Unity3D WebGL 方案所替代。
图片来源网络，侵删
作为一种基于 OpenGL ES 的 Web 技术，WebGL 可以让开发者使用 JavaScript 和其他 Web 技术来创建逼真的 3D 场景和交互体验。WebGL 1.0 的发布在 Web 3D 技术的发展史上具有重要意义，它的出现为 Web 3D 技术的普及和应用提供了技术基础和先决条件。而随着 Web 技术和硬件的不断进步，WebGL 2.0 的推出进一步提升了 Web 3D 技术的性能和效率。由于 WebGL 可以在各种 Web 浏览器上运行（参考 caniuse - WebGL），并且具有良好的跨平台性和兼容性，它已经成为了现代 Web 3D 技术的标准之一。未来，WebGPU 将成为下一代 Web 平台现代 3D 技术标准。WebGPU 是一个全新的 Web 3D 图形渲染技术，与 WebGL 不同，WebGPU 不是任何现有原生 API 的直接端口，WebGPU 更加底层，直接与硬件交互，可以更好地利用现代 GPU 的性能和特性。目前，WebGPU 还处于实验性阶段，但已经得到了很多浏览器和开发者的关注和支持。未来，WebGPU 有望成为 Web 3D 技术的一个重要发展方向。
另一方面，虚拟现实（VR）和增强现实（AR）也是一个重要的应用场景，与之相对应的是 WebXR 技术。WebXR 技术在近几年得到了快速的发展，其受益于更加普及的 VR 和 AR 设备以及更加完善的浏览器支持。WebXR 技术是基于 Web 标准的，未来将会有更多的开发者参与到 WebXR 生态系统的开发和建设中，使得 WebXR 技术的应用场景更加丰富和多样化。
为什么你需要了解 3D？
在目前Web产品的功能都相对齐全成熟，趋于同质化的情况下，常规前端页面的开发，价值体现并不明显。可视化给了我们一个很好的机会，可以营造差异化的产品竞争力，这是你个人价值的放大器。而 3D 则是可视化中的前沿领域，这是目前大多数公司所不具备的。
另外 3D 功能会涉及计算机的 GPU 渲染原理、复杂交互和状态的处理、算法、性能等方向，这对于技术深度和广度都会有更高的要求，可以通过工作内容促使我们去提升相关的能力，营造个人的领域深度。
因此深挖这个方向，不管是对体现业务价值还是提升个人技术，都会有很大的帮助。
金融领域的 3D 可视化特性
在我们所属的互联网金融领域，Web3D 也有着非常广泛的应用前景。
金融领域的 3D 需求，可以通过业务和程序两个维度进行分类。
业务分类
从业务维度，一般我们可以将 3D 项目分为写实渲染和数据分析两个类别。
写实渲染
金融领域的实体多为抽象概念(比如股票、基金)，而不是具体的现实概念(比如建筑、汽车)，因此真实世界的写实渲染类需求，在我们的工作中相对较少。
不过也有部分场景，需要我们进行写实渲染，比如在产业链业务中，会涉及实体产业，比如汽车产业链，这时候就需要我们针对汽车、零部件等现实世界存在的概念进行渲染。
另外，虚拟人和展厅也存在写实渲染的需求场景。
数据分析
这是我们金融领域 3D 需求比重最大的方向。
3D 由于其特性，相比 2D，可以展示更多维度的数据，因此在复杂的关系数据展示和可视分析上是有优势的，帮助用户快速理解和分析复杂的数据信息。这在知识图谱方向有很多应用场景。
另外在一些内部系统上，3D 也有很大的应用空间，比如机房管理、运维流量监控、产品业务关系梳理、技术应用关系梳理等。
程序分类
从程序维度，我们又可以将 3D 项目分为业务开发和组件开发两个类别。
业务开发
这和我们常规的业务开发类似，会根据需求的特性，去定制功能。针对这种类型的开发，重点在于从需求中抽象出业务特性，形成业务框架，以提升开发效率。
组件开发
针对可复用的功能，我们会将其设计为组件，方便其他类似场景使用。比如常见的数据分析图表、地球组件等。
这种类型的开发，更侧重配置化和扩展性，我们一般会实现一个通用的机制，然后让业务方通过参数配置实现自己的需求，类似大家常用的 ECharts 或者 AntV 这种组件。
Web 3D 技术的选型分析
Web 3D 技术的生态正在积极发展，已有很多成熟的解决方案可供我们进行选择，例如开源社区最知名的 Three.js。除此之外还有 Babylon.js、A-Frame、Godot、deck.gl、luma.gl 等一些仍然在活跃维护的工具库或框架，另外也一些商业方案可供选择，例如 Unity3d WebGL、PlayCanvas等。
在以上所举例的方案中，各自都有不同的侧重点，Three.js 实际上仅是一个渲染引擎，deck.gl、luma.gl 是为了解决某个特定问题的工具库或插件，而 Babylon.js、A-Frame 提供了一个技术侧的工程化解决方案，Unity3d WebGL、PlayCanvas 则更进一步，提供了包含 UI 编辑器在内的一系列系统化的解决方案。在实际的业务开发过程中选用哪个方案，取决于我们的业务场景特点和需求复杂度，包括技术方案的学习成本曲线、方案的商业成本都会对方案的选取产生影响。
在实际业务场景下，从我们的产品功能设计上来看，3D 主要应用在数据分析方向，也会涉及一些模型渲染方向的应用，且考虑到传播性，我们的 3D 产品应用必须要能以 Web 形式发布。因此我们在做技术选型的时候，侧重于关注下面几个方面：
- 良好的 Web 端支持（WebGL、WebGPU）
- 生态和插件的丰富度
- 资料和文档的完善度，学习曲线是否平滑
- 有一定数量的商业应用案例
- 轻量化
考虑到产品主要是数据分析类的应用场景，内容大多都是通过程序生成的，具有轻模型重交互和布局算法的特性，这些是框架无法消化的，因此我们更倾向于选择一个纯渲染器，基于该渲染器来定制我们的业务开发框架。
因此最终我们选择了 Three.js 这个库作为底层的渲染引擎，其社区活跃度高，生态技术资源也很丰富，作为渲染引擎而非工程化的解决方案来说也足够轻量化，非常契合我们的开发需求。如果想要了解 Three.js 的信息，建议从官网的基础知识页面开始。
下图对常见的支持Web3D的技术框架/库做了一个简单的对比：
常见Web3D框架/库对比
Web3D 技术图谱
Web3D 的开发涉及非常多的技术点，如果盲目的学习，效率会比较低。为此，我们专门给想入行的同学整理了一个技术图谱，希望能帮助大家在学习或者解决问题时，能明确方向，少走弯路。
由于 3D 开发和图形学、游戏开发有非常多的共同点，我们在编写该文档时，部分内容参考了《Games101》和《Games104》。感兴趣的同学也可以去看一下这两个课程，对于 3D 开发有很大的帮助。
资料推荐
GAMES101-现代计算机图形学入门：
介绍图形学中的变换、光栅化、几何、光线追踪原理、材质、动画，是目前最好的中文图形学入门资料。
GAMES104-现代游戏引擎：
从入门到实践：讲解 3D 游戏开发架构和常见问题的解决方案，有许多内容可以平移到我们的 Web3D 开发中。
《Unity Shader 入门精要》：
介绍 GPU 渲染管线，有助于理解光栅化原理和入门 Shader 编程。
Three.js 基础知识：
Three.js 的基本概念和常见功能的实现方案。
The Big List of three.js Tips and Tricks：
Three.js 开发、调试、性能优化技巧。
