1.Cesium开发基础篇 | 05glTF介绍及加载
2.Babylon.js实战元宇宙/WebXR
3.也许是2017最惊艳的演示工具 - Ludus

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

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

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

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

       每个glTF模型的核心是其JSON结构，包括场景、节点、相机、网格、皮肤、动画、访问器、材质和纹理等元素。场景由引用节点定义，节点可以包含变换参数、网格和相机，以及描述网格变换的蒙皮。相机定义了渲染场景的视锥体配置，网格描述了场景中的几何数据，皮肤定义了蒙皮参数，动画描述了节点随时间变化的asp 起名 源码参数，访问器提供了数据源，材质定义了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可视化应用。

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

也许是最惊艳的演示工具 - Ludus

       presentation是设计领域中至关重要的环节，无论是设计的精良还是产品的用心，都需要借助一个优秀的演示工具来展现其价值。近期，一款名为Ludus的演示工具引起了广泛关注，其独特的功能和创新性设计，无疑为presentation领域带来了新的生命力。

       Ludus的亮点在于其强大的内嵌功能，支持多种网络媒体格式，包括视频（如YouTube，Vimeo）、动态和静态（如Flickr，GIPHY，Instagram，Noun Project图标等）、设计原型和3D模型（如Framer，InVision，SketchFab）、音乐（如SoundCloud）、源码（如CodePen）以及Dropbox上的文件，均能在演示中无缝操作。

       对比市场上现有的工具，如微软的PowerPoint和Google Slides，Ludus提供了更为丰富且灵活的演示体验。它能够添加本地字体，支持直接复制粘贴链接、本地和视频，甚至直接操作Prototype和3D模型。这些功能大大提升了演示的交互性和观赏性，使得演示内容更加生动和吸引人。

       Ludus的出现，不仅为设计师和产品经理提供了更多创新的可能性，同时也为提升presentation效果提供了强大的工具支持。其定位为免费版本，未来将逐步引入更多专业功能以满足不同用户的需求，以期实现更加全面和专业化的演示服务。

       如果你对Ludus感兴趣，可以探索其在线演示文档，亲身体验其独特魅力。这款工具无疑将为presentation领域带来新的变革，为你的设计之旅增添无限可能。