巴比伦可以用来构建几乎任何类型的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功能: