{"_id":"@amit.rajput/cardboard-vr-display","name":"@amit.rajput/cardboard-vr-display","dist-tags":{"latest":"1.0.22"},"versions":{"1.0.22":{"name":"@amit.rajput/cardboard-vr-display","version":"1.0.22","homepage":"https://github.com/immersive-web/cardboard-vr-display","authors":["Boris Smus <boris@smus.com>","Brandon Jones <tojiro@gmail.com>","Jordan Santell <jordan@jsantell.com>"],"description":"A Cardboard VR implementation of a WebVR 1.1 VRDisplay for polyfilling the WebVR API","devDependencies":{"babel-core":"^6.26.3","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","rollup":"^0.50.0","rollup-plugin-babel":"^3.0.2","rollup-plugin-cleanup":"^1.0.1","rollup-plugin-commonjs":"^8.2.1","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.0"},"main":"dist/cardboard-vr-display","keywords":["vr","webvr"],"license":"Apache-2.0","publishConfig":{"access":"public"},"scripts":{"test":"echo \"No tests defined\"","build":"rollup -c","watch":"rollup -c -w","publish:version":"N=$(node -p \"require('./package.json').name\") && npm version patch && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/immersive-web/cardboard-vr-display.git"},"bugs":{"url":"https://github.com/immersive-web/cardboard-vr-display/issues"},"dependencies":{"gl-preserve-state":"^1.0.0","nosleep.js":"^0.7.0","webvr-polyfill-dpdb":"^1.0.17"},"gitHead":"8fc8b3e469795211061d9dbe9fc932bda1212334","_id":"@amit.rajput/cardboard-vr-display@1.0.22","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-L5F42yu7+KUs9uVjlDq1H4Qn9szBmMtaQw9RXXX9wD1j8IDmclmcJhr0fgWj7Mv4ERufEwritIoWuEDGR0NA4A==","shasum":"312a15e01978edfd8c8f66b4b6d6c6b15b153eaa","tarball":"https://registry.npmjs.org/@amit.rajput/cardboard-vr-display/-/cardboard-vr-display-1.0.22.tgz","fileCount":27,"unpackedSize":370631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDVoNKKqwfL1BfMt3OzuJew7mQsW09XjY0Viw/0ZPQ0AiAYKPPJ6CbxiEe99S+4h0IycjeRjBC+6CD0x9ALgzc7nQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinfAlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro2Q//aTjzio8H/T+MwfsBGhKoIj/hqVioBDHEXPJ/zWMkBGRwZ7FH\r\nkqxLW+zMoBX04xr5jkk6WGjgbeEzeFVLK3MDH1xbVrPBhR7sQb3RXNe0Xf0a\r\nMXdcyEHC/ikRGxPq9NQTX+lX+wdwaP6TcJnCZwW2aMcvDCEsRFvEHkHGh0xk\r\n+aE4bI7MLnCgWDJTnwKmnsbzem1x7eKygA7jSfUN9Ge34OUG0I2XGc/L2elM\r\n11yWdvuoaIvHq3WwID1T/pE0/w80wQlrjOVSxlK+L3s9Cp1DGhIpOFr7pBXW\r\nsfxAp3uE9PlXKFsmPagFDpGPA9TLn9BqZS8amJUxu+3EiCHhFzr++If94+Pd\r\nBLacJiLoQWSDw9BumXJqeysEay/ngmFEw1MeuAnUclALL5A4CDOQmbEXi/Lt\r\njeoFku/eGvjZ4YM3IbS85JfFxBlniYC4z/wnp9gWSf59jEmb/Slfk/AXIg7M\r\nLqkxZp25olLn3Bl+OWwbSZDed6saxatlcBcNDvj0p+Hk2xUvbCyEyNkdjzaY\r\nRA72sz1PSotM7txqOOUJH6meT1Cny8nbjGwfxGghej9J3MrovBxa1aNH1fnn\r\nyxMyjXv9/z0h6V7Rdh+d+L3gw1MFvI+z3AgCmRPWs/NCq/Y2xeFzruFRHnwK\r\nSrOd/cOw7qblMe/BLhDfpgVxCoJcQ/nVATo=\r\n=X7dG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"amit.rajput","email":"amitrajput123.ar@gmail.com"},"directories":{},"maintainers":[{"name":"amit.rajput","email":"amitrajput123.ar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cardboard-vr-display_1.0.22_1654517796879_0.8699242803775693"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-06T12:16:36.829Z","1.0.22":"2022-06-06T12:16:37.094Z","modified":"2022-06-06T12:16:37.319Z"},"maintainers":[{"name":"amit.rajput","email":"amitrajput123.ar@gmail.com"}],"description":"A Cardboard VR implementation of a WebVR 1.1 VRDisplay for polyfilling the WebVR API","homepage":"https://github.com/immersive-web/cardboard-vr-display","keywords":["vr","webvr"],"repository":{"type":"git","url":"git+https://github.com/immersive-web/cardboard-vr-display.git"},"bugs":{"url":"https://github.com/immersive-web/cardboard-vr-display/issues"},"license":"Apache-2.0","readme":"# cardboard-vr-display\n\n[![Build Status](http://img.shields.io/travis/immersive-web/cardboard-vr-display.svg?style=flat-square)](https://travis-ci.org/immersive-web/cardboard-vr-display)\n[![Build Status](http://img.shields.io/npm/v/cardboard-vr-display.svg?style=flat-square)](https://www.npmjs.org/package/cardboard-vr-display)\n\nA JavaScript implementation of a [WebVR 1.1 VRDisplay][VRDisplay]. This is the magic\nbehind rendering distorted stereoscopic views for browsers that do not support the [WebVR API]\nwith the [webvr-polyfill].\n\nUnless you're building a WebVR wrapper, you probably want to use [webvr-polyfill] directly\nrather than this. This component **does not** polyfill interfaces like `VRFrameData` and\n`navigator.getVRDisplays`, and up to the consumer, although trivial (see examples).\n\n## How It Works\n\nAs of [1.0.4](https://github.com/immersive-web/cardboard-vr-display/tree/v1.0.4), `CardboardVRDisplay` uses [RelativeOrientationSensor] for orientation tracking,\nfalling back to [DeviceMotionEvents] using [sensor fusion and pose prediction][fusion].\n[RelativeOrientationSensor] is a new API ([read more about the new Sensors on the web][sensors])\nfirst implemented in Chrome M63. This API uses the new [Feature Policy] specification which allows\ndevelopers to selectively enable or disable browser features.\n\nIt can also render in stereo mode, and includes mesh-based\nlens distortion. This display also includes user interface elements in VR mode\nto make the VR experience more intuitive, including:\n\n* A gear icon to select your VR viewer.\n* A back button to exit VR mode.\n* An interstitial which only appears in portrait orientation, requesting you switch\n  into landscape orientation (if [orientation lock][ol] is not available).\n\n### iframes\n\nBy default, main frames and same-origin iframes have access to Sensor APIs,\nbut cross-origin iframes must specify feature policy and allow `gyroscope` and\n`accelerometer` features. If your experience is attempting to use the native\n[WebXR Device API] in an iframe, you'll have to specify that feature as well ([WebXR's\nfeature name may change](https://github.com/immersive-web/webxr/issues/308)). All of these features require HTTPS to function, except for `localhost`, where HTTP is allowed.\n\n```html\n<iframe src=\"https://otherdomain.com\" allow=\"gyroscope; accelerometer; xr\"></iframe>\n```\n\nWhile `devicemotion` is a fallback for Sensors, eventually `devicemotion` will be behind the same\nFeature Policy as Sensors and it is encouraged to adhere to these policies in the meantime.\nIf the Feature Policy for Sensors is denied, `CardboardVRDisplay` will **not** always attempt\nto fall back to `devicemotion`. Using Feature Policies now will guarantee a more future-proof experience.\n\n#### Caveats\n\n* On iOS, cross-origin iframes do not have access to the `devicemotion` events.\n  The `CardboardVRDisplay` however does respond to events passed in from a parent\n  frame via `postMessage`. See the [iframe example][iframe-example] to see how\n  the events must be formatted.\n* Chrome M63 supports Sensors, although not the corresponding Feature Policy [until Chrome M65][sensors-main-frame].\n  This results in Chrome M63/M64 only supporting Sensors in main frames, and these browsers\n  will fall back to using devicemotion if in iframes.\n* Using Sensors in a cross-origin iframe [requires the frame to be in focus](https://www.w3.org/TR/generic-sensor/#focused-area). In builds of Chrome prior to M69, this logic is [erroneously reversed](https://bugs.chromium.org/p/chromium/issues/detail?id=849501). If loading content via cross-origin iframe, you can disable Sensors, triggering the `devicemotion` fallback with this [hacky workaround](https://github.com/immersive-web/cardboard-vr-display/blob/c196e15a8c7ccf594fe6a5044fbdcb51cc2eff91/examples/index.html#L117-L124). More info in [#27](https://github.com/immersive-web/cardboard-vr-display/issues/27).\n\n### Magic Window\n\nIt is possible to have a magic window using a VRDisplay that isn't 100% width/height of the window, and can jump into fullscreen WebVR. See the [magic window][magicwindow-example] for usage.\n\n## Installation\n\n```\n$ npm install --save cardboard-vr-display\n```\n\n## Browser Support\n\nShould support most modern browsers (IE11 is missing a few, for example) and requires [ES5](https://kangax.github.io/compat-table/es5/) JavaScript support. If you want to support a non-ES5 browser, or browser lacking some DOM globals, you must use a transformation or provide polyfills to support older environments.\n\nGlobals required:\n\n* [`Promise`](https://caniuse.com/#feat=promises)\n* [`CustomEvent`](https://caniuse.com/#feat=customevent)\n* [`requestAnimationFrame`](https://caniuse.com/#feat=requestanimationframe)\n\nAdditionally, WebGL support, [`devicemotion`](https://caniuse.com/#feat=deviceorientation) events, and common browser globals (`window`, `navigator`, `document`) are also required in the environment.\n\n## Usage\n\n`cardboard-vr-display` exposes a constructor for a `CardboardVRDisplay` that takes\na single options configuration, detailed below. Check out [running the demo](#running-the-demo)\nto try the different options.\n\n```js\nimport CardboardVRDisplay from 'cardboard-vr-display';\n\n// Default options\nconst options = {\n  // Optionally inject custom Viewer parameters as an option. Each item\n  // in the array must be an object with the following properties; here is\n  // an example of the built in CardboardV2 viewer:\n  //\n  // {\n  //   id: 'CardboardV2',\n  //   label: 'Cardboard I/O 2015',\n  //   fov: 60,\n  //   interLensDistance: 0.064,\n  //   baselineLensDistance: 0.035,\n  //   screenLensDistance: 0.039,\n  //   distortionCoefficients: [0.34, 0.55],\n  //   inverseCoefficients: [-0.33836704, -0.18162185, 0.862655, -1.2462051,\n  //     1.0560602, -0.58208317, 0.21609078, -0.05444823, 0.009177956,\n  //     -9.904169E-4, 6.183535E-5, -1.6981803E-6]\n  // }\n  // Added in 1.0.12.\n  ADDITIONAL_VIEWERS: [],\n\n  // Select the viewer by ID. If unspecified, defaults to 'CardboardV1'.\n  // Added in 1.0.12.\n  DEFAULT_VIEWER: '',\n\n  // By default, on mobile, a wakelock is necessary to prevent the device's screen\n  // from turning off without user input. Disable if you're keeping the screen awake through\n  // other means on mobile. A wakelock is never used on desktop.\n  // Added in 1.0.3.\n  MOBILE_WAKE_LOCK: true,\n\n  // Whether or not CardboardVRDisplay is in debug mode. Logs extra\n  // messages. Added in 1.0.2.\n  DEBUG: false,\n\n  // The URL to JSON of DPDB information. By default, uses the data\n  // from https://github.com/WebVRRocks/webvr-polyfill-dpdb; if left\n  // falsy, then no attempt is made.\n  // Added in 1.0.1\n  DPDB_URL: 'https://dpdb.webvr.rocks/dpdb.json',\n\n  // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.\n  K_FILTER: 0.98,\n\n  // How far into the future to predict during fast motion (in seconds).\n  PREDICTION_TIME_S: 0.040,\n\n  // Flag to disabled the UI in VR Mode.\n  CARDBOARD_UI_DISABLED: false,\n\n  // Flag to disable the instructions to rotate your device.\n  ROTATE_INSTRUCTIONS_DISABLED: false,\n\n  // Enable yaw panning only, disabling roll and pitch. This can be useful\n  // for panoramas with nothing interesting above or below.\n  YAW_ONLY: false,\n\n  // Scales the recommended buffer size reported by WebVR, which can improve\n  // performance.\n  // UPDATE(2016-05-03): Setting this to 0.5 by default since 1.0 does not\n  // perform well on many mobile devices.\n  BUFFER_SCALE: 0.5,\n\n  // Allow VRDisplay.submitFrame to change gl bindings, which is more\n  // efficient if the application code will re-bind its resources on the\n  // next frame anyway. This has been seen to cause rendering glitches with\n  // THREE.js.\n  // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,\n  // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,\n  // and gl.TEXTURE_BINDING_2D for texture unit 0.\n  DIRTY_SUBMIT_FRAME_BINDINGS: false,\n};\n\nconst display = new CardboardVRDisplay(options);\n\nfunction MockVRFrameData () {\n  this.leftViewMatrix = new Float32Array(16);\n  this.rightViewMatrix = new Float32Array(16);\n  this.leftProjectionMatrix = new Float32Array(16);\n  this.rightProjectionMatrix = new Float32Array(16);\n  this.pose = null;\n};\n\nconst frame = new (window.VRFrameData || MockVRFrameData)();\n\ndisplay.isConnected; // true\ndisplay.getFrameData(frame);\n\nframe.rightViewMatrix; // Float32Array\nframe.pose; // { orientation, position }\n```\n\n## Development\n\n* `npm install`: installs the dependencies.\n* `npm run build`: builds the distributable.\n* `npm run watch`: watches `src/` for changes and rebuilds on change.\n\n### Releasing a new version\n\nFor 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.\n\n`npm version <semverstring>`\n\n## Running The Demo\n\nView the [example] to see a demo running the CardboardVRDisplay. This executes\na minimal WebVR 1.1 polyfill and parses query params to inject configuration parameters.\nView some premade links at [index.html]. For example, to set the buffer scale to 1.0\nand limit rotation to yaw, go to [https://immersive-web.github.io/cardboard-vr-display/examples/index.html?YAW_ONLY=true&BUFFER_SCALE=1.0].\nView all config options at `src/options.js`.\n\n## License\n\nThis program is free software for both commercial and non-commercial use,\ndistributed under the [Apache 2.0 License](LICENSE).\n\n[VRDisplay]: https://immersive-web.github.io/webvr/spec/1.1/#interface-vrdisplay\n[WebVR API]: https://immersive-web.github.io/webvr/spec/1.1/\n[WebXR Device API]: https://immersive-web.github.io/webxr/spec/latest/\n[webvr-polyfill]: https://github.com/immersive-web/webvr-polyfill\n[example]: https://immersive-web.github.io/cardboard-vr-display/examples\n[iframe-example]: examples/iframe.html\n[magicwindow-example]: examples/magicwindow.html\n[index.html]: https://immersive-web.github.io/cardboard-vr-display\n[fusion]: http://smus.com/sensor-fusion-prediction-webvr/\n[ol]: https://www.w3.org/TR/screen-orientation/\n[sensors]: https://developers.google.com/web/updates/2017/09/sensors-for-the-web\n[DeviceMotionEvents]: https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent\n[RelativeOrientationSensor]: https://www.w3.org/TR/orientation-sensor/#relativeorientationsensor-model\n[Feature Policy]: https://wicg.github.io/feature-policy/\n[sensors-main-frame]: https://developers.google.com/web/updates/2017/09/sensors-for-the-web#feature_policy_integration\n","readmeFilename":"README.md"}