WebXR桌面浏览器模拟器使用简介

techbrood 发表于 2019-10-29 14:30:02

标签: webxr, simulator, tool

- +

WebXR标准最近(10月份)刚刚发布了工作版本(Working Draft),是一个重要的里程碑。

由于WebXR的体验依赖于头戴设备,因此其应用程序开发和调试比较困难,

为了测试你的应用程序在各种情况下的响应,你得拥有大量的设备:移动设备、3dof设备、6dof设备等等(比如Oculus Go等)。

如果我们只是想学习体验一下WebXR,无疑学习成本较高。

好在Mozilla WebXR团队创建了一个WebXR API模拟器浏览器扩展,与Firefox和Chrome都兼容,它模拟WebXR API,模拟各种兼容设备,如HTC Vive、Oculus Go和Oculus Quest、Samsung Gear和Google Carboard。使用扩展功能,您可以打开一个开发人员工具面板,该面板允许您控制耳机和任何手动控制器的位置和方向,以及控制器上的按钮按下。

webxr simulator.jpg

如何安装使用

  1. 从扩展程序商店安装扩展 (FirefoxChrome)

  2. 打开一个WebXR页面, 正常情况下,页面应该提示你进入了VR模式(模拟的)

  3. 打开F12,进入WebXR标签,改变模拟器的设备、位置、旋转来观察程序的响应。

possitive(16) views8363 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 2019年开源WebRTC媒体服务器选型比较

    什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...

  • 2019年NodeJS框架Koa和Express选型比较

    Koa和Express都是NodeJS的主流应用开发框架。
    Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...

  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;

  • WebGL场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...

  • 深入理解CSS3滤镜(filter)功能和实例详解

    CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
    把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • Three.js入门教程6 - 创建全景图和纹理

    全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...

  • Three.js入门教程2 - 着色器(下)

    这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。

  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...

  • 更多...