热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何为沉浸式WEB做准备

我们所知道的网站很快就会发生变化。在2D浏览器窗口中使用文本、图像和基本交互的日子已经为我们提供了很好的服务,但虚拟、增强和混合现实体验一直在变得更好。开发人员和设计人员需要超越浏

我们所知道的网站很快就会发生变化。在 2D 浏览器窗口中使用文本、图像和基本交互的日子已经为我们提供了很好的服务,但虚拟、增强和混合现实体验一直在变得更好。开发人员和设计人员需要超越浏览器窗口,为沉浸式未来做好准备。

featured_vr-scaled@wdd2x.jpg (1684×926)

许多人过去一直对 VR 和 AR 持怀疑态度,因为尽管对他们将实现的目标做出了宏伟的承诺,但它们大多未能达到行业所希望的规模。

但这次不同:Meta、Apple 和 Microsoft 等行业领导者正在追求一系列不同的混合现实项目;他们看到了机会,并且正在暗示接下来会发生什么。

在 Perkins Coie LLP 和 XR 协会的一项调查中,近十分之九的受访者表示,到 2025 年,包括增强现实、虚拟现实和混合现实在内的沉浸式技术将与移动设备一样无处不在。

这是一个大胆的预测,但它可能是我们的新现实。

 


用例

VR 和 AR 并不适合每个网站,这很好。无需在更适合标准观看体验的东西上强加身临其境的体验。

但是,如果做得好,3D 体验可以为您的网站增加很多。查看Mozilla 的演示体验、 Matterport的3D 导览以及Within 的沉浸式故事讲述。

以下是这些技术大放异彩的几个领域:



  • 零售——VR 可用于提供客户浏览产品的虚拟陈列室。AR 甚至可以通过向您展示一件家具如何适合您的房间,一幅画在您的墙上会是什么样子,或者在 Apple 的案例中,产品在您的桌子上的外观如何,从而将产品带入您的家中。

  • 新闻——通过提供 360 度视图并将观众置于故事的中心,可以丰富事件的报道。

  • 培训——AR 可以在物理设备上生成虚拟覆盖,因此员工可以进行更有效的实践培训。

 


定义您的平台

根据您要创建的内容,为您的网站添加身临其境的体验需要各种技能。无论您是 Web 开发新手还是拥有多年经验的经验丰富的开发人员,与经典 Web 开发的主要区别在于您正在从 2D 体验切换到 3D 体验。VR/AR 开发更接近于开发 3D 视频游戏,而不是创建 Web 应用程序。

首先,您需要决定要构建的硬件。您的观众主要使用电脑、智能手机还是 Oculus Quest 等耳机?每个硬件类别都提供了一组不同的功能。

接下来,当我们查看市场上的 3D 引擎和框架时,Unity、Unreal Engine和CRYENGINE等一些大牌脱颖而出。这些引擎中的大多数都是从游戏开发中衍生出来的,并且基于 C、C++ 或 C# 等编程语言。虽然非常强大,但对于任何试图创建基本沉浸式 Web 体验的人来说,它们都是多余的。

对于 Web 开发人员来说,好消息是WebXR 设备 API是由 W3C 指定的开放标准,其 Javascript API 使浏览器中的沉浸式体验成为可能。因此,如果您已经具备 Web 开发背景,则可以使用您的 Javascript 知识开始。

有一些有用的框架和平台使使用 WebXR 更加方便:



  • A-Frame – 用于构建 3D 体验的 Web 框架。

  • React 360  – 用于创建在 Web 浏览器中运行的交互式 360 度体验的框架。顾名思义,它建立在 React 之上,并重用了您已经知道的概念。

  • Amazon Sumerian  – 一项托管服务,可让您创建和运行 3D、AR 和 VR 应用程序。由于它已集成到 AWS 生态系统中,因此还可以将支持 AI 的元素添加到您生成的世界中。

 


创建您的内容

没有人愿意阅读 3D 格式的长文本块。既然我们谈论的是视觉体验,那么重点应该放在创造赏心悦目的内容上是合乎逻辑的。在普通网站上工作的东西在 3D 环境中可能不会感觉自然,因此您需要决定应该创建哪些视觉效果以适应格式。

您需要哪些高分辨率图像和资产?可以加视频吗?360度视频怎么样?观众会只是在看东西,还是能够与之互动?

您也不能忘记声音,因为它是沉浸式体验的关键部分。你应该创造什么音乐和声音来让内容变得生动?

不是每个人都会拥有最新最好的设备或 5G 覆盖范围。3D 内容对带宽和传输质量的要求要高得多。在典型的网站上,几毫秒的延迟可能会被忽视,但在 VR/AR 设置中,它会使体验变得迟钝或无法使用。

尝试将您的内容优化为在合理文件大小范围内的最高质量。如果体验开始受到同时下载过多资产的影响,最好创建一个更精简的体验,同时保持较高的性能。

考虑您的托管基础​​设施也很重要。这应该不是什么大问题,但值得一提的是,您需要在配置中添加新的内容类型,并且您的 CDN 也需要支持这些新类型。

 


使您的内容灵活

当我们谈论让您的网站为沉浸式体验做好准备时,我们不仅仅是在谈论让人们在 VR 中滚动浏览您的常规网站。这对你的观众来说并不引人注目。

这个想法是获取一些已经在您的网站上的内容并将其与表示层分离,以便您可以在 3D 环境或您想要的任何其他平台中使用它。经典的内容管理是在孤岛中进行的,这意味着您不能轻松地重用网站中的内容。

这种分离可以通过使用经典数据库来实现,但是如果您希望开发人员和内容团队进行协作,那么无头 CMS 与前端无关并且对用户更友好。

 


今天开始实验

构建 3D 内容体验可能看起来令人生畏,但正如我们所见,您可能已经具备开始尝试一些不同想法所需的 Web 开发技能。

您今天构建的内容将使您为明天的 3D 未来做好准备。

 

来源:https://www.webdesignerdepot.com/2021/12/how-to-prepare-for-the-immersive-web/



推荐阅读
  • 作者:守望者1028链接:https:www.nowcoder.comdiscuss55353来源:牛客网面试高频题:校招过程中参考过牛客诸位大佬的面经,但是具体哪一块是参考谁的我 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • 通过Web界面管理Linux日志的解决方案
    本指南介绍了一种利用rsyslog、MariaDB和LogAnalyzer搭建集中式日志管理平台的方法,使用户可以通过Web界面查看和分析Linux系统的日志记录。此方案不仅适用于服务器环境,还提供了详细的步骤来确保系统的稳定性和安全性。 ... [详细]
  • 微软Exchange服务器遭遇2022年版“千年虫”漏洞
    微软Exchange服务器在新年伊始遭遇了一个类似于‘千年虫’的日期处理漏洞,导致邮件传输受阻。该问题主要影响配置了FIP-FS恶意软件引擎的Exchange 2016和2019版本。 ... [详细]
  • PostgreSQL 10 离线安装指南
    本文详细介绍了如何在无法联网的服务器上进行 PostgreSQL 10 的离线安装,并涵盖了从下载安装包到配置远程访问的完整步骤。 ... [详细]
  • Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ... [详细]
  • 深入解析 Apache Shiro 安全框架架构
    本文详细介绍了 Apache Shiro,一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作,使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API,同时确保高度的安全性和灵活性。 ... [详细]
  • 本文介绍如何在现有网络中部署基于Linux系统的透明防火墙(网桥模式),以实现灵活的时间段控制、流量限制等功能。通过详细的步骤和配置说明,确保内部网络的安全性和稳定性。 ... [详细]
  • 本文深入探讨了计算机网络的基础概念和关键协议,帮助初学者掌握网络编程的必备知识。从网络结构到分层模型,再到传输层协议和IP地址分类,文章全面覆盖了网络编程的核心内容。 ... [详细]
  • 本文介绍了如何在 Windows 系统上下载、安装和配置 Netcat (nc) 工具,并通过具体步骤演示如何测试 UDP 连接。Netcat 是一个功能强大的网络工具,适用于多种网络操作。 ... [详细]
  • 深入理解Shell脚本编程
    本文详细介绍了Shell脚本编程的基础概念、语法结构及其在操作系统中的应用。通过具体的示例代码,帮助读者掌握如何编写和执行Shell脚本。 ... [详细]
  • 配置Windows操作系统以确保DAW(数字音频工作站)硬件和软件的高效运行可能是一个复杂且令人沮丧的过程。本文提供了一系列专业建议,帮助你优化Windows系统,确保录音和音频处理的流畅性。 ... [详细]
  • 深入探讨智能布线管理系统的电子配线架应用
    本文详细介绍了电子配线架智能布线系统的核心优势,包括实时监测网络连接、提高操作准确性、图形化显示连接架构、自动识别网络拓扑、增强安全性等功能。该系统不仅提升了网络管理的效率和准确性,还为资产管理、报告生成以及与其他智能系统的集成提供了强大的支持。 ... [详细]
  • 深入理解ASP.NET MVC中的_ViewStart.cshtml
    本文介绍了_ViewStart.cshtml文件在ASP.NET MVC 3.0及以上版本中的作用和使用方法。该文件位于Views目录下,主要用于统一配置视图布局和其他全局设置。 ... [详细]
  • 选择适合生产环境的Docker存储驱动
    本文旨在探讨如何在生产环境中选择合适的Docker存储驱动,并详细介绍不同Linux发行版下的配置方法。通过参考官方文档和兼容性矩阵,提供实用的操作指南。 ... [详细]
author-avatar
猪宝宝的事
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有