Hello World in GLAM


First, you will need to get a copy of the glam JS library. Here is where I found mine.

Next you will need to create a "viewport", import the library and add a container with a glam scene.

If you are working with cardboard, you will need to import the renderer and the controller. If you just want to look at the 3D scene on a webpage, you can comment these lines out. Be warned, though - sometimes the cardboard orientation can be different than that of the browser.

Here is hello world in GLAM working on a cardboard device:

<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="glam.min.js" ></script>
    <style>
        #helloText {
            diffuse-color:cornflowerblue;
        }
    </style>
</head>
<body>
<div id="container" style="width: 100%; height: 100%; position: absolute;">
    <glam>
        <scene>
            <renderer type="cardboard"></renderer>
            <controller type="deviceOrientation"></controller>
            <group z="-3">
                <text id="helloText" value="hello, world"></text>
            </group>
        </scene>
    </glam>
</div>
</body>
</html>

http://vrambling.com/helloworld.html

Background reading:

http://tparisi.github.io/glam/docs/#Manual/Key_Concepts/Key_concepts

Adding a link to another VR page

The power of HTML is hyperlinking, and although it is not nearly as simple as typing <a href=""/>, it isn't very hard to do. This is GLAM's best feature.

First, let's start off with some simple cubes.

<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="glam.min.js" ></script>
    <style>
        body{
            margin: 0px;
            background-color: #ffffff;
        }

        #redCube {
            diffuse-color:red;
        }

        #blueCube {
            diffuse-color:blue;
        }

        #greenCube {
            diffuse-color:green;
        }
    </style>
</head>
<body>
<div id="container" style="width: 100%; height: 100%; position: absolute;">
    <glam>
        <scene>
            <renderer type="cardboard"></renderer>
            <controller type="deviceOrientation"></controller>
            <box id="redCube" z="-9" rx="45deg"></box>
            <box id="blueCube" x="-9" rx="45deg"></box>
            <box id="greenCube" x="+9" rx="45deg"></box>
        </scene>
    </glam>
</div>
</body>
</html>

What we want to do here is add a javascript event listener to the red box. The first step is to add an event listener on load, so that we call the script after all the page elements have loaded.

window.addEventListener('load', function(){
    glam.ready();
    scene = document.getElementsByTagName('scene')[0];

    addLinkListener()
}, false);

Then we create the addLinkListener() method, which will set up the events on the redCube object. GLAM has two events, "viewover" and "viewout" which are called when the object is in the centre of the view. We will use this to put the object into a selectedLink variable whenever it is looked at inside cardboard.

var selectedLink = null;

function addLinkListener() {
    redCube = document.getElementById('redCube');
    console.log('redCube: ' + redCube);

    redCube.href = 'http://vrambling.com/helloworld.html'

    redCube.addEventListener("viewover", function(event) {
        console.log('redCube viewover');
        selectedLink = redCube;
    });

    redCube.addEventListener("viewout", function(event) {
        console.log('redCube viewout');
        selectedLink = null;
    });
}

I have added console.log statements for debugging purposes. Best to remove them after all of your testing is finished. As you can see, we assign an "href" property to the object which we will use to navigate.

Finally, we will add a touchstart event to the window to detect the cardboard touch event.

var canvas = glam.Graphics.instance.renderer.domElement;
canvas.addEventListener("touchstart", function(event) {
    console.log('click on window, selected link: ' + selectedLink);
    if (selectedLink != null && selectedLink.href != null) {
        window.location.href = selectedLink.href;
    }
});
 
Here is the finished code, with a working link on the red box:

<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="glam.min.js" ></script>
    <style>
        body{
            margin: 0px;
            background-color: #ffffff;
        }

        #redCube {
            diffuse-color:red;
        }

        #blueCube {
            diffuse-color:blue;
        }

        #greenCube {
            diffuse-color:green;
        }
    </style>
    <script>
        var selectedLink = null;

        window.addEventListener('load', function(){
            glam.ready();
            scene = document.getElementsByTagName('scene')[0];

            var canvas = glam.Graphics.instance.renderer.domElement;
            canvas.addEventListener("touchstart", function(event) {
                console.log('click on window, selected link: ' + selectedLink);
                if (selectedLink != null && selectedLink.href != null) {
                    window.location.href = selectedLink.href;
                }
            });

            addLinkListener()
        }, false);

        function addLinkListener() {
            redCube = document.getElementById('redCube');
            console.log('redCube: ' + redCube);

            redCube.href = 'http://vrambling.com/helloworld.html'

            redCube.addEventListener("viewover", function(event) {
                console.log('redCube viewover');
                selectedLink = redCube;
            });

            redCube.addEventListener("viewout", function(event) {
                console.log('redCube viewout');
                selectedLink = null;
            });
        }
    </script>
</head>
<body>
<div id="container" style="width: 100%; height: 100%; position: absolute;">
    <glam>
        <scene>
            <renderer type="cardboard"></renderer>
            <controller type="deviceOrientation"></controller>
            <box id="redCube" z="-9" rx="45deg"></box>
            <box id="blueCube" x="-9" rx="45deg"></box>
            <box id="greenCube" x="+9" rx="45deg"></box>
        </scene>
    </glam>
</div>
</body>
</html>
 
 
 

Importing models

Although it's possible to make nice scenes with spheres and cubes, most of the rooms you will create will involve objects created in 3D modelling programs. These can be imported with a simple statement. 

<import id="chair" src="chair.dae" rx="270deg"></import>

This presumes you have a DAE file sitting on your web server with the object you need. Here is one that I used for this example:

http://www.3dvia.com/models/9A414190A2B48698/ikea-po-ng

I needed to rename the file and include the texture for it to work.

Here is the complete code. Notice the y value on the group - this is to simulate the user standing over the chair:


<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="glam.min.js" ></script>
</head>
<body>
<div id="container" style="width: 100%; height: 100%; position: absolute;">
    <glam>
        <scene>
            <renderer type="cardboard"></renderer>
            <controller type="deviceOrientation"></controller>
            <group z="-3" y="-2">
                <import id="chair" src="chair.dae" rx="270deg"></import>
            </group>
        </scene>
    </glam>
</div>
</body>
</html>