https://github.com/schickling/three-vr
Device controls and render steps for mobile virtual reality applications
https://github.com/schickling/three-vr
Last synced: over 1 year ago
JSON representation
Device controls and render steps for mobile virtual reality applications
- Host: GitHub
- URL: https://github.com/schickling/three-vr
- Owner: schickling
- License: mit
- Created: 2014-09-24T19:59:57.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-10-10T09:34:15.000Z (almost 12 years ago)
- Last Synced: 2024-04-14T12:01:34.596Z (over 2 years ago)
- Language: JavaScript
- Size: 902 KB
- Stars: 30
- Watchers: 7
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
three-vr [](https://www.npmjs.org/package/gulp-webserver)
===========
Device controls and render steps for mobile virtual reality applications
## Installation
Note: [three.js](https://github.com/mrdoob/three.js) has to be installed as well.
```sh
$ npm install three-vr
```
## Usage
Can be loaded with [Browserify](http://browserify.org), RequireJS as `three-vr` or simply included via `` tag and accessed via global variable `THREE.VR`.
```js
// load three-vr extension
var threevr = require('three-vr');
// init rendering
threevr.init({
renderer: renderer,
camera: camera,
scene: scene
});
// attach to your animation loop
function animate() {
requestAnimationFrame(animate);
threevr.animate();
}
```
## API
### `init(options)`
Initializes the extention. Pass the options below.
##### `options.renderer` (required)
Specify your application's renderer.
##### `options.camera` (required)
Specify your application's camera.
##### `options.scene` (required)
Specify your application's scene.
### `animate()`
Updates the renderer. Should be called within your animation loop.
## How it works
three-vr takes the original `camera` and creates a [stereoscopic](http://en.wikipedia.org/wiki/Stereoscopy) effect by using two separated cameras. Each image is then rendered with a [Barrel Distrotion](http://en.wikipedia.org/wiki/Distortion_(optics)).
Each camera has a slightly different position and thus a different perspective. The Barrel distrotion is implemented via a WebGL fragment shader which runs in parallel on the GPU.
## Development
### Build library
```sh
$ make build
```
### Run demo application
```sh
$ npm start # builds demo
$ python -m SimpleHTTPServer # starts webserver
```
Open `localhost:8000/demo` in your browser.
## Authors
* Johannes Schickling - [Github](https://github.com/schickling) - [Twitter](https://twitter.com/_schickling)
* Tim Suchanek - [Github](https://github.com/timsuchanek) - [Twitter](https://twitter.com/timsuchanek)
## License
[MIT License](http://opensource.org/licenses/MIT)