npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@amit.rajput/webvr-polyfill

v0.10.12

Published

Use WebVR today, on mobile or desktop, without requiring a special browser build.

Downloads

4

Readme

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 [email protected]: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.