1.Cesium开发基础篇 | 05glTF介绍及加载
2.Babylon.js实战元宇宙/WebXR
3.也许是2017最惊艳的演示工具 - Ludus
Cesium开发基础篇 | 05glTF介绍及加载
在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则将所有内容封装在二进制格式中。如何看懂net源码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可视化应用。
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,您需要一个兼容的matlab源码怎么调设备,如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领域带来新的变革,为你的设计之旅增添无限可能。