手记

巴比伦Viewer(v2)——更简洁、更高效的3D模型展示工具

巴比伦可以用来构建几乎任何类型的3D或图形化的网页(甚至是原生!)体验。只有天空才是限制!不过,一个具体但常见的应用场景是在网页上查看单个的3D模型。电子商务就是一个很好的例子,在这种情况下,你可能只想为一件家具、一双鞋、一个发动机零件等渲染一个互动的3D模型。由于这种应用场景非常普遍,使用巴比伦来实现这一点非常简单,这就是新的巴比伦查看器的目标。

我们为什么需要浏览器?

简洁性是 Babylon 的核心理念,确实,设置画布、引擎和场景并加载一个模型并不需要太多代码(参考 链接)。但还有很多其他因素需要考虑,以打造一个优秀的模型浏览体验

  • 配置最佳渲染模式(如 WebGL 和 WebGPU),运行高效的渲染循环等……
  • 根据需要进行缩放归一化,高效支持多种格式和多种 glTF 扩展……
  • 设置天空盒,尽可能地使用环境光,使用替代光照配置、阴影和色调映射……
  • 提供交互提示信息,区分页面滚动和指针输入时相机的轨道……
  • 暂停或恢复相机自动轨道,设置兴趣点位,重置或更改相机姿态时的动画效果……
  • 选择、启动和停止动画,切换材质变体版本……
  • 进入或退出全屏模式,使用 WebXR 或其他 AR/VR 替代方案(如 QuickLook)……
  • 等等

模型查看器虽然一开始很简单,但很快就会变得复杂。

关于旧版的巴比伦查看器?

在2017年(也就是七年前!)创建了一个Babylon Viewer,经过了一年左右的发展,此后基本处于闲置状态。现有的Babylon Viewer设计上导致了较大的包体积和较差的树摇效果(即模块化打包中移除未使用代码的过程),并且过度依赖于旧技术(如Handlebars、UMD等)。经过一番考虑,我们决定从头开始重做,一旦新版本的功能与现有版本相差无几,就用新版本替换旧版本。

设计的基本原则

巴别查看器并不是查看 3D 模型的唯一选择,但它是在巴别技术基础上构建的一个方案,并且有自己的设计理念,其中一些理念让它与其他方案有所不同。

轻松集成

使用Babylon Viewer在应用中渲染模型应该非常简单。例如,你已经可以仅通过纯html并依赖ESM(无需使用打包工具)像这样使用新的Babylon Viewer功能:

" target="_blank" rel="nofollow" />

HTML自定义标签示例

Viewer包还包括可以直接与打包工具配合使用的库文件(无需自带它所依赖的Babylon包等)。

大部分的 Viewer 逻辑和状态位于一个主要部分的纯 JS 层 中,并且使用起来也很简单。

JavaScript 层的代码片段

最后,我们还计划推出一个“Viewer Configurator”工具。这将允许您通过界面全面配置查看器,实时查看预览,并获取代码片段以重现屏幕上的设置。

简单

旧的巴比伦查看器有一个非常大的占用空间(最终的包大小很大)。这部分原因是旧查看器的设计决定,部分原因是@babylonjs/core和@babylonjs/loaders的限制。对于新的查看器,最小化最终的包大小是首要目标,因为它可以降低托管成本并减少首次渲染帧所需的时间。目前,新的查看器将下载大约470kb(已压缩)来渲染一个基本的glTF模型。

我们正在努力把规模变小:

  1. 引入工具集以深入理解使用Viewer时最终包的组成,以及识别未被执行的代码。
  2. 对底层的Babylon库进行架构调整,以改进代码树摇效果。
  3. 对底层的Babylon库进行架构调整,以允许功能和能力按需加载(例如动态导入)。
  4. 精心设计和开发新的Viewer,以平衡全面的功能特性与较小的占用空间。

打包工具的输出结果

灵活

许多应用程序需要的模型查看器功能大致相同,但不可避免地会有一些额外的特定功能。这些功能过于专门,无法内置到 Babylon 查看器中。在这种情况下,我们不希望有人说“哦,你不能使用 Babylon 查看器了”。因此,我们不会隐藏 Babylon API,而是会正式开放它,以允许进行无限的自定义。

新的 Babylon Viewer 也将支持 Babylon 自身支持的所有模型格式和 glTF 扩展,但是默认情况下,特定模型格式或 glTF 扩展的支持代码只有在需要该格式或扩展的模型被加载时才会下载。如果你有一组固定的需要支持的格式和/或扩展,你也可以选择静态导入它们,将它们包含在你的主要捆绑包中。

如前所述,Viewer 包含一个纯 JavaScript 层,因此可以轻松地与您选择的任何框架(例如 React 或甚至 Babylon Native)一起使用。对于特定框架的层(如 HTML 自定义元素),将提供许多功能(如动画)的默认 UI,但您将拥有完全控制权,可以更改样式或完全自定义 UI。

现代

旧版巴比伦查看器使用了许多旧技术。新版巴比伦查看器将在多个方面实现现代化。

  • WebAPI — 使用标准的 Web Components / 自定义组件。
  • WebGPU — 在支持的浏览器中全面支持 Babylon 的 WebGPUEngine。
  • 发布 — NPM 包中已经提供了 ESM 包,可以直接在浏览器中使用。
  • 框架 — 可以轻松地在前端框架如 React 中使用 Babylon Viewer。
  • XR — 支持 WebXR 以及 QuickLook 的 XR 场景。
  • 还有更多功能哦!
使用起来很简单

当一个应用程序集成了Babylon Viewer时,最终用户将与该应用程序进行交互,我们希望尽一切可能确保用户有良好的体验。这意味着,我们会提供一些提示来帮助用户更好地与模型互动,同时我们会确保相机移动的平滑,让用户不会感到迷失,无论在什么样的设备和3D模型上,我们都能保证流畅的性能,并且特别照顾到移动设备的电量问题等等。

要不要试试看?

新的Babylon Viewer现在可以通过npmjs.com以预览包的形式获取。请查阅readme,以开始使用!按照readme中的说明,在安装npm包时,您需要指定@preview标签,否则你将会安装旧版本的Babylon Viewer。

想加入讨论吗?

如果你有任何意见或建议,或者某些功能对你来说特别重要,可以到 Babylon 论坛,在Babylon Viewer v2 宣布的线程里加入讨论!

Ryan Tremblay | 领英

https://forum.babylonjs.com/u/ryantrem ryantrum 的个人主页

Ryan Tremblay (@ryan_w_tremblay) / X

0人推荐
随时随地看视频
慕课网APP