Project 1: webVR skills

Creating interactive 3D Virtual Reality websites in HTML with A-Frame.io


Relevant Implications

2.4 Adv. Skills & Techniques

Tasksheet & Assessment Schedule

What is Virtual Reality?

Class Notes and Examples of Tasks

What is Virtual Reality?

You have all seen high resolution CGI (computer generated images) in films' VFX (Visual Effects) in movies such as 'Ready Player One'. These typically use massive render farms of computer power to create amazing high quality 'eye candy'. animations They take years to develop. We just can't do this at high school.

You will also have played immersive PC & console games which have been developed over 1000s of developer hours by teams of designers and involve complex programming to run on your games console's 3D graphics cards. So ,this too is too ambitious! So, Let's think?

So, we don't have millions of dollars of budget or expensive hardware, so how can we do VR?

Well, you can use 3D software like Blender & Unity3D to make content for the HTC Vive / Occulus Rift / Samsung Gear VR / Playstation VR. But that stuff is hard (how can I learn all that in a few weeks?!?!? AND IF I wanted to program I'd be doing Comp Sci!!!), all that rendering needs powerful 3D graphics cards in a high-end laptop to run and render on-the-fly. And that kit is expensive. Got a spare $5G gee?

Since we don't yet have a class set of HTC Vive kits to test on (but we will get to play on some!!!), and not everyone has a fancy new phone ARCore compatible phone, what can we do for less than $10?

Let's make VR with Google Cardboard & your smartphone!

But if it's on my phone how will it render that Weta/Hollywood life-like CGI? It won't. Not yet, for now let's think 'old skool' 8-bit Pixel Art stylee and using cutting edge webVR with A-Frame.io. WebVR renders on-the-fly using your phone's graphics / CPU.

So, what can it do? 3D Animation?

Visit this link on your smartphone, tap the Cardboard logo and put your phone in VR viewer.

http://t3dw.co.uk/webgl/aframe-test-1.html


A-Frame.io is a web framework for building webVR using just HTML!

Explore A-Frame examples:

Level 2 - Use Advanced Techniques

  1. A-Frame School - An Interactive Course for WebVR: https://aframe.io/aframe-school/#/

  2. Introduction to A-Frame.io & WebVR documentation: https://aframe.io/docs/0.8.0/introduction/

  3. Use Glitch & GitHub - a place to make & share: https://glitch.com/

  4. Create 3D Voxels

  5. A-Frame Blog - Latest Info: https://blog.mozvr.com/aframe-v0-3-0/

  6. We need to relate what we make back to the purpose of the brief, the target audience and to their Relevant Implications.

Iteration

You should build your project up in stages, start simply, get it working and then add layers, testing as you go.

Testing

In addition to normal screenshots of your on-going iterative testing in your Progress Log, think of other efficient tools. You can record your testing of your webVR using video screen casting software such as Chrome plugin ScreenCastify

You can also use your phone to record feedback from user testing of the webVR in Google Cardboard.

OK, so what's next? Get A-Frame skills >

NEXT: Let's Learn some A-Frame Skills

Hardware Review