Design for Another World

Group size: Teams of 3-4
Design Sprint Starts: Tuesday, March 19, in class.
Design Sprint Ends (+): Tuesday, April 2: in class; design document end of day.

Overview

In this design sprint, we will be exploring virtual reality to consider what it will be like when computation can transport us to another place. Transport someone to a real location, inside a game, among abstract art… whatever you think would be interesting, immersive, and compelling!

That’s it. Keep in mind that the lack of parameters in this project does not mean that the your project should not be appropriately scoped. It is your job to define the parameters of your project. You pick your objective, you decide how to design for it, you decide what to build. Be sure that you communicate all of these assumptions in your blog post.

A couple of quick pointers before you start:

Be sure to articulate your design goal EARLY. Without an objective for your design, much of your process will be unguided. When I look at your output, I will consider them within the context of your design goal. If your goal is to provide a sense of awe or provoke reflection or make someone feel like they are truly in another physical place… any of that is fine. The key is that you articulate your goal and make design decisions that align with that objective. The execution of your project will be evaluated against those goals.
Consider what will make your design feel immersive. This is your primary challenge, and it’s worth thinking beyond visual channels. How could audio enhance your design?
Careful with interaction. Because of time and hardware limitations (you’ll likely be using A-Frame or Unity + Google cardboard or a comparable VR viewer), consider what input mechanisms you may even have available to you before getting too deep into the development. If you have experience with it or want to dive in, you may prefer to use Unity, although A-Frame can be a bit easier to learn.
Design ambitiously. Learning to develop with new technologies is hard -- but rapid prototyping for design is important, so try your best. All of these cautions aside, the TAs and I would much rather see a buggy implementation of an ambitious design than a fully operational implementation of a "safe" design. Take chances, and if the implementation doesn't work out, that's ok.

Technology

VR Viewers: I've purchased several VR Shinecon viewers (equivalent to e.g., Google Cardboard). If you haven't used this before, you essentially can insert your phone into a low-cost VR viewer. It uses a binocular viewing port (two separate lenses) that can simulate depth in a virtual scene. Strapped to your face, the viewer uses your phone's gyroscope to track your movements and allow you to move around a scene. To use it, visit your VR scene in the web browser on your phone, then insert your phone in the viewer. Check out some of the apps that have been developed for Google Cardboard for some ideas of what is possible.

Unity: Unity is a development platform and game engine for AR and VR. It relies primarily on coding in C#. Find resources on the web to get started.

A-Frame: A-Frame is a simple, web-based design platform that uses HTML to create VR scenes. In addition, a companion website - Glitch - provides a fantastic web-based development environment that will allow you to see your code + output simultaneously. Although the building blocks of A-Frame are basic, don’t underestimate its powerful potential. This is a good option if you prefer a "coding-lite" approach. Before you start, check out all of the interesting work people in the A-Frame community are up to. You need not use A-Frame. If your group is familiar with an alternative (Unity, etc), feel free to use that instead.

Deliverables

As always: Your group's design reflection as a Medium blog post. You WILL need a demo video.
Your VR experience should be publicly accessible so that others can visit it. Include this link in your design doc. It’s fine if this is a link from Glitch (which is probably the easiest place to develop your work).
Post the link of each Medium post along with the names of your group members on our Slack channel for #group_design_projects and one group member should submit the link on Canvas.

Grading:
- Grading will be based on the design rubric.
- Be sure to complete the peer feedback forms linked at the end of the design document guide, which will be a large part of your grade.

Some Technical Hints: Using A-Frame

Should you choose to use A-Frame, here are some tips compiled from semesters past. A word of caution: it looks like they just had an update recently after a couple of quiet COVID-years. I haven't used this latest version!

There are a number of resources to get you up to speed - A-Frame school, which links to a Slack channel, and there are of course various other tutorials blog posts if you simply Google A-Frame.

A helpful Youtube playlist on the basics of A-Frame
A-Frame documentation on 3D models
A curated collection of A-Frame components, so you don't need to code everything from scratch
A cool speech command component to make your VR experience more immersive

A final word of caution: You may want to avoid rendering a lot of animated 3D avatars into A-Frame because the more assets imported, the laggier the experience.

Here are some additional tips from Gary Song (Spring 2023).

Getting Familiar with A-Frame

Some tips from Gabbi LaBorwit (Bucknell ‘20)

Take a few minutes to play with the examples provided on A-Frame’s home page.
Once you’ve looked around, go to the first example called “Hello WebVR” and click “Visual Inspector” in the top right-hand corner. Two boxes should pop up containing the source code and each HTML element’s properties.
In the leftmost box outlining the source code, click the third line that reads <a-box...>. Now the rightmost box shows the blue cube’s design properties. Edit the position field and hit enter to see how it affects the scene. Play with the other elements/properties as well to get a feel for the code.

Remixing A-Frame on Glitch

Read the first half of the “Getting Started” instructions and click the link provided to remix the starter example. When a box appears with 3 options, select “Remix your own” and sign in to your Github account from the button in the top-right corner.
Back on the Glitch web-editor go to index.html and click “Preview” in the bottom row of buttons to view what you have so far. Now go back and “remix” the code to make it your own.
- Note: There’s no need to constantly refresh the page, it automatically updates itself and saves the code in the Preview.
In the top-left corner click the drop-down menu with your glitch username and select “Remix This”. Replace the code in index.html with the following basic template:

											
											<html>
												<head>
													<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
												</head>
												<body>
													<a-scene>
														<!-- Your code here -->
													</a-scene>
												</body>
											</html>

Some tips

You can use this tutorial to build a basic scene and go from there, too.
Scroll down the left-sidebar on the documentation page to find a bunch of tutorials for animations, sound, and more.
Some cool animations to play with.
To take your own 360º picture, download the free app on an iPhone called “360 Panorama” by Occipital, Inc (or any other comparable 360º photo app) and send yourself the photo to get it on your computer.
Interacting with objects: If you want to be able to click on objects or do things when you look at an object, look at this tutorial on youtube as well as the code that comes with it.