A Virtual Reality Web Video Player
When embedded in an HTML page, Veri will set up a WebGL canvas and a THREE.js WebVR environment which renders a VR video. It can play stereoscopic videos (side-by-side and top-to-bottom) as well as monoscopic videos.
To view the video you will need a browser which supports WebVR. For HTC Vive this means you will need to download a special build of Chromium. For Oculus Rift you will need a WebVR version of Mozilla, and on Samsung Gear you can use the Samsung Internet browser. See WebVR Info for more information on that.
For a regular PC or Mac with no headset attached, you can still view 360 videos, or add the WebVR API Emulation extension which shows you what would be seen on the headset.
For more information see the veri Home Page
For basic usage, you must include the veri library and a video element:
Then you setup the VR options and start playing:
var veri = ;veri;veristart;
For True VR
True VR experiences require a VR headset, such as HTC Vive, Oculus Rift, or Samsung Gear. This implies two camera perspectives will be rendered. The implementation is based on WebVR and Three.js.
Full Functionality List
The VR plugin supports the following:
- setup a THREE js canvas
- setup a scene: camera, lighting, walls
- setup VR (requires VR hardware)
- setup stereoscopic VR, which provides depth
- side-by-side frames supported
- top-to-bottom frames supported
- setup a monoscopic 360 video
- crosshairs - a small object at the center of the field of vision for pointing to targets in the VR scene
- default circle animation
- supports sprite animation
- buttons can be animations
- the crosshairs can be animated
- setup interaction objects using an overlay. Objects are 3D objects and their textures, provided in OBJ file format.
- overlay fixed in the camera's reference frame
- overlay fixed in the video's reference frame
- interaction handling
- device-driven movement (rotation of mobile device, movement of headset)
- panning with mouse drag for 360 video
- zoom in/out with mouse wheel for 360 video
- limit interaction space to avoid overlap with control bar on top and bottom
- keyboard control
- RayCasting - detect which object was clicked in the scene
- audio implemented by jsAmbisonics
- positional audio sources
- ambisonic audio sources
- general event emitter functionality
The following are not yet supported:
- iPhone 360 video
- debugging helpers
- show axis
- show fps
Complete annotated list of configuration options
click - emitted when the user clicked on an object.
frame - emitted on every frame, it contains a Vector3 which reflects the
camera direction. For example, you can use this to check if the viewer
is currently looking at a specific angle range.
Sample code to check angle:
ready - emitted when the 3D scene is built.
targetEnter - crosshairs have entered a named target.
targetExit - crosshairs have exited a named target.
targetStay - crosshairs are still inside a named target.
targetSelected - crosshairs have stayed inside a named target enough time so that the target is now selected ("clicked").