Babylon.js实战元宇宙/WebXR

       从虚拟现实（VR）音频实验到在街机上创建虚拟现实休闲游戏，再到使用增强现实（AR）或虚拟现实创建更严肃的码解协作方式，本文将深入探讨今天在虚拟世界中能够实现的码解各种可能性。本文将分享作者使用Babylon.js构建沉浸式或增强现实WebXR体验的码解多个有趣实验，以及更严肃的码解业务场景。您将能够通过试验和阅读每个演示的码解西瓜通道源码源代码来学习。如果您没有兼容的码解设备，本文将分享一些后备方案，码解并提供使用Valve Index、码解Oculus Quest 2或HoloLens 2的码解视频。

       Babylon.js是码解一个免费的开源3D引擎，基于WebGL和WebGPU构建。码解它开箱即用地支持Web音频和WebXR，码解这意味着您可以专注于构建体验或游戏，码解而无需担心许多Web API的码解复杂性。

       WebXR是一种支持虚拟现实和增强现实场景的Web API，作者期待它在构建网络元宇宙时成为主要构建块。要使用WebXR，您需要一个兼容的设备，如Valve Index、Oculus Quest 2、Windows Mixed Reality头戴式设备、HoloLens 2或任何与SteamVR兼容的VR头戴式设备，以及用于AR的Android智能手机或HoloLens 2。对于浏览器，您需要基于Chromium的浏览器，如Google Chrome、Microsoft Edge、Opera、Samsung Internet、Chrome for Android或Oculus浏览器。

       Babylon.js提供了一行代码即可提供完整的VR体验，它将转换现有的场景VR兼容，提供远传（teleport）能力（您需要提供充当地板的网格的名称）并将显示当前使用的控制器的正确模型。例如，要沉浸在著名的《回到未来》序列中，请导航至特定URL并查看代码。由于这行代码，您会发现奇迹发生了：其中2个对象可以支持传送目标：“Road1”和“Herbe1”。如果您连接了兼容的拼多多买源码浏览器和WebXR兼容设备，您会在右下角看到一个VR图标。

       如果您没有兼容的设备，可以尝试安装名为“WebXR API Emulator”的Chrome扩展程序，它将模拟WebXR设备。打开开发者工具，您就可以模拟某人使用VR头戴式设备。下面的视频展示了在Windows 上使用Valve Index的完整体验。

       在VR街机中，作者喜欢制作小型视频游戏，喜欢街机，也喜欢虚拟现实，因此将所有这些元素混合在一起。首先，您可以查看多年前移植的原始2D Canvas游戏。然后，作者简单地使用这个2D画布在Babylon.js的3D画布中的2D平面上渲染它。事实上，您必须在WebGL画布中渲染所有内容，以便在VR中查看元素并与之交互。经典HTML元素不会投影到VR中的3D画布中。Babylon.js通过动态纹理支持2D画布。然后，只需要将飞机放在街机模型的顶部。作者从Sketchfab下载了模型。如果需要帮助定位场景中的对象，强烈建议使用检查器工具。

       虚拟 VR钢琴是另一个例子，作者喜欢作曲，也喜欢虚拟现实，因此将两者结合起来。您可以尝试使用平面2D屏幕，但要使其在VR中运行，只需取消第行和第行的注释。然后，相机将位于钢琴的中心。当然，WebXR不仅仅是为了娱乐和游戏体验。今天，它可能更多地用于“严肃”场景，安卓dlna源码尽管对于作者来说，游戏是一项严肃的业务。

       WebXR及其AR功能对于电子商务场景非常有趣。作者鼓励您阅读Babylon.js博客上的一篇文章：WebXR、AR和电子商务：初学者指南。它包含一个演示，您可以在Android智能手机（或HoloLens 2）上试用。视频可以在这里观看。

       作者最近还致力于构建一个“元宇宙”演示，在演示中，他们能够使用Azure通信服务（一种运行在WebRTC之上的CPaaS）从VR场景中使用Microsoft Teams呼叫某人。这个想法是为了试验一个概念，例如，您可以在Microsoft Teams连接的销售代表的帮助下参观房屋。下面是使用Valve Index设备的演示视频。

       作者首先在Babylon.js Playground中构建了一个原型，您可以在其中导航到场景，按下“呼叫”按钮并体验一段假视频，还可以单击Oculus控制器的“A”按钮，将视频放在左侧控制器的顶部。然后，作者集成了ACS JavaScript SDK，以通过Microsoft Teams的ACS基础设施流式传输视频。您可以通过示例尝试并阅读作者GitHub仓库中的代码。在不到分钟的时间内部署一个Azure通信服务示例，以便与您的同事和朋友共享和测试。完整的设置说明可以在自述文件中找到。

学习webgl后选择框架,three.js和babylon.js哪个更值得深

       学习WebGL后，选择框架时，three.js与babylon.js成为热门选项。three.js作为纯渲染库，对新手友好，入门相对简单。然而，深入使用后，会发现three.js源代码的扩展性有限，许多地方仅能通过修改源码实现扩展。

       另一方面，babylon.js的力源码头封工程化程度较高，提供如sandbox、playground、材质编辑器等工具链，且拥有活跃的开发者社区，能够快速解决问题。虽然过去在国内打开示例页面时可能遇到卡顿，但这并未影响其学习资料的丰富性。

       综合考虑，如果需做选择，推荐优先考虑babylon.js。但同时，建议不要局限于此，两者均可深入研究，取长补短，以丰富自己的技能库。对于建筑信息模型（BIM）与地理信息系统（GIS）领域，cesium是一个不可或缺的工具，同样建议学习。

TSLint 和 ESLint 是怎么融合在一起的

       Eslint 能够对 JavaScript 代码进行静态检查，涵盖逻辑错误和代码格式问题。其工作原理是将代码解析成抽象语法树（AST），然后基于 AST 检测问题。

       同样，Tslint 也是一款静态检查工具，用于检测 TypeScript 代码中的逻辑错误和代码格式问题，其原理也是基于 AST。

       既然两者都基于 AST 且功能相似，为何不将它们合并呢？

       最终，Tslint 被整合进了 Eslint，Tslint 被标记为废弃。

       然而，两者毕竟基于不同的 AST，且 Tslint 中包含一些类型检查的逻辑，这是 Eslint 所不支持的。那么，它们是如何融合的呢？接下来，我们一起来探究。

       不同的 AST

       Eslint 使用 espree 作为自己的解析器，并生成相应的nbb产品溯源码 AST。

       Typescript 和 Babel 也都有各自的解析器和相应的 AST。

       这些 AST 之间存在怎样的关系呢？

       最早的解析器是 esprima，它参考了 Mozilla 浏览器 SpiderMonkey 引擎的 AST 标准，并进行了扩充，形成了 estree 标准。

       后续的许多解析器都是对 estree 标准的实现和扩展，如 esprima、espree、babel parser（babylon）、acorn 等。

       当然，也有不是 estree 标准的，如 typescript、terser 等的解析器。

       它们之间的关系如图所示：

       esprima 和 acorn 都是 estree 标准的实现，而 acorn 支持插件机制来扩充语法，因此 espree 和 babel parser 是直接基于 acorn 实现的。

       terser、typescript 等则是另一套。

       因此，对于 JavaScript 的 AST，我们可以简单划分为两类：estree 系列、非 estree 系列。

       可以使用 astexplorer.net 工具来可视化地查看不同解析器产生的 AST。

       espree 就是 Eslint 自己实现的解析器，但它主要进行代码的逻辑和格式的静态检查，在新语法的实现进度上不如 babel parser。因此，Eslint 支持解析器的切换，可以在配置不同的解析器来解析代码。

       配置文件中可以配置不同的解析器，并通过 parserOptions 来配置解析选项。

       下面分别讲解 Eslint、typescript、babel、vue 等的解析器如何在 Eslint 中使用：

       而且，在单文件组件中的 JS 部分，还可以分别指定不同的解析器。

       感觉有点晕吗？typescript、babel、vue 等的解析器都有相应的用于 Eslint 的版本。其实想想也很正常，因为 lint 是基于 AST 的，如果不能解析，那么如何进行 lint，所以需要支持解析器的扩展和切换。

       但是，解析器之后的 AST 可能不同，那么 lint 的规则实现也不同。为了复用规则，大家还是尽量往 estree 标准上靠比较好。

       Tslint 和 Eslint 的融合也是这样的思路，下面我们来详细了解一下。

       Tslint 融合进 Eslint

       Tslint 是一个独立的工具，基于 TypeScript 的解析器来解析代码，并实现了基于该 AST 的一系列规则。

       如果要融合进 Eslint，那么如何融合呢？主要考虑的是 AST 如何融合，因为规则是基于 AST 的。

       例如，const a = 1; 这段代码，estree 系列的 AST 是这样的：

       而 TypeScript 的 AST 是这样的：

       由于 AST 不同，那么基于 AST 的规则肯定也要有不同的实现。

       如何融合呢？转换！把一种 AST 转成另一种 AST 就行了。

       没错，@typescript-eslint/parser 中确实也是这么做的，它把 TypeScript 的 AST 转换成 estree 的 AST（当然，对于类型部分，estree 中没有，就保留了该 AST，但加上了 TS 前缀）。这样，就能够用 Eslint 的规则来检查 TypeScript 代码中的问题。

       下面简单看一下 @typescript-eslint/parser 的源码：

       我简化了一下，是这样的：

       首先通过 TypeScript 的解析器将源码解析成 AST，然后转换成 estree 的，并记录了 estree node 和 TypeScript node 的映射关系，通过两个 map 来保存。

       具体的转换过程，其实就是遍历 TypeScript 的 AST，然后创建新的 estree 的 AST。

       其中，对于 estree 中没有的类型相关的 AST，则直接复制，并在 AST 名字前加个 TS。

       这样，就把 TypeScript 解析器产生的 AST 转成了 estree 的。

       既然 AST 统一了，那么 Eslint 的规则就可以用来 lint TypeScript 代码了。

       但是对于一些类型的部分，还是需要用 TypeScript 的 API 来检查 TypeScript 的 AST 怎么办呢？

       还记得我们保存了两个 map 吗？estree node 到 TypeScript node 的 map，还有反过来的 map。这样，需要用到 TypeScript 的 AST 的时候，再映射回去就行了：

       Eslint 的自定义解析器的返回结果中，除了有 ast，还支持返回 services，这是用于放置一些其他信息的，比如这里用到的 map，还有 TypeScript 的 program 的 API（比如 program.getTypeChecker 这种）。需要的时候就可以从 estree 的 ast 再映射回 TypeScript 的 ast 了。

       通过把 TypeScript AST 映射成 estree AST，达到了复用 Eslint 规则的目的，并保存了节点映射关系和一些操作 TypeScript AST 的 API，可以基于这些单独做 TypeScript 相关的 lint。完美地融合到了一起。

       可以把这种融合用“求同存异”来总结：

       总结

       JavaScript 有不同的解析器，分为 estree 系列、非 estree 系列：

       Eslint 支持解析器的切换，可以在 babel parser、vue template parser、typescript 和 espree 中切换，当然也可以扩展其他解析器。

       Tslint 是一个基于 TypeScript 解析的独立工具。它和 Eslint 都是基于 AST 检查代码中逻辑和格式错误的工具，后来进行了融合。

       为了复用基于 estree 的一些规则，@typescript-eslint/parser 把 TypeScript node 转成了 estree node，但依然保留了映射关系和一些操作 TypeScript ast 的 API。

       这样基于 estree AST 的规则可以正常运行，基于 TypeScript AST 的规则也可以映射回原来的 TypeScript node 然后运行。

       通过这种方式，完美地把 Eslint 和 Tslint 融合在一起。还是挺巧妙的。

threejs能做什么?

       Three.js是一个专注于渲染的引擎，具备强大的可定制性和可扩展性。它帮助用户与WebGL进行交互，是WebGL领域的首选工具。

       若想开发游戏，推荐使用PlayCanvas或Babylon.js。它们都具有全面的游戏开发工具链，并配备专业编辑器。PlayCanvas引擎制作的多人在线射击游戏Mini-Royale便是典型案例。Babylon.js虽然没有Web端编辑器，但其源代码在GitHub上公开，用户可根据需求自定义。

       相比之下，Three.js在游戏开发方面略显不足，许多功能需自行实现。然而，它提供了丰富的第三方编辑器选择。nunuStudio以其出色的编辑体验和开源特性受到认可，是值得一试的编辑器。

       对于非游戏开发者，Three.js的轻量级特性使其成为理想选择。尤其是在使用WebGL、WebGL 2或WebGPU进行创意内容开发时，Three.js是首选工具。

       若初次接触Three.js并打算开发游戏，建议谨慎选择，毕竟Three.js在游戏开发领域相比PlayCanvas或Babylon.js稍显欠缺。不过，对于高手来说，Three.js提供了足够的自由度与深度，足以应对各种挑战。

       Three.js自年4月由Ricardo Cabello(mr.doob)首次发布以来，已积累了丰富历史和成熟社区。如果你对WebGL领域充满热情，并希望探索其无限可能，Three.js将是你的理想伙伴。

       此外，基于Three.js构建的许多网站和应用，如毅力号和直升机Demo，证明了Three.js在非游戏场景中的强大能力。这些实例在非游戏开发者中特别推荐，为初学者提供了学习和实践的宝贵资源。

如何选择 WebGL 框架和引擎？

       在选择 WebGL 框架和引擎时，可将它们大致分为三类：WebGL 封装、渲染引擎以及游戏引擎。下面将详细介绍这三类框架的特点、优势及适用场景。

       WebGL 封装：这类库主要解决 WebGL API 繁琐的问题，简化开发流程，如 twgl.js 和 regl。twgl.js 主要通过减少代码重复来简化 WebGL 开发，适合初学者，但功能相对有限。regl 则提供更高级的抽象，将过程式转换为函数式，使得代码更直观，功能更为丰富，适合熟悉 WebGL 开发的开发者。OGL 则定位在介于封装和渲染引擎之间，提供基础渲染概念但需开发者自行处理材质和光源。

       渲染引擎：这类引擎将矩阵变换、材质和光源等概念封装，提供更高的抽象层次，如 Three.js 和 Babylon。它们降低了 WebGL 学习门槛，使得即使不熟悉 WebGL 的开发者也能快速上手。大部分渲染引擎也提供自定义 Shader 功能，支持 GPU 实例等特性，但一般无法自定义渲染管线。

       游戏引擎：Unreal Engine 和 Unity 是目前最火的游戏引擎，它们基于 WebGL 实现了 WebAssembly 版本。Unreal Engine 的 Web 版本在早期有着惊艳的渲染效果，但体积庞大，导致很少有人实际应用。Unity 的 Web 版本则体积较小，支持小游戏，但在正式项目中应用较少。Godot 是一款开源游戏引擎，功能强大，但在 Web 领域的发展受到限制。

       Three.js 是最知名的 WebGL 渲染引擎，拥有庞大的社区和丰富的功能。虽然其版本管理不专业，代码质量一般，但社区支持强大，适合学习和小型项目应用。PlayCanvas 虽然开源，但主要通过在线编辑器使用，不适合直接从源代码开始开发。

       综合考虑，选择 WebGL 框架和引擎时，应根据项目需求、团队熟悉度、性能需求和未来趋势来决定。对于小型项目或学习目的，Three.js 或 Babylon 是不错的选择；对于需要高性能渲染的游戏或应用程序，考虑使用 Three.js 或 Babylon，并关注 WebGPU 的发展，以期在未来利用其更强大的性能。游戏引擎如 Unreal Engine 和 Unity 适合大型游戏项目，但对资源和开发经验有较高要求。