Introduction

Last Wednesday, we finished our survey of Virtual Reality.
We discussed the Universal Simulation Principle, captured versus synthetic VR, SLAM, the uncanny valley.
We talked about VR sickness and some of its causes: latency, juddering and smearing, the screen door effect, and too high a demand on the user by the VR experience designer.
We then looked at a variety of VR experiences and talked briefly about the history of VR.
Finally, as the first approach we are going to study for creating VR experiences is WebVR, I briefly introduced HTML and had you create a small web page.
Today, we will start with a little more about HTML, then I will talk about Javascript and the A-Frame VR library on top of WebGL and WebVR.

The id Attribute

In the HTML spec, the word "element" is used where I have been saying tag.
Recall an open tag in HTML is allowed to have one or more attributes.

For example, here is an anchor tag used to make a link to another document:

<a id="my-great-example" href="https://archive.org/" >The Internet Archive<a>

In the above, id and href are attributes with values "my-great-example" and "https://archive.org/" respectively.
The value of id is supposed to be a unique identifier for a particular element on a web document; the href attribute is used to give the url the anchor is pointing to. Between the open and close tag gives the anchor's text.
Every element/tag type in HTML can make use of the id, if desired (you don't have to use it), but many elements don't support the href attribute.
We will later see that we can use the id of an element on a document to get an object in Javascript encapsulating the properties of that element using the syntax:
```
my_great_example = document.getElementById('my-great-example');
```

Other Common Attributes

Two other attributes which are used by many elements are the class attribute and the style attribute.
The class attribute allows you to specify that some tag belongs to a particular collection of tags, the style attribute is used to give so-called in-line, cascading style directives for how an element should look.

For example, consider the web page:

<!doctype html>
<html>
<head>
<title>Class and Style Demo</title>
<!-- Style tags can be used to make styles for a whole document -->
<!-- This is how to write a comment in HTML -->
<style>
.money {
    color: green;
}
.balanced {
    text-align: center;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="money">We gave this paragraph a class and the
    document level styles applied to this class make it green.</p>
<p style="font-size:20pt;">We made the text
    larger using an inline style directive.</p>
<p class="money balanced">This paragraph belongs to two classes.</p>
</body>
</html>

In Javascript, we will see we can get all the elements belonging to a given class name with the syntax:
```
money_elements = document.getElementsByClassName("money");
```

User-Defined Attributes and Elements

In HTML 5, any attribute name beginning with data- is a legal element attribute and can be used to add new user-defined properties to existing tags.
For example, in JQuery Mobile, a library of pre-built user-interface items for mobile devices, makes heavy use of data- to indicate different kinds of widgets:
```
<ul data-role="listview">
  <li><a href="cn_tower.html">CN Tower</a></li>
  <li><a href="empire_state.html">Empire State</a></li>
  <li><a href="sears_tower.html">Sears Tower</a></li>
</ul>
```
The above HTML is a standard unordered list made to look different by both style directives and Javascript based on its data-role value.
Since October, 2018, the HTML Living Standard has supported a Javascript programmatic way to extend HTML with new custom elements.
The A-Frame WebVR framework we will describe uses this to add several such new elements such as the <a-scene>, <a-box>, <a-sky>, etc.

Javascript

We now want to talk about Javascript in detail. It will be the language used to script action in WebVR. It is also the language used to add the functionality of tags in A-Frame.

This language was originally developed at Netscape Corporation by Brendan Eich in 1995 (It had previously been called Livescript and Mocha).
The term Javascript is trademarked by Oracle.
The standardized version is called ECMAscript (most recent version Ecmascript 2018 (often hear of Ecmascript 6)).
Many details on Javascript can be found at:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Although the name contains Java, unlike Java:
- It is a loosely rather than strongly type language.
- The object model is simpler
- It is interpreted

Different Ways of Running Javascript

We have seen we can view a web page by dragging the .html file into the browser or selecting File then Open from the browser menu.
This is called viewing a web page on the file system, and in the url bar on the browser, you would typically see a url beginning with.
More typically, when we go to a web site beginning with http:// or https:// ...
1. The browser looks at the domain portion of the url. For example, in http://www.cs.sjsu.edu/~pollett/185c.1.19s/, it would look at www.cs.sjsu.edu.
2. It uses a domain name lookup service (DNS) to find an Internet Protocol address (IP address) for that domain, say 130.65.255.57, and then opens a connection to the computer at that address. Connections make use of port numbers between (0 and 65535) in addition to addresses to say which process to connect to on the given machine. For example, a web server usually runs on port 80 or 443. Mail servers often run on port 25...
3. The browser then uses HTTP (the hypertext transfer protocol) to make requests for web pages using the remainder of the URL. For example,
```
GET /185c.1.19s/ HTTP/1.1
Host:www.cs.sjsu.edu
```
4. The remote computer (we'll call the server), does some calculations and then returns a response, usually including a web page.
If Javascript is run on the server as part of the calculation in giving the response, then we say it is server-side Javascript.
If Javascript is run on the client as part of a returned web page, then we say it is client-side Javascript.

Server Side Javascript - How to test our WebVR Web pages

Server-side Javascript might be used with Web VR if we want multiple people to share the same scene.
We might store information about the scene in a central server in a database, and use that to inform server side Javascript about what scenes to render to different clients.
Node.js is a popular server-side run time for Javascript.
If you are using a package manager to install software such as Homebrew (Macos), Chocolatey (Windows), or apt on Linux, then you can install Node.js using respectively one of the following command-line commands:
```
brew install nodejs
choco install nodejs
sudo apt install nodejs
```
Node.js comes with a package manager for Node.js related packages called npm.
One package we use is live-server, which we can install using (the -g installs it for all users on your machine):
```
npm install -g live-server
```
live-server is a Web Server written in Javascript. If we cd into a folder and run:
```
live-server
```
then we can point our browser to http://localhost:8000/ and see the files in that folder in a server setting as opposed to a file system setting.

Quiz

Which of the following statements is true?

VR Systems can only be used with people.
Teleoperation refers to a telepresense system where the user is actually able to control some aspect of the remote setting.
VR Sickness occurs when someone pays too much for a VR system.

Client-Side Javascript

Within an HTML page one can include Javascript in <script> tag's.

<!doctype html>
<html>
<head><title>Javascript Demo</title></head>
<body>
<div>
<script>
document.write("hi there"); 
</script>
</div>
</body>
</html>

This will print hi there at the location where the script tag occurs in the HTML document. document is a Javascript object referring to the current web page.
Using the script tag's src attribute, we can cause the browser to download a remote Javascript file and run it immediately.
```
<script src="my-useful-function.js" ></script> 
```
Script tags are processed only once, at the time the page loads.
However, they can be used to define functions which can then called at a later time in response to an event.
For example, we can have a url with a Javascript schema to call a Javascript function when an anchor link is clicked:
```
<a href="javascript:my_great_function()" >Click to execute</a>
```

Javascript Syntax

Identifiers (i.e., names) must begin with a letter, an underscore, or a $ and subsequent characters may be one of these three or numbers.
Either // or /* */ can be used for comments in Javascript
Semicolons to end lines in Javascript are optional. Beware:
```
return 
x; // has the effect of just return!
```
Javascript has 5 primitive types: Number, String, Boolean, Undefined and Null.
A number literal can be either a integer or a float. You can use hex for integers. If it is a float, it can use scientific notation:
7, 0xff, 0XFF, 7.2, .73, -.23, 7E2, 7e2, 7.2e-2, etc.
A string literal can be delimited either by a single or double quote.
"Hi there", 'hi there', '"', "\n", '\'\\', etc.
There are two Boolean literals: true or false.
The only Null literal is null which can be coerced to false as a Boolean and 0 as an Number.
The only literal of type Undefined is undefined. It can be coerced to false as a Boolean and NaN as a Number.

Variables, Assignments and Operators

The Javascript interpreter determines the type of a variable as needed by the circumstance.
Variables can be declared either by assigning it a value or by explicitly declaring it:
```
var my_variable, pi=3.14;
// explicit declarations effect the scope of the variable
```
The scope of a variable is the variable object within which it was declared.
Assignments in Javascript are similar to C or Java:
```
a++; a+=2; a--; a-=2; a = b +57;
```
Numeric operators in Javascript are similar to Java or C: +, -, *, /, %, ++, --, etc.

The + sign is used to concatenate strings.

first = "hello"
second = first + "bye" // "hellobye"

Arrays and Objects

Arrays represent a numerically indexed sequence of values. They can be declared using square brackets [] :

a = [ "red", "green", 6 ]; //elements don't have to be same type
console.log("a[2]="+a[2]); 
//the output of console.log can be seen using your browsers developer tools
console.log(a.length); // 3, the length of the array
b = [ [2,5], 7 ]; // array can be nested
b[0][1] = 8; // changes values 5 to 8

Objects can be thought of a collection of properties with values. They can be declared using braces {}:

a = {"bob" : 5, 
    "sally" : {"field": 99},
    "jason": [2,4,6] 
}; //note can nest
alert(a["jason"][2]); //makes a pop up with displaying 6
alert(a.bob) // notice can use . to dereference as well
a.bob = 27; //can assign value
a.tony = 15 //can create new properties

You can loop over properties using:

for (prop in my_object) {
   alert("prop:" + prop + "\nvalue:" + my_object[prop]);
}

Control Statements

Javascript supports the relational operators: ==, !=, <, >, <=, >=, ===, !==
The last two operators disallow conversion of either operand. So "3" === 3 evaluate to false.
Javascript also supports the operators &&, ||, !
Selection statements in Javascript are like in C/Java: if( a >b){} else{}
Javascript supports switch/case as in C/Java
Javascript supports while, for and do-while loops

Functions

A Javascript function definition consists of two parts:
1. a function header consisting of
  - the keyword function
  - an identifier
  - a parenthesized list of parameters
2. a compound statement

Function Example

function swap(i, j, a)
{
	var tmp=a[i]; /* explicitly defined variables 
                         have scope within the function
                         if I had declared the variable 
                         implicitly it would have global scope */
	a[i] = a[j]; a[j] = tmp;
}

This function could be called with a syntax like:
```
swap(10, 5, b);
```
A return statement can be used to return a value from a function.
Functions are objects so can be assigned as a value to variables.
```
var c = swap;
```
So could call:
```
c(10, 5, b);
```
The definition of a function does not need to list its arguments. One can obtain a list of arguments using the arguments subobject of a Function.
```
function swap()
{ 
  var i = this.arguments[0], j=this.arguments[1], a=this.arguments[2];
  //same code as before
}
```
Functions can be declared anonymously in Javascript, so we can also write code like:
```
swap = function(i, j, a) {
   /* same code as before*/
}
```

DOM

The Document Object Model is a model developed in the 90s for how the contents of an HTML, XHTML, or XML document should be modeled by Javascript or other language's objects.
Typically a document is modeled as a tree with roughly one node for each element.

For example, consider the following HTML snippet

<script>
function action()
{
     var click_button = document.getElementById('click-button');
     //this will get the contents of the tag as html
     // can also get it as objects using the children subarray
     var button_text = click_button.innerHTML;
     if ( button_text.trim() != "Click Me")  {
          click_button.innerHTML = "Click Me";
          // notice button's style attribute is also reflected as subobject
          click_button.style.backgroundColor = "gray";
     } else {
          click_button.innerHTML = "Ouch";
          alert(click_button.innerHTML);
          click_button.style.backgroundColor = "red";
     }

}
</script>
<button id="click-button" onclick="javascript:action()" >
Click Me
</button>

One can also programmatically, add/remove event handlers.

For example, a dropdown in HTML is defined using the select tag with option tag subelements. It responds to change events. If we had such a dropdown with id="foo", we could add an event listener using:

document.getElementById("foo").onchange = some_function;
// or 
document.getElementById("foo").addEventListener("change", some_function, false);
// to get rid of it we could use
document.getElementById("foo").removeEventListener("change", some_function);

A-Frame

A-Frame is a web framework from Mozilla for building Virtual Reality experiences.
It can be viewed as a successor to more historical VR scene description attempts like VRML (what I learned in grad school 1996) and X3D.
It extends HTML with custom elements such <a-scene>, <a-sky>, <a-box> to let people quickly create VR scenes.
Under the hood, it uses a Javascript library three.js to map rendering tasks to WebGL.
It also handles detection of whether a browser can handle WebVR (stereoscopic output, etc).
It further abstracts and simplifies the browser's handling of various controllers.
Most VR browsers have two modes, one for surfing normal web pages, one for seeing a VR experience at some web page.
Normally, a programmer of a VR experience needs to code the toggling between these two modes.
A-Frame handles this for you. Not only that but it provides ways to navigate a VR scene even if one doesn't have a headset.

A-Frame Example

[My First A-Frame Example Link]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My First A-Frame Page</title>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #ECECEC">
    <a-assets>
        <img id="my-photo" src="images/myphoto.jpg" />
    </a-assets>
    <a-box position="-1 0.5 -3" rotation="0 45 0" src="#my-photo"
        shadow></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="green"
        shadow></a-sphere>
    <a-cone position="1 0.75 -3" radius="0.3" height="1.3" color="blue"
        shadow></a-cone>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4"
        color="#FF5566" shadow></a-plane>
</a-scene>
</body>
</html>

Remarks on Example 1

Clicking on enters VR mode, ESC exits it.
The script tag is used to load aframe.min.js, a minimized (white-space, comments removed, variables given short names) version of the javascript needed to set up the A-Frame custom tags.
One gotcha about online a-frame examples is that the scripts (there are more besides just the base a-frame) are often included with a version range and that can make then uncapatible with newer headsets, so you might have to tweak these version numbers to get something that works for newer headsets.
<a-scene> is the root tag of an A-Frame scene, subelements are things placed in this scene.
A scene can, but is not required to, have a collection of resource assets defined in an <a-assets>. These can be textures, sounds, etc.
Observe how we use the img asset's id to refer to it later in the a-box tag.
Notice the position attributes is used to give the x, y, z coordinate as floats of an object. To the right on the screen is increasing x, going up increases y, and going "further into the board" increases z.
The numbers have no units, but if you like you can imagine them as meters.
Rotations are expressed as three angles in degrees. I.e., how far to rotate in each of the x, y, z directions.
The color attributes can be any legal HTML color. This can be given using predefined colors or 3 or 6 digit rgb values.
The shadow attributes determines whether or not something should cast a shadow.

A-Frame Primitives

A-Frame comes with several pre-built objects called primitives. For example, we have already used <a-box>, <a-sphere>, <a-cone>, <a-plane>
We will go over some of these primitives next day.
A large list, however, can be found at the A-Frame Introduction page.

Entity Components

A-Frame is an entity-component framework.
The base object in A-Frame is the a-entity object (with a corresponding <a-entity> tag).
To extend this entity beyond its basic functionality one adds various components.
A-frame primitives are essentially a-entities that have already been extended with components and which have some of the component's properties reflected as attributes.

For example, an a-box:

<a-box color="blue" width="4"></a-box>

is essentially the same as the a-entity:

<a-entity geometry="primitive: box; width: 4" material="color: blue"></a-entity>

We will see later how to define new primitives.

Javascript, A-Frame

Outline