WebXR 填充库
这是WebXR设备API和WebXR游戏手柄模块的JavaScript实现。这个填充库允许开发者基于最新规范编写代码,在支持WebVR 1.1规范的浏览器或完全不支持WebVR/WebXR的移动设备上提供支持。
该填充库反映了已在多个浏览器中发布的API稳定版本。
如果你正在基于WebVR 1.1规范编写代码,请使用webvr-polyfill,它支持实现1.0规范的浏览器或完全没有实现的浏览器。然而,建议你针对WebXR设备API规范编写代码,并在浏览器开始实现最新变更时使用此填充库。
WebXR当前支持的最小输入控制也在这里进行了填充,使用游戏手柄API。
设置
安装
下载build/webxr-polyfill.js构建文件并作为脚本标签引入,或使用CDN。你也可以在同一位置使用名为webxr-polyfill.min.js
的压缩文件。
<script src='webxr-polyfill.js'></script>
<!-- 或使用CDN链接 -->
<script src='https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js'></script>
如果你使用browserify或webpack等构建工具,可以通过npm安装。
$ npm install --save webxr-polyfill
本地构建
$ npm run build
使用
webxr-polyfill暴露了一个单一的构造函数WebXRPolyfill
,它接受一个配置对象。完整的配置选项请参见API。
确保在调用任何XR代码之前实例化填充库!如果API不存在,填充库需要对其进行补丁,这样你的内容代码就可以假设WebXR API可以正常工作。
如果使用脚本标签,将存在一个全局的WebXRPolyfill
构造函数。
var polyfill = new WebXRPolyfill();
在模块化的ES6环境中,类似地导入并实例化构造函数。
import WebXRPolyfill from 'webxr-polyfill';
const polyfill = new WebXRPolyfill();
API
new WebXRPolyfill(config)
接受一个带有以下选项的config
对象:
global
:应该用于查找所需类型的全局对象。(默认值:浏览器上的window
)webvr
:是否应尝试回退到WebVR 1.1 VRDisplay。(默认值:true
)cardboard
:是否应仅在移动设备上尝试回退到WebXR API的JavaScript实现。(默认值:true
)cardboardConfig
:使用CardboardVRDisplay时要使用的配置。当cardboard
为false
或使用其他XRDevice时无效。可能的配置选项可以在cardboard-vr-display仓库的这里找到。(默认值:null
)allowCardboardOnDesktop
:是否允许在桌面上通过传感器使用Cardboard的立体渲染和姿态。这很可能只对开发和调试有帮助。(默认值:false
)
浏览器支持
开发注意事项:babel支持目前已移除,在#63中明确处理 提供了3个构建版本:build/webxr-polyfill.js,一个ES5转译构建版本,其压缩对应版本build/webxr-polyfill.min.js,以及一个未转译的ES模块版本build/webxr-polyfill.module.js。如果使用转译后的ES5构建版本,开发者需要根据其支持情况决定要填充哪些浏览器特性,因为没有包含额外的polyfill。此库使用的一些浏览器特性包括:
- TypedArrays
- Object.assign
- Promise
- Symbol
- Map
- Array#includes
检查.babelrc配置,并确保polyfill能在你选择支持的任何浏览器中运行。
Polyfill规则
- 如果
'xr' in navigator === false
:- WebXR类(如
XRDevice
、XRSession
)将被添加到全局作用域 navigator.xr
将被填充- 如果平台有来自WebVR 1.1规范的可用
VRDisplay
:navigator.xr.requestDevice()
将返回一个包装VRDisplay
的填充XRDevice
- 如果平台没有
VRDisplay
,config.cardboard === true
,且在移动设备上:navigator.xr.requestDevice()
将返回一个基于CardboardVRDisplay的填充XRDevice
- 如果
WebGLRenderingContext.prototype.setCompatibleXRDevice
不是函数:- 填充所有
WebGLRenderingContext.prototype.setCompatibleXRDevice
和一个用于{ compatibleXrDevice }
的创建属性 - 填充
HTMLCanvasElement.prototype.getContext
以支持xrpresent
类型。返回一个填充的XRPresentationContext
(通过CanvasRenderingContext2D
或ImageBitmapRenderingContext
(如果支持))用于镜像和魔窗
- 填充所有
- WebXR类(如
- 如果
'xr' in navigator === true
,config.cardboard === true
且在移动设备上:- 重写
navigator.xr.requestDevice
,以便如果存在原生XRDevice
则返回它,否则返回基于CardboardVRDisplay的填充XRDevice
- 重写
将来,当WebXR API在平台上实现但与规范不一致时(由于新规范变更或不一致),polyfill将尝试修补这些差异而不覆盖原生行为。
不支持/注意事项
XRWebGLLayer.framebufferScaleFactor
许可证
该程序对商业和非商业用途均为免费软件,根据Apache 2.0许可证分发。