Canvas Components, Controls and more!
ZIM VR has launched at http://zimjs.com/vr.html a scroll-parallax mini-site that pays homage to Magic Leap. The site was made in two days by Inventor Dan Zen. Dr. Abstract and Pragma animations are by Antonio Caggiano.
The ZIM VR() class lets developers and designers easily make side-by-side VR for headsets like Google Cardboard, Samsung Gear VR, and any number of cheap headsets for your mobile device. We use a $24 Utopia VR headset and it is fine!
Here is a working demonstration made for VR helmets. On a computer you can swipe the content to emulate head movement. On mobile, you turn your head and the images move accordingly. This should work on most mobile devices.
The circles shoot out at you in 3D. As you turn your head, there is slight parallax and the images move. There are arrows at the edge of the content to indicate no more content. If you turn past these, the screen turns yellow
You create content for the left “channel” and give the objects a depth. Then pass the content in to ZIM VR() and it will copy the content to the right channel and shift the left and right channel according to the depths so that the viewer sees in 3D. You can specify angle of movement as well as parallax.
Check out our Bubbling Video on ZIM VR on the YouTube ZIM Learn channel.
Here is an excerpt from the ZIM VR Docs:
// Prepare content inside one container var content = new Container(stageW/2, stageH); // This background tile has no depth or is at "screen" depth // There will be no depth shift and no parallax new Tile(new Rectangle(10,10,frame.light), 20, 1, null, 10).center(content); // These rectangles are given depth using the dep() method - or set the depth property // The rectangles will be shifted in the x by VR // centerReg the objects for proper parallax var box = new Rectangle(50,50,frame.green).centerReg(content).dep(10); new Rectangle(70,70,frame.clear,frame.blue,5).centerReg(content).dep(12); // 1. this just shows content in 3D with no motion: // var vr = new VR(content).addTo(stage); // 2. this will move when the head is turned (device is rotated) but with no parallax: // var vr = new VR(content, 160, 400).center(stage); // 3. this shows parallax when the head is turned but with no positional movement: // var vr = new VR(content, 0, 400, 2, 60).center(stage); // 4. this shows motion and parallax as the head is turned: var vr = new VR(content, 160, 400, 2, 60).center(stage);
The ZIM site features the following sections: