web 3D 渲染技术，Web or Native 谁才是元宇宙的未来（上）

元宇宙概念的爆炸式出现，3D 渲染技术再次受到了巨大关注度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

沉浸、3D 世界、虚拟社交、虚拟购物，这些都是元宇宙的概念实例。就像电影《失控玩家》那样，人们畅想通过 AR/VR 以及其他互联网技术，把现实世界的楼房街道、天气温度、人际关系等投射到虚拟世界，构建 “元宇宙”，拥有一个网络分身。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

但目前来看，要想实现这一构想，开发者们还有很长一段路要走。毕竟 “元宇宙” 的背后是庞大的 3D 虚拟世界构建，需要海量且高质量的 3D 内容支撑，以还原真实世界。R 星引擎的游戏《荒野大镖客》除了游戏世界里各种各样让人拍案叫绝的细节之外，在画质上 3D 世界渲染的技术细节也仍然让人惊叹。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

《荒野大镖客 2》文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

3D 渲染技术的迭代路线分成了两种技术方案：Native 和 Web。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Native，是我们的电脑、手机等硬件设备，通过安装本地的应用程序 APP，直接通过图形 API 和相关驱动调用显卡的计算和渲染能力，完成真实物体的 3D 渲染数字化的过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Web，是通过浏览器，在网页页面中，实现现实世界的数字化渲染的过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

资料来源于网络文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

打趣的说，选择 Native 技术栈还是 Web 技术栈，这是一个哲学问题。两种技术方案都有自己的优势和劣势，同时双方的生态也都比较丰富，很多项目从最终的技术实现角度来说，选择哪一条路线都可以完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Native 3D 渲染的发展

1992 年，Khronos 制定了第一代的渲染引擎的图形学的框架叫做 OpenGL 1.0，包括现在很多电脑用的基本上 3D 应用都是基于 OpenGL。OpenGL 也在不停的发展，目前最新版是 2017 年发布的 OpenGL 4.6 版本。同时，也出现了专门为移动端设计的 OpenGL ES 版本。由于 OpenGL 是开源和跨平台的，不方便为 Windows 做优化，1996 年，微软作为第一大操作系统的提供商，发布了自己的图形 API Direct3D。DX5/DX6/DX9 有很多游戏的代表作，《古墓丽影》《极品飞车》都是当时的作品。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

资料来源于网络文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

发展到了 2009 年，微软提出了 DX11 版本，有一个比较大的特性，计算着色器。简单说就是在图形的渲染能力上，可以更加充分的调用显卡的并行计算能力。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

2014 年，微软发布了下一代图形渲染 API DX12，同年 6 月份，苹果在 WWDC 大会上发布了自己的图形学 API Metal。2015 年，Khronos 发布了 Vulkan。最早是发布的 OpenGL，随着显卡能力的提升，OpenGL 的全局状态机设计离线，已经无法调用和优化先进现代显卡的能力。可以说 Khronos 不在会全力以赴的长期升级和维护 OpenGL，反而选择发布了全新架构的现代图形 API，即 Vulkan。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

2014 年这个节点，就形成了三种现代图形学 API 并驾齐驱的情况。目前所有电脑上的游戏，或者一些 3D 应用，包括 CG 渲染动画，为了达到最好的渲染效果，几乎都会采用这三种现代图形 API。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Web 3D 渲染的发展

总体来说，在 Web 上渲染 3D 内容的相关技术发展还是比较缓慢的。最早的时候在浏览器是无法实现 3D 内容的，需要安装 Flash 插件。在校内网时代，那些农场类的游戏应用，以及在浏览器里看视频音频，几乎都需要安装 Flash 插件。2020 年的时候，因为有一些安全的问题和其他种种原因，Adobe 宣布停止维护 Flash 这项技术。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

在 Flash 的发展过程中，出现了 HTML5 的标准，简称 H5。2008 年的时候，H5 雏形出现。人们不需要在浏览器里面装 Flash 的插件，能够直接播放视频音频，包括通过 Web 原生的 Canvas 组件实现一些动画效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

资料来源于网络文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

真正的 Web 3D 的技术标准的出现，是 WebGL。由于浏览器天然具备的易分享等优势，在 Web 中展示和渲染 3D 内容一直都具有大量的需求。Khronos 在 2009 年启动 WebGL 标准的讨论和制定工作。WebGL 思路很简单，就是依靠浏览器的内核，对 OpenGL ES 版本做打包和封装，然后就可以让浏览器里的这些 JS 前端开发者直接用 Web 环境去调用底层的图形学能力，最终展示 3D 内容。当然也就意味着 WebGL 能力被限制到了 OpenGL 的时代。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Web 的技术在持续快速的发展。尤其 2014 年，Native 侧已经出了三大现代图形 API 了: DX12、Vulkan、Metal。在 2017 年的时候，W3C 就提出在 Web 侧发展下一代图形学的技术标准，即 WebGPU。跟 WebGL 一样，WebGPU 的思路就是对三个现代图形 API 直接打包，然后在实现跨平台的同时，让浏览器里面直接可以调用这三个现代图形 API 能力，实现高质量的渲染效果，调用 GPU 的强大计算能力。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

WebGPU Wiki文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

https://en.wikipedia.org/wiki/WebGPU文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

我们熟知的 Unity 和 Unreal 就是典型的 Native 技术栈下的 3D 渲染引擎产品，而 Web 端也有大名鼎鼎的 Three.js、Barbylon.js、Cesium.js 和 Playcanvas 等等。面对这样两条路线，下面聊一聊关于技术栈选择上的思考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Web 优势 1: 生态的发展和普及程度广

从技术角度来看，Web 相对于 Native 的发展相对是缓慢的。因为很多最新的技术都会在 Native 上最先实现。但是因为 Web 本身独特的优势，跨平台 、易分享、易协同等等，一直都很受技术人员和多种应用场景的青睐。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

浏览器厂商的努力也不容忽视，尤其是 Chrome。为了保证 Chrome 100 这个历史时刻的版本能尽早的发布，从 94 版本开始，将 6 周一更新提升到 4 周一更新。（Chrome 94 版本也是第一个正式启动 WebGPU API 的商用版本，而不在是通过 Chrome Canary 的 developer 版本才能体验的 WebGPU 的能力。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Chromium Blog文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

https://blog.chromium.org/2021/03/speeding-up-release-cycle.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

浏览器承载的 Web 生态正在飞速的发展。下面的开源报告中关于开源环境技术方向的统计后端是最多的。但是我们可以看到，第二个就是 Web 的生态，也证明了 Web 生态是非常有潜力的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

2020 年开源环境技术方向文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

下面是 2020 年编程语言的分布报告。最多的是 Java，第二就是前端语言 JS，如果把 HTML 语言也包括其中，那 Web 的语言普及度优势将更加明显。这足以说明 Web 是一个快速发展具有巨大潜力的技术栈生态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

2020 年编程语言的分布文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

2020 中国开源年度报告文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

https://kaiyuanshe.cn/document/china-os-report-2020/2020%20%E4%B8%AD%E5%9B%BD%E5%BC%80%E6%BA%90%E5%B9%B4%E5%BA%A6%E6%8A%A5%E5%91%8A.pdf文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Web 优势 2: 免安装客户端，跨平台特性

Native 端，需要安装 APP 应用程序，在某些场景，对于用户来说是一个很高成本的行为。可以想象一下，如果你的家装设计师为你设计的室内 3D 全景渲染图，不是通过微信直接分享给你的（微信本身所有的分享内容都是基于 Web），而是要求你要在手机或者电脑上安装一个几百 M 甚至几个 G 的应用程序才能观看，那是一种什么体验呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

Web 就很好的解决了这一个问题。我们不在需要为不同的场景安装不同的客户端，而是通过一个 URL 链接，就可以立刻浏览你想看到的任何内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

换一个角度去思考，不仅不需要用户安装客户端，而是我们已经通过硬件设备中的浏览器触达到用户了。单独 Chrome 的全球装机量为 26 亿，占全部浏览器市场占有率的 60%；排名第二个也是采用了 Chromium 内核的 Edge 浏览器，市场占有率为 18%。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

2020 年 - 2021 年全球浏览器市场占有率文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

基于 Web 环境做任何的内容开发，也都因为这种天然的跨平台特性，实现了降低研发成本的目的。Orillusion 团队也极力打造 Web 端的 3D 渲染引擎。开发者们不需要在考虑为了一个项目开发不同的 APP，来适配不同的操作系统。因为浏览器已经帮我们实现了不同平台的适配工作。只要在一台主机的 Chrome 里能正常打开，那么在其他主机的 Chrome 里也可以正常打开。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

我们目前梳理了 Native 和 Web 在 3D 渲染这个场景中的发展历史和技术演进。同时，也从开发者生态和免客户端跨平台这两个方面，阐述了一些 Native 和 Web 技术路线的对比和分析。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html

作者：Orillusion文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/25304.html