Getting Started with Web VR

Introduction to WebVR

WebVR is an exciting technology that brings virtual reality (VR) experiences to the web, making them accessible to anyone with a compatible browser and/or VR headset. Unlike traditional VR applications that require specific software and hardware, WebVR leverages the power of the web to deliver immersive experiences directly through your browser.

With WebVR, developers can create interactive 3D environments, games, and simulations that users can explore in a fully immersive way. This technology opens up new possibilities for education, entertainment, and even remote collaboration, allowing people to experience virtual worlds without the need for complex setups.

One of the key advantages of WebVR is its cross-platform compatibility. Whether you're using a desktop computer, a smartphone, or a standalone VR headset, WebVR content can be accessed seamlessly, providing a consistent experience across different devices. Additionally, WebVR is built on web standards, ensuring that it can evolve alongside advancements in web technologies.

As WebVR continues to grow, it promises to democratize virtual reality, making it more accessible and integrated into our everyday digital experiences.

---

For this Lab we will be learning the basics of coding web VR.

We can combine multiple coding languages including HTML, CSS, JavaScript (three.js) and A-frame. As is true with a lot of coding, we won't need to write code directly, we will mostly be patching it together through cut/paste/edit techniques.

Here is your A-frame Bible: Introduction – A-Frame

Basically your user guide to all of the code and libraries.

Here is your staging area: Aframe

An open platform for you to learn, write, edit and test your code LIVE!

Here is a color code picker: 👍 Color Picker online | HEX Color Picker | HTML Color Picker

Hex color code can be used in Web VR coding.

---

Notes:

For Ad-ons and helpers in A-Frame use library:

<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"> </script>

For GIFs you need to use this library:

 <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"> </script>

consider using with:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"> </script>
or 
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"> </script>