Page 1

1

Hello class. In this voice-over-slides video, I will present details about how to create a simple virtual reality walking tour using 360° images and a Javascriptlibrary I’ve been writing on top of a VR platform called A-Frame.

You’ll be hosting your walk in your TerpConnect webspace. If all goes well, I’ll be able to merge your walks to create a single experience of walking from the Route 1 entrance, up past McKeldin library and then over to Hornbake.

When I assign you your three spots, you’ll be adding a few information billboards to each scene, as well as a teleport from the first to the second, from the second back to the first and ahead to the third, and from the third back to the second.

You might want to review this whole slide video before starting the homework or you might want to watch the video and try things as you go. Either way, I expect that you will want to have the PDF version of this lesson open while you are working on the homework assignment. In general, you should use whatever approach you think will work best for you.

Page 2

This slide presents the high-level overview of what you will be doing to create your part of the tour. You might want to pause to read through it.

The rest of this set will go into details of how to do each of these.

Page 3

To get you started, I’ve put a zip file up that has an example mini-tour of three spots around Lake Artemesia. Start by unzipping that file to a folder on your computer, uploading that folder to your TerpConnect space, and visiting it in a web browser just to get a feel of what a walk could look like.

You’ll create your campus mini-tour by putting three campus spot photos into your TerpConnect space and then replacing my Javascript instructions in the index.htmlwith your own instructions to add billboards and teleport between your three spots.

Page 4

To make it easier for you to get the 360° panorama images that you’ll be using, I have put them all into a folder on ELMS from where you can download just the three you’ll be using.

After you download the three you’ll be working with to your computer, upload them into the MyCampusTour folder that you already put in your TerpConnect space.

Page 5

In programming languages like Javascript, there are things called functions or procedures or methods depending on the language. They are often written to provide certain commonly-needed functionality to programmers in an easy to access manner. Those allow you to send information in to be used when providing that functionality.

There are times when programmers have to implement a function with a certain name because the existing part of a program will be calling it.

In the index.html file, there is a method named addViewsTargetsBillboards() and everything between the open curl brace { and close curl brace } are instructions that will build a tour. Right now, the instructions in there build the Lake Artemesiatour. You will replace those with your own instructions to build your part of the campus tour, but you might find it useful to look at those existing instructions to get a general feel for what your instructions will look like.

Overall there are five functions that you will make use of to build your tour. You can see them all used in the Lake Artemesia tour code, and I will discuss them each now.

Page 6

Before you can create your tour in code, you will need to know the coordinates at which you will want to place the teleportation targets and the information billboards.

The A-Frame VR foundation refers to these as x,y-coordinates, but it might be easier to think of them as pitch and yaw from the starting point, though in practice what you’ll do is edit the provided CoordinateFinder.html file and replace the filename that is in there when you get it, which will be Artemesia03.jpg, with the name of one of the filenames for your spots. You’ll do this one at a time, one after another to get all of the coordinates that you need.

If we were on campus, what I was going to suggest was that you explore low-fidelity prototyping by printing each of your panoramic photos in black and white and drawing big dots in the locations where you wanted to put teleportation targets and billboards, and then finding the coordinates using the CoordinateFinder.html file, dragging the image around until the ring was over the position you had in mind and then writing down the coordinates that were displayed on screen there.

Alternatively, since you might not have easy access to a printer, you can open each image file in a photo viewer to think about where to put things, or even do that directly in the CoordinateFinder.html file in your browser.

As you are doing this, take care that you don’t pick coordinates that will actually block something when the teleportation target or billboard dot appear on the screen, and avoid putting targets tooclose to each other as well.

Page 7

The first thing that you should do in terms of changing the addViewsTargetsBillboards() function is to revise the calls to insertView() so they insert the three campus spots for your tour into this page logically.

Logically, we think of our tour as jumping from view to view, where each view will have a panoramic image, some number of information billboards, and some number of teleportation targets that will allow the user to jump to other views within the tour you are building.

What the insertView() function does is it takes a nickname that you want to use for a view, and the filename of the panoramic image that will be shown in that view. In the example I used view names like “lake01” and “lake02” but in your tour it would make more logical sense to name them things like “spot01” or “spot02” and to use the number that corresponds to the filename of the image since it will be far easier to keep track of things that way.

Page 8

Next up in the addViewsTargetsBillboards() function, I suggest that you revise the calls addTargetGoingTo() and addTargetCameFrom().

Conceptually, I had a single path tour in mind, but for flexibility in the future I split the adding of teleportation targets that would take you “forward” and those that would take you “back” on the tour into two functions, and in theory you could have a fork in the road in a tour, even thought our assignment doesn’t have these.

Page 9

Again, we think of our walking tour as jumping from view to view, and here we call going forward on the walk “going to” a different view and going backwards as where we “came from.”

What the addTargetGoingTo() function does is it takes the nickname of a view onto which you want to place a teleportation target to allow the user to jump forward to the next spot, the nickname of that next spot’s view, and the coordinates at which the target should appear on-screen.

The syntax is similar for adding a teleportation target to return where a user came from during a walk, but the name of the function to do that is addTargetCameFrom() instead.

Once you have added these, you can try out the basic walk through you’ve created between the three spots on your tour.

Page 10

As you are thinking about information billboards to add, they can be about things that can be seen around the image, or even just fun UMD facts that the panoramic view makes you think of.

The billboards can be text alone or text above and below an image. There is a function for each of these two things.

Those functions also can take a width and height for the billboard itself.

Page 11

On this slide is an example of how to add a billboard hotspot to a particular view at a specific location where the billboard has text only.

Please pause to read it.

Welcome back. There are a few additional examples of how this can be used in the Lake Artemesia example tour.

Page 12

On this slide is an example of how to add a billboard hotspot to a particular view at a specific location where the billboard has text above and below an image. You’ll need to place that image file in your MyCampusTour sub-folder as well.

Please pause to read the above example.

Welcome back. This example of how it can be used is in the Lake Artemesiaexample tour in the starter file.

Page 13

My hope/plan is that while each submission will be graded independently, that I’ll be able to merge the billboards and teleportation targets from the whole class into a single walking tour from the Route 1 entrance, up past McKeldin library and then over to Hornbake and share it with at least other DCC students as a bit of campus while we are all away.

It was overcast most of the time I was out taking the photos. I had planned to go back on a nicer day to do them again but they locked non-critical people out of campus even before the state-level stay-at-home order, so I was unable to.

Hopefully, this will still be something nice.

Page 14

The original plan was for you to use the DCC panorama camera, or one from the STEM library, to capture your own photos of tour spots and learn how to prepare them for use, and while we couldn’t do that this semester, when we are all back next academic year if anyone would like to give that a try, just let me know then and I can help you do that.

This ends the material on how to create a simple VR walking tour, and sets you up to do the final phase of HW #2.

14