皮皮网

1.用SpectorJS优化WebGL应用
2.TSLint 和 ESLint 是怎么融合在一起的
3.gltf格式一、简介
4.Babylon.js实战元宇宙/WebXR
5.Cesium开发基础篇 | 05glTF介绍及加载
6.threejs能做什么?

用SpectorJS优化WebGL应用

       在WebGL应用开发中，高效的调试工具是至关重要的，尤其是在WebVR/AR领域不断发展的今天。对于WebGL开发者，尤其是php输出php源码经验丰富的开发者，找到与项目兼容且功能强大的工具显得尤为关键。然而，市面上的一些工具由于缺乏WebGL2功能或扩展支持，可能无法满足现代项目的需求。这就引出了Patrick Cozzi博客文章中提到的挑战。

       BabylonJS的核心贡献者，同时也是SpectorJS的开发者，由于在引擎层面的需要，看到了优化调试工具的必要性。SpectorJS作为开源项目，旨在提供一个与所有WebGL 3D引擎兼容的解决方案，能帮助开发者捕获和检查任何在应用中呈现的WebGL帧，无论是在开发初期还是经验丰富的阶段。

       安装SpectorJS非常方便，可以直接作为浏览器扩展使用，如Chrome或Firefox。一旦安装，你可以在访问像Babylon JS playground这样的网站时，看到扩展图标在具有3D上下文的画布上变为红色，这表示SpectorJS已准备就绪。点击后，它会注入额外的调试代码，捕获帧信息，并提供一个弹出窗口来查看详细数据，包括视觉状态变化、命令列表、着色器源代码等。

       SpectorJS不仅捕获视图直观，还能帮助开发者追踪问题，比较不同引擎之间的差异，并允许自定义数据的显示和通过代码驱动扩展。无论是为了团队协作还是跨平台问题解决，SpectorJS的强大功能都使其成为WebGL应用调试的强大工具。如果你希望在自己的项目中使用，可以在npm上找到独立版本的SpectorJS。

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

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

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

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

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

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

       不同的 AST

       Eslint 使用 espree 作为自己的解析器，并生成相应的 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 融合在一起。还是挺巧妙的。

gltf格式一、简介

       GLTF简介，搭建机场的源码作为一种在3D领域被称为"3D界的JPEG"的数据格式，由Khronos维护组织推出，旨在统一适用于应用程序渲染的3D格式。GLTF的特点包括：由OpenGL维护组织推出，适用于基于OpenGL的引擎；减少了3D格式中的冗余信息，优化了资源；提高了应用程序读取效率和减少了渲染模型的运行时间；支持3D模型几何体、材质、动画及场景、摄影机等信息。

       GLTF有两种导出格式：.gltf和.glb。.gltf文件导出时，一般会输出两种文件类型，一种是.bin文件，以二进制流的方式存储模型基本数据信息；另一种是.gltf文件，本质是json文件，记录模型顶点数据的索引和材质索引，方便编辑，具有较好的可读性。而.glb文件格式只导出一个文件，将所有数据都输出为二进制流，通常比.gltf文件更小，适用于不关心模型内具体数据的情况。

       GLTF的打开方式有多种：推荐使用gltf-viewer，可以修改和查看各种属性；VScode安装gltf tools插件，可以一边查看json一边修改与查看模型，同时支持Babylon.js、Cesium Filament、Three.js等四种引擎。

       Draco是一种用于压缩和解压缩3D几何网格和点云的库，由Google推出，用于提升压缩效率和速度。通过Draco开发的命令行工具gltf-pipeline可以将glTF资源进行编码压缩，gltf-pipeline可以通过npm安装使用。Draco开源库地址提供了C++源代码和处理编码数据的C++及JavaScript解码器，支持压缩点、连接信息、纹理坐标、颜色信息、正常量以及与几何形状有关的任何其他一般属性，显著缩小了3D图形文件的大小，不影响视觉效果，适用于虚拟现实和增强现实场景，提高应用程序下载速度和3D图形加载速度。

       通过Draco进行压缩基本上是有损的，主要体现在Draco通过Edge breaker 3D压缩算法改变了模型网格数据的索引方法，缺少了原来的网格顺序；通过减少顶点坐标、顶点纹理坐标等信息的位数，以减少数据的存储量。

       参考资料包括：GLTF2.0、压缩算法、3D文件压缩库——Draco简析、Draco Compressed Meshes with glTF and 3D Tiles。

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不仅仅是为了娱乐和游戏体验。今天，它可能更多地用于“严肃”场景，尽管对于作者来说，游戏是一项严肃的业务。

       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通信服务示例，以便与您的同事和朋友共享和测试。完整的设置说明可以在自述文件中找到。

Cesium开发基础篇 | glTF介绍及加载

       在Cesium开发中，了解如何加载和使用glTF模型是非常重要的。glTF，即Graphics Language Transmission Format，是一种专为图形应用设计的高效、可扩展且互操作的3D内容传输格式，由Khronos集团维护，现已成为Web上的3D对象标准。

       glTF提供了一种通用的方式来传输和加载3D模型，几乎所有的3D Web框架都支持glTF格式。它通过JSON文件描述模型，支持外部数据，并允许将文件转换为二进制格式glb。Cesium提供了一个源码库，可将obj文件转换为glTF格式，方便开发者使用。

       glTF模型结构包括一个JSON文件和可选的外部文件，以及两种主要格式：glTF和glb。glTF文件定义了场景、节点、网格、相机、材质等元素，而glb则将所有内容封装在二进制格式中。JSON文件中的场景对象以数组形式存储，每个对象通过引用节点定义了场景图。节点可以包含变换参数、网格引用、相机等，并通过索引定义了对象之间的关系。

       每个glTF模型的核心是其JSON结构，包括场景、节点、相机、网格、皮肤、动画、访问器、材质和纹理等元素。场景由引用节点定义，节点可以包含变换参数、网格和相机，以及描述网格变换的蒙皮。相机定义了渲染场景的视锥体配置，网格描述了场景中的几何数据，皮肤定义了蒙皮参数，动画描述了节点随时间变化的参数，访问器提供了数据源，材质定义了3D对象的外观参数，而纹理定义了图像如何在对象上张贴。

       为了验证和查看glTF模型，可以使用多个在线工具，如glTF在线验证器、浏览-Sketchfab、PlayCanvas查看器、ThreeJS查看器、BabylonJS查看器等。开发者还可以使用glTF转glb工具将模型转换为二进制格式。

       Cesium提供了两种加载glTF模型的方式：通过Entity API和Primitive API。Entity API允许开发者创建和管理模型，而Primitive API则负责渲染模型。使用模型时，可以设置模型矩阵属性，定义模型的坐标转换，为模型创建一个局部坐标系。

       为了深入学习Cesium和glTF，推荐查阅相关文档和书籍。此外，了解glTF规范、掌握Cesium API，并尝试使用不同工具加载和查看模型，可以极大地提升开发技能。通过实践和学习，开发者能够更好地利用Cesium实现复杂的3D可视化应用。

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在非游戏场景中的强大能力。这些实例在非游戏开发者中特别推荐，为初学者提供了学习和实践的宝贵资源。