WebVR Polyfill

如今使用 WebVR,不需要特殊的浏览器构建。「Use WebVR today, without requiring a special browser build.」

  • 所有者: immersive-web/webvr-polyfill
  • 平台: Linux, Mac, Web browsers, Windows
  • 許可證: Apache License 2.0
  • 分類:
  • 主題:
  • 喜歡:
    0
      比較:

Github星跟蹤圖

WebVR Polyfill

WebVR 规范 的 JavaScript 实现。该项目确保 您的 WebVR 内容适用于任何平台,无论浏览器/设备是否具有原生 WebVR 支持,或者实施时存在不一致的地方。

查看使用此 polyfill 的基本 WebVR 示例

安装

脚本

build/webvr-polyfill.js 下载构建并将其包含为脚本标记, 或使用 CDN。您也可以在与 webvr-polyfill.min.js 相同的位置使用缩小文件。

<script src='webvr-polyfill.js'></script>
<!-- or use a link to a CDN -->
<script src='https://cdn.jsdelivr.net/npm/webvr-polyfill@latest/build/webvr-polyfill.js'></script>

NPM

如果您使用 browserify 构建工具webpack ,请通过 npm 进行安装。

$ npm install --save webvr-polyfill

使用

使用版本 > = 0.10.0的说明。对于 <= 0.9.x 版本,请参阅 0.9.40标记

webvr-polyfill 公开了一个构造函数, WebVRPolyfill 对象进行配置。请参阅 src/config.js 上的完整配置选项。

确保在调用任何 VR 代码之前实例化 polyfill!该 polyfill需要修补 API,如果它不存在,那么您的内容代码可以假设 WebVR API 将正常工作。

如果使用脚本标记,则存在 WebVRPolyfill 全局构造函数。

var polyfill = new WebVRPolyfill();

在模块化的 ES6 世界中,导入和实例化构造函数类似:

import WebVRPolyfill from 'webvr-polyfill';
const polyfill = new WebVRPolyfill();

以下是查询显示器并基于其设置控件的示例 环境。请记住,您仍然需要提供控件和代码 如果没有找到本机 VRDisplays,则支持类似桌面的体验, 因为CardboardVRDisplay仅适用于手机。请参阅 示例

// Polyfill总是为我们提供 `navigator.getVRDisplays`
navigator.getVRDisplays().then(displays => {
  // 如果我们有一个原生 VRDisplay,或者如果 polyfill
  // 为我们提供了 CardboardVRDisplay,使用它
  if (displays.length) {
    vrDisplay = displays[0];
    controls = new THREE.VRControls(camera);
    vrDisplay.requestAnimationFrame(animate);
  } else {
    // 如果我们没有 VRDisplay,我们可能会打开
    // 桌面环境,因此请设置面向桌面的控件
    controls = new THREE.OrbitControls(camera);
    requestAnimationFrame(animate);
  }
});

目标

polyfill 的目标是提供一个库,以便开发人员创建 针对 WebVR API 的内容,而不用担心浏览器和设备 他们的用户在不断增长,但支离破碎 的世界中。

polyfill 的三个主要组成部分是:

  • 注入 WebVR 1.1 JavaScript 实现(如果不存在)
  • 修补了 API 不完整或不一致的浏览器
  • 如果 WebVR 不受支持,或者具有本地支持,请在移动设备上提供合成的 CardboardVRD 显示 但没有原生 VRDisplays 和 PROVIDE_MOBILE_VRDISPLAY 为 true(默认)。

效果

性能对于 VR 来说至关重要。如果你发现你的应用程序太慢, 考虑调整一些上述参数。特别是保持 BUFFER_SCALE 在0.5(默认值)可能会有很大帮助。

开发

如果你有兴趣在polyfill本身开发和贡献,你需要 安装了 npm 并熟悉下面的一些命令。完整列表的可用命令,请参阅 package.json 脚本。

$ git clone git@github.com:immersive-web/webvr-polyfill.git
$ cd webvr-polyfill/

# Install dependencies
$ npm install

# Build uncompressed JS file
$ npm run build

# Run tests
$ npm test

# Watch src/* directory and auto-rebuild on changes
$ npm watch

测试

现在,在配置和逻辑中有一些单元测试用于如何实现 polyfilled。 请务必在提交任何 PR 前进行测试,如果有新的测试,就可以得到奖励!

$ npm test

由于 polyfill 的性质,还必须在适当的情况下对您的更改进行测试。

发布新版本

仅限维护者,为了削减 npm 的新版本,请使用 [npm version] 命令。 preversion , version 和 postversion npm 脚本将运行测试,构建,添加构建文件和标签到git,推送到github,新的npm版本。

npm version <semverstring>

许可证

这个程序是商业和非商业用途的免费软件, 根据 Apache 2.0 许可证 分发。

主要指標

概覽
名稱與所有者immersive-web/webvr-polyfill
主編程語言JavaScript
編程語言JavaScript (語言數: 2)
平台Linux, Mac, Web browsers, Windows
許可證Apache License 2.0
所有者活动
創建於2015-01-30 19:23:46
推送於2021-01-15 09:13:05
最后一次提交2020-05-13 12:31:58
發布數64
最新版本名稱v0.10.12 (發布於 2020-05-13 12:31:58)
第一版名稱0.1.0 (發布於 )
用户参与
星數1.4k
關注者數134
派生數323
提交數552
已啟用問題?
問題數218
打開的問題數30
拉請求數104
打開的拉請求數0
關閉的拉請求數37
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?

WebVR Polyfill

Build Status
Build Status

A JavaScript implementation of the WebVR spec. This project ensures
your WebVR content works on any platform, whether or not the browser/device has
native WebVR support, or when there are inconsistencies in implementation.

Take a look at basic WebVR samples that use this polyfill.

Installing

Script

Download the build at build/webvr-polyfill.js and include it as a script tag,
or use a CDN. You can also use the minified file in the same location as webvr-polyfill.min.js.

  <script src='webvr-polyfill.js'></script>
  <!-- or use a link to a CDN -->
  <script src='https://cdn.jsdelivr.net/npm/webvr-polyfill@latest/build/webvr-polyfill.js'></script>

npm

If you're using a build tool like browserify or webpack, install it via npm.

$ npm install --save webvr-polyfill

Using

Instructions for using versions >=0.10.0. For <=0.9.x versions, see 0.9.40 tag.

The webvr-polyfill exposes a single constructor, WebVRPolyfill that takes an
object for configuration. See full configuration options at src/config.js.

Be sure to instantiate the polyfill before calling any of your VR code! The
polyfill needs to patch the API if it does not exist so your content code can
assume that the WebVR API will just work.

If using script tags, a WebVRPolyfill global constructor will exist.

var polyfill = new WebVRPolyfill();

In a modular ES6 world, import and instantiate the constructor similarly.

import WebVRPolyfill from 'webvr-polyfill';
const polyfill = new WebVRPolyfill();

Here's an example of querying displays and setting up controls based on
environment. Remember, you'll still need to provide controls and code
to support a desktop-like experience if no native VRDisplays are found,
as the CardboardVRDisplay is only on mobile. See the example.

// Polyfill always provides us with `navigator.getVRDisplays`
navigator.getVRDisplays().then(displays => {
  // If we have a native VRDisplay, or if the polyfill
  // provided us with a CardboardVRDisplay, use it
  if (displays.length) {
    vrDisplay = displays[0];
    controls = new THREE.VRControls(camera);
    vrDisplay.requestAnimationFrame(animate);
  } else {
    // If we don't have a VRDisplay, we're probably on
    // a desktop environment, so set up desktop-oriented controls
    controls = new THREE.OrbitControls(camera);
    requestAnimationFrame(animate);
  }
});

iframes

There are some concerns and caveats when embedding polyfilled WebVR content inside iframes. More information is documented in the cardboard-vr-display README.

Goals

The polyfill's goal is to provide a library so that developers can create
content targeting the WebVR API without worrying about what browsers and devices
their users have in a world of growing, but fragmented support.

The three main components of the polyfill are:

  • Injects a WebVR 1.1 JavaScript implementation if one does not exist
  • Patches browsers that have an incomplete or inconsistent implementation of the API
  • Provide a synthesized CardboardVRDisplay on mobile when WebVR is not supported, or if it does have native support but no native VRDisplays and PROVIDE_MOBILE_VRDISPLAY is true (default).

Performance

Performance is critical for VR. If you find your application is too sluggish,
consider tweaking some of the above parameters. In particular, keeping
BUFFER_SCALE at 0.5 (the default) will likely help a lot.

Developing

If you're interested in developing and contributing on the polyfill itself, you'll need to
have npm installed and familiarize yourself with some commands below. For full list
of commands available, see package.json scripts.

$ git clone git@github.com:immersive-web/webvr-polyfill.git
$ cd webvr-polyfill/

# Install dependencies
$ npm install

# Build uncompressed JS file
$ npm run build

# Run tests
$ npm test

# Watch src/* directory and auto-rebuild on changes
$ npm watch

Testing

Right now there are some unit tests in the configuration and logic for how things get polyfilled.
Be sure to run tests before submitting any PRs, and bonus points for having new tests!

$ npm test

Due to the nature of the polyfill, be also sure to test the examples with your changes where appropriate.

Releasing a new version

For maintainers only, to cut a new release for npm, use the [npm version] command. The preversion, version and postversion npm scripts will run tests, build, add built files and tag to git, push to github, and publish the new npm version.

npm version <semverstring>

License

This program is free software for both commercial and non-commercial use,
distributed under the Apache 2.0 License.