NSDT工具推荐Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割

凭借我在 3D 动画和互动媒体方面的技能,在创意/技术领域工作是一个令人兴奋的时刻。

Apple Vision Pro 的推出,沉浸式网络技术终于变得更加主流。 XR 和空间计算时代似乎指日可待。

在 Apple 发布的“认识 Safari 进行空间计算”视频中,他们重点介绍了一些 Web GL 库,其中包括我最喜欢的 Babylon JS。

我的客户希望为广大受众提供网络就绪、易于访问的体验,他们无需下载应用程序,并且可以跨平台、跨设备和个人选择的交互方式工作。 例如,如果有人不想或没有耳机可以使用但仍然可以享受体验,则可以使用桌面或移动版本。

这一切如何运作的具体细节是通过充分利用 Web 3D 库的潜力来支撑的。 在对现场工作和个人项目进行一些生产测试后,Babylon JS 已成为我选择的 Web XR 引擎。

这篇文章从创意的角度阐述了该引擎的最佳之处。

1、自我介绍

自 2002 年以来,我一直在网络上涉足 3D,从 Cinema 4D 获取动画并将其导出到 VRML:一个必须为 Internet Explorer 安装的外部插件。 我不敢相信浏览器能够渲染这种内容——然而只是勉强渲染,而且对相关 3D 内容进行了大量优化。 我最近在 XR:WA 会议上遇到了 VRML 的创建者 Mark Pesce,我真的很极客!

快进几年,我在伦敦的一家广告公司工作。 在掌握了一些编程技能(之前在游戏工作室担任动画师)之后,我现在正在将我的 MEL 脚本知识转换为 Flash 中的 Actionscript (AS3)。

我开始使用 Away3D 和 Papervision 创建一些基本的 3D 动画和游戏,最终将其应用到与 2010 年世界杯同时上映的最后一部《怪物史莱克》电影的点球大战中。 一切都通过 Flash 在浏览器中实现,但仍然有 3D 引擎。

快进到 2018 年,我终于开始将我的动作脚本技能转化为 JavaScript,并深入研究实时 3D 引擎的世界。

我接触过 ThreeJS,但最终偶然发现了 Babylon JS。 就像同一领域中的所有类似软件一样,各有优缺点,但说我对这个库印象深刻是一种轻描淡写的说法。

2、我为什么更喜欢Babylon JS

从创意人士的角度来看,这就是为什么我更喜欢自己使用 Babylon JS:

  • 文档

Babylon.js的文档非常详尽地链接到你可以即时尝试的游乐场示例。 语气很容易理解,当您确实需要深入了解某些主题时,教程风格的文档和 API 之间会有混合。 我研究和学习了很多软件。 Babylon JS 文档无疑是我见过的最好的软件手册之一。

  • YouTube 频道

这个YouTube频道也是开始学习 Babylon JS 的好方法。 作为一名艺术家,我发现这里的主题处于中高级水平,但它们确实很好地涵盖和解释了一些更常见的主题。 此处涵盖了导入自定义模型、动画组和基于图像的照明 — 对于动画师/3D 艺术家来说,这可能是需要讨论的三个最重要的主题。 它还为充满热情的开发人员团队提供了面孔和角色,他们可以很好地解释和分解复杂的概念。

  • 社区

我发现 Babylon JS 论坛和 HTML5 游戏开发者都充满了非常支持的开发者。 一点态度都没有。 这里的人们非常热情、知识渊博、乐于助人,氛围非常棒。

最棒的是 Babylon JS 的主要开发团队在这个论坛上很活跃,回答问题并提供反馈。 而且响应时间很快!

  • 游乐场

这是一个基于 Web 的开发环境,你可以检查和编辑自己的代码,也可以实时检查和编辑代码。 这是一种很好的方式来揭开整个过程的神秘面纱并立即投入其中。

许多游乐场都可以从文档本身中搜索到,因此你可以获得有关该主题的真实工作示例,甚至是你正在研究的代码片段。

我发现,这是一个开始项目的好地方,看看你的想法是否可行。

https://www.babylonjs-playground.com/#5GX75D#3

这是真正很棒的事情:

游乐场示例位于文档中,并与上面列出的所有其他学习渠道相关联。 因此,你可能会在 YouTube 上观看视频,然后可以点击 Playground 链接,进行查询并前往文档或论坛,而其他人则采用了原始 Playground 并对其进行了修改来回答你的问题。这使得文档、YouTube 频道、论坛和社区成为一个真正的工作有机体。 随着事物的变化、适应和成长——每个人都投入。 我发现这是了解该框架复杂性的一种简单方法。

  • Inspector

在 Babylon JS 中,Inspector(检查器)提供有关 3D 场景的实时详细反馈。 材质、照明、网格、粒子系统,甚至变形目标和角色装备!

从Inspector获取场景的详细信息

它甚至允许在 3D 场景中直接操作你的资产,类似于在原生 3D 软件、unity 或 unreal 引擎中工作。 观看此视频了解更多信息。

  • XR开发

在过去的两年里,我为客户创造了一些 XR 体验,Babylon JS 确实不止一次挽救了这一局面。 与其他库(包括 8th Wall、Zappar 和 WebARkit)的集成有所不同,但仍然非常可靠。

WebXR 框架着眼于未来,并且在 Android 上运行良好。

随着 Safari 在 Apple Vision Pro 上实验性地推出 WebXR,我乐观地认为它最终将在不久的将来在平板电脑和移动设备上启用。

  • 从 3D 导出

我使用 Maya 来创建大部分 3D 动画。 对于导出,我使用 Babylon JS 导出器
或者来自 iimachines 的这个插件来完成这项工作。

他们都给了我不同的结果。 然而,通过将其放入 Babylon JS 沙箱并查看幕后发生的情况,这很容易测试。

从 Blender 导出非常可靠,虽然我无法评论结果(目前),但我知道 Cinema 4D 和 3D Max 都有类似的导出工具。

去年,我发表了关于 3D 资产到 Web 3D 工作流程的演讲和 Global XR。

  • 节点材质编辑器

我无法强调这是多么强大和直观。 它让旧 3D 软件包中的许多类似着色编辑器相形见绌。 一个很棒的工具,可以为你的项目提供令人惊叹的实时反馈。

使用节点材质编辑器轻松创建复杂的着色器

这是我构建的另一个基于节点材质动画着色器的游乐场

  • 图形用户界面编辑器

为你的沉浸式场景和内容创建复杂的 3D UI 设计的简单方法。

James Simonson 开发了一个令人惊叹的 Figma 到 Babylon JS 插件,可让你将 Figma 设计直接导出到 Babylon JS 场景。 这可以使 2D UI 和 UX 设计师能够轻松创建沉浸式内容。 它还允许 UI 设计师同时独立于 3D 开发人员工作,这也是开发人员社区如何与核心团队以及彼此协作的一个很好的例子。

  • 团队及其下一步行动

Babylon JS 的团队、愿景和未来路线图都令人惊叹。 他们对产品的热情极具感染力。 模板、代码片段和自己论坛中的活跃声音降低了进入门槛和入门门槛。

3、结束语

随着沉浸式 Web 体验的需求越来越大,了解 Web 3D 引擎非常重要,因为它们构成了构建这些混合现实 (XR) 体验的基础。 我很兴奋也很乐观,Babylon JS 将继续沿着改进和完善的轨迹发展,为更加身临其境的网络提供动力。


原文链接:Why Babylon JS is my Web3D engine of choice

BimAnt翻译整理,转载请标明出处