前5名WebXR框架对比

前5名WebXR框架对比

想要开始WebXR开发?这里是前5名框架的对比,帮助你入门。

2019年12月13日,Chrome 79成为首个默认启用WebXR 1.0的浏览器。这意味着克服WebXR最大障碍之一的第一步终于解决了:稳定性。之前维持一个WebXR / WebVR / WebAR项目真的很困难,因为浏览器API一直在变化:WebVR 1.0迅速被WebVR 1.1取代,尽管只是小版本号的提升,但改变足以破坏任何用WebVR 1.0编写的应用。

在WebVR 1.1之后,出现了一系列没有版本的WebXR中间版本。很难检测到你正在使用哪个版本,并且需要请求谷歌Chrome Origin Trials的令牌以让你的应用运行在用户设备上,而不需要他们开启实验性标志。

随着Chrome 79中WebXR 1.0的推出,这些麻烦终于结束,我们可以假设我们的应用在未来的Chrome版本中依然能够正常运行。这也意味着你终于可以开始你一直想做的项目!但应该使用哪个框架呢?

以下是我们认为可能合适的框架列表:

目录 

5 - Unity 3D 

与Unreal Engine一起,是目前最受欢迎的3D开发平台,支持HTML5作为目标平台,因此可以_理论上_用于WebXR开发。然而它并没有开箱即用的支持:你需要一个插件,比如De-Panther’s WebXR Exporter

这确实不是最优的,但如果Unity 3D添加了未来的原生WebXR支持,你会受益。然而直到那时,你还需要处理HTML5导出的其他问题:性能、加载时间以及不支持移动GPU(如智能手机或Oculus Quest和其他独立头显中的GPU)。你确实能获得Unity的资产和插件生态系统的好处,而且你也可以将应用发布为原生应用!

Unity 3D 网站

4 - Babylon.js 

通过 “Playground”,这个框架提供了快速原型制作的途径来开发任何3D应用。他们已经支持WebXR并有大量示例可以渲染几乎任何东西。其灵活性归因于它是一个JavaScript库。它允许你深入低层次,但要求你用JavaScript编写整个应用。它针对的是有经验的编码人员,因此我们建议如果你有经验或需要大量定制渲染,可以选择此框架。

Babylon.js 网站

3 - Three.js 

可能是目前最流行的开源JavaScript渲染库。再次强调,在非常低的层次上提供了完全的灵活性,因为你可以定制渲染以实现你想要的任何东西。不过,强大的能力也带来了巨大的责任:你需要负责确保应用在移动VR设备上也能保持高效和流畅运行。

Three.js已经支持WebXR!在WebXR有广泛的AR支持之前,你可能需要查看AR.jsmind-ar-js以获得WebAR支持。两者都与Three.js集成。

Three.js的编辑器允许你轻松地组装场景并从许多不同的文件格式中导入内容。这将帮助你迅速启动项目,但仍然需要你稍后用JavaScript编写交互代码。编辑器并没有项目文件的概念,因此实际上只能用于生成项目的初始代码。

如果你没有任何编码经验,我们建议你查看A-Frame。它是建立在Three.js之上的,允许你以更简单的方式利用一部分强大的功能。

Three.js 网站

2 - PlayCanvas 

这个开发平台带有完整的可视化编辑器,并支持AR和VR。其3D图形渲染如果设置正确,看起来令人惊叹。编辑器和导出的游戏的加载时间也相当不错。

可视化编辑器使得组装场景、添加组件和部署项目变得非常简单。此外,内置代码编辑器允许你编写自己的自定义脚本。如果你更喜欢自己的代码编辑器,比如Atom、Vim、Visual Studio Code或其他,编辑这些脚本可能会有些困难。不过,借助它们的REST API,你可能仍然可以这样做。

PlayCanvas 网站

1 - A-Frame 

对于方便的WebVR和WebAR开发,A-Frame一直是过去几年中的首选。构建在Three.js之上,如果需要大量定制,可以深入底层,并且可以重用许多现有的组件。

A-Frame允许你在HTML中设置场景,从中生成3D场景层次结构。你可以创建自定义的JavaScript组件以修改行为和交互,“A-Frame Inspector"可以让你轻松编辑场景并查看从HTML生成的内容。一些大型VR浏览器游戏已经在A-Frame上开发:Barista Express和Moonrider。

因为它运行在Three.js之上,A-Frame也已经支持WebXR。WebAR再次通过AR.js得到支持。A-Frame将优化资产以减少加载时间的责任留给了你。对于简单的用例,A-Frame是完美的,并能让你走得相当远。

但对于较大的项目,你可能会遇到A-Frame性能限制的瓶颈。

A-Frame 网站

总结 | TL;DR 

框架的选择将取决于你的使用场景。对于简单的场景,我们推荐A-Frame。如果你需要更高的性能,可以深入Three.js进行优化。如果你不擅长编码,可能尝试PlayCanvas。它似乎也提供了实现非常漂亮图形的最简单方法(但对于网页上的VR,请优先考虑性能而非外观)。

Wonderland Engine 

还没找到合适的工具?你可能会对我们正在构建的东西感兴趣。Wonderland Engine是一个离线工具,可以生成高效的二进制场景文件,并带有基于WebAssembly的运行时。

在受益于我们优化渲染性能的同时,你可以用我们的JavaScript/TypeScript API实现交互代码。许多可重用的组件已为你编写好,以处理VR、AR、音频等。

是的,我们支持WebXR,这款引擎从一开始就专为其设计。

下载页面下载Wonderland Engine,并在此注册账号

Last Update: September 24, 2023

保持更新。