Drag the mouse to look around with your head and use the arrow keys to move. Holding Shift will allow you to move sideways and up. If you have a supported gamepad and your browser and system support the HTML5 Gamepad API, then you can use the 2 joysticks and shoulder buttons to move around. Note that the Gamepad API is not well supported across different configurations so you should use that page to check your gamepad setup. You might also need to push a button the gamepad before the joysticks work.

If you have the appropriate build of Chrome or Firefox, then the Rift's head tracking should work automatically. Both the DK1 and DK2 should work in extended mode with this demo. The 3D view is 1280x720 by default, but if the page is reloaded after the browser is full screen on the DK2 (drag the window to the second screen and use F11), then a 1080p view will be used.

To play video use the file chooser to select a local file. It is not normally possible to play a file on the web due to cross-origin data protection, but if you have a server with CORS enabled, then you can bring up a developer console and hack in a URL by setting videoplayer.video.src = THEURL. The types of video file that can be played depends on the codecs supported by the browser. Stable Chrome, Nightly Chrome, and Nightly Firefox support different types of video. You can test the file types that your browser supports using this demo

Once the video is loaded, press [c] to hide the floating console and FPS display. Move the browser window to the Rift's screen and make it fullscreen (normally F11) for the best experience. [p] will play/pause the video. [m] will mute. [v] will toggle between mono and stereo rendering. [g] will hide the grid. [1][2][3][4][5][6][7][8] will jump -10m/-1m/-10s/-1s/+1s/+10s/+1m/+10m in the video.

You can also toggle a debug screen using the [`] (backtick) key. This will act as a Javascript REPL that lets you modify live data.[~] will bring up the same debug screen but in a 2D mode.

This demo uses three.js plus a custom camera and render-to-texture to create an environment targeting the Oculus Rift. The important code is in rift.js and is primarily a custom class called RiftCamera. The REPL dialog is generated by rendering HTML to canvas and then rendering the canvas in WebGL.

Pro-tip: if the FPS meter is stuck at exactly 60fps, you will experience judder on the DK2. Disable vsync in the browser to avoid this.

Created by sxp.
Email: sigmaxipi@gmail.com