VR in 2d canvas in the browser

This demo allows you to run a simple raycaster demo in VR mode in your browser. Load it on your phone and put it in a phone VR holder for effect. This is NOT "webVR".

Blog post demo: pvdz.ee/weblog/347. Blog post raycasting: pvdz.ee/weblog/346.

The demo has not been super battle tested so it may not work. It needs webgl if you want barrel distortion, but should work fine without.

It supports the mouse lock API on desktop. Click to lock, click again to unlock.

It does have tentative gamepad support, but this also hasn't been thoroughly battle tested. The project is not minified, learn from it. It's not optimized, at all, that wasn't part of the project goal.

Okay, I think that was sufficient warning. Let's go to the demo now!

Controls are at the bottom of this page!

Short link for the demo url is https://js.gd/32j

© pvdz.ee, March 2015



On the gamepad I've tested with Samsung's gearvr gamepad, which has an analogue "stick" (top-left and bottom-right), a more classic arrow keys ("stick"), four buttons (1234 or ABXY), ONE set of LR keys, a start select and special button. This demo maps them statically to certain actions, together with keyboard keys, which may also depend on the selected menu item if any. I'll refer to the gamepad as arrow buttons, analogue sticks, ABXY (bottom, right, left, top), and LR.

Gamepad: up-down, keyboard: w-s: move forward and backward

Gamepad: left-right, keyboard: a-d: strafe

Gamepad: analogue sideways (both), keyboard: left-right arrow keys: change heading (direction in which you are looking)

Gamepad: analogue up-down (left one), keyboard: q-e: adjust distance of camera to nose (both eyes)

Gamepad: analogue up-down (right one), keyboard: up-down arrow: adjust focal focus point (angle each camera makes)

Gamepad: A, keyboard: y key: toggle gamepad visual input debugging

Gamepad: B, keyboard: none: ignore orientation API (while enabled heading is only adjusted by manual input, not by device metrics)

Gamepad: X, keyboard: t key: cycle through which texture to use

Gamepad: Y, keyboard: m key: toggle mini map

Gamepad: start, keyboard: space: toggle menu on/off at current item

Gamepad: select, keyboard: f5: refresh page

Gamepad: L-R, keyboard: []: cycle through active menu items

While any menu item is selected, movement input is disabled. This is what the inputs do:

FOV: Gamepad: left-right, keyboard: left-right: adjust FOV

FOV: Gamepad: up-down, keyboard: up-down: toggle barrel distortion effect on/off

Cover: Gamepad: left-right, keyboard: left-right: adjust size of a cover, you can use this to see just how much of the screen you can actually see through your lenses. Use this to adjust other parameters accordingly.

Cover: Gamepad: up-down, keyboard: up-down: cycle between cover modes: none, filled circle, cut-out circle. This sometimes doesn't work properly, not sure why.

Grid: Gamepad: left-right, keyboard: left-right: adjust size of grid cells/radius

Grid: Gamepad: up-down, keyboard: up-down: cycle between distorted square grid, undistorted square grid, mixed distorted and undistorted left right, and same for circle "grid". Distorted means the barrel distortion is also applied to the grid. The mixed mode means one camera gets the distortion and the other one not at all.

Grid: Gamepad: analogue up-down (right), keyboard: w-s: toggle rendering rays as trapezoids or as rectangles. Trapezoids is slower but much smoother lines top/bottom of a wall.

HMD: Gamepad: up-down, keyboard: up-down: change presets for type of HMD. Mainly configured for my own wooden HMD or use all available size. Was mostly wip.

Info: the rest below is for info menu item...

Gamepad: left-right-up-down, keyboard: left-right-up-down: change width/height of each camear. Not sure what's up with keyboard-right here, whatever

Gamepad: analogue left, keyboard: wasd: offset of each camera

Gamepad: analogue up-down (right), keyboard: q-e: distance between cameras

Gamepad: analogue left-right (right), keyboard: z-x: barrel distortion strength