Card image

VR Lounge

Enter the Oasis

Space

ER-2 Sonic Flight

Orion Nebula

Cassini Finale

Nature

Bahamas Diving

Angel Falls

Lions 360

Random

Arthur C. Clarke

I Saw the Future

Heli/Snowboard Ride

PacMan

A Note on Content

None of this VR content was created by me. It was sourced from various YouTube 360 channels, and NASA's JPL VR Library strictly for educational purposes.

Impatience

I love VR and am currently learning Unity in order to develop for the upcoming Oculus Quest. It's safe to say I'm on the hype-train for the upcoming GDC & F8 conferences. In the meantime, I really wanted a taste of some VR experiences and found the solution in Google Cardboard (or in this case, a Merge headset filling the same purpose).

There are many browser based VR viewing services now such as YouTube VR, and Vimeo's in browser viewer. I decided to try my hand at this myself using A-Frame! Don't underestimate A-Frame and it's underlying three.js though, as this web-app is about as simple as they come. You can build complex games and applications using this powerful library.

See what I mean?

From the Docs

Description

A-Frame is a web framework for building virtual reality (VR) experiences. A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js.

Originally conceived within Mozilla and now maintained by the co-creators of A-Frame within Supermedium, A-Frame was developed to be an easy yet powerful way to develop VR content. As an independent open source project, A-Frame has grown to be one of the largest VR communities.

A-Frame supports most VR headsets such as Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go, and can even be used for augmented reality. Although A-Frame supports the whole spectrum, A-Frame aims to define fully immersive interactive VR experiences that go beyond basic 360° content, making full use of positional tracking and controllers.

Features

VR Made Simple: Just drop in a <script> tag and <a-scene>. A-Frame will handle 3D boilerplate, VR setup, and default controls. Nothing to install, no build steps.
Declarative HTML: HTML is easy to read, understand, and copy-and-paste. Being based on top of HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, artists, designers, educators, makers, kids.
Entity-Component Architecture: A-Frame is a powerful three.js framework, providing a declarative, composable, reusable entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
Cross-Platform VR: Build VR applications for Vive, Rift, Windows Mixed Reality, Daydream, GearVR, and Cardboard with support for all respective controllers. Don’t have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.
Performance: A-Frame is optimized from the ground up for WebVR. While A-Frame uses the DOM, its elements don’t touch the browser layout engine. 3D object updates are all done in memory with little garbage and overhead. The most interactive and large scale WebVR applications have been done in A-Frame running smoothly at 90fps.
Visual Inspector: A-Frame provides a handy built-in visual 3D inspector. Open up any A-Frame scene, hit <ctrl> + <alt> + i, and fly around to peek under the hood!
Components: Hit the ground running with A-Frame’s core components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, text, and controls for most major headsets. Get even further from the hundreds of community components including environment, state, particle systems, physics, multiuser, oceans, teleportation, super hands, and augmented reality.
Proven and Scalable: A-Frame has been used by companies such as Google, Disney, Samsung, Toyota, Ford, Chevrolet, Amnesty International, CERN, NPR, Al Jazeera, The Washington Post, NASA. Companies such as Google, Microsoft, Oculus, and Samsung have made contributions to A-Frame.

© Skyler Reep 2019