Web VR (Virtual Reality)

Due Date	@Jun 2, 2020

Introduction

A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

Getting Started

A-Frame

Web VR starts from AFrame. An introduction to it and it's uses are here...

360 degree Images

Resources

Here is a YouTube Playlist you shall find very useful.. Begins at scratch and is good Intro..

Here's another with a slightly updated version of Aframe

Objective: Virtual tour

The Objective of this assignment is to create a Virtual WebVR experience using A-Frame through which y'all will get to familiarize yourself with the basic functioning of A-Frame and learn to create photospheres, assigning controls to buttons, interaction with objects. The individual tasks will be - Stepwise, they would carry scores, and shall to the point 🎯... Don't tryna copy someone else's work..(we can easily figure out 😇).

Tasks

No CSoC week goes without an assignment. Here you go...

These individual tasks will be stepwise and will carry scores... Your knowledge of aframe will be the directly proportional to how many of them you can complete... The more the better for you..

Task 1 (Score it carries : 10)

Create a Skybox. Check for an equirectangular image that you can find from Flickr... Then create something like this : 360image... Add cursor and camera to it...

Task 2 (Score it carries : 40)

Linking 360 images: Creating the Virtual Tour Experience can be simple enough if you can link one 360 image with another to create something like this:

Here is the Video website.

VR | Created with VideoJS

https://yashrajbharti.github.io/netflix-and-chill/index.html

⚠️

A prerequisite for this is JavaScript. If you haven't completed that, jump back to Week 0, and learn basics of JS and keep the reference handy.

Hint: this can be done through javascript.

Task 3 (Score it carries : 30)

Adding hotspots. A hotspot it some sort of object i.e. <a-image> , <a-box> etc... through which you can interact. You may have seen interaction with objects for animation and might have tried too.. But for this specific task you have to create info boxes as shown (not exactly the same :p):

Visit the Video website here

VR | Created with VideoJS

https://yashrajbharti.github.io/videojs/index.html

You can use <a-text>, maybe use some <a-image> for the eye icon, use JS for playing with opacity... Best is to do the way you like! , just don't use simple HTML Tags (<div> <p>) as they don't show up on VR-Headset and also avoid CSS Styling other than the ones supported by A-Frame (read docs), use JS instead...

Task 4 (Score it carries : 20)

Show your skills. Just come up with what you have learnt and give final touches to this assignment... There's literally no restriction, you can add objects, create button, maybe introduce a videosphere!!!, make it as attractive as you can, you'll be judged on the basis of concept and not design. Just remember to add comments to show what extra you have done and it's functionality, push commits time to time and atleast after each task, preferably more..

That's it! Happy Aframing...

Submission

Fork and Clone this repo (link given below). Make all necessary changes in the repo (adding index.html etc). After the completion of the task, make pull request so we can review.