Skip to content

Guide: Getting Started

Jump to bottom Edit New page
cjcliffe edited this page Aug 15, 2012 · 9 revisions

#Getting Started

Setting up the Canvas.

With CubicVR.js there are several options for initialisation, including pre-existing and multiple targets; but the simplest way to get a 3d context up and running is via the CubicVR.start() command. The path_to can be the path to the minified/bundled build or github repository root.

Note if you have python installed on your system you can run make testserver in the CubicVR.js repository root to start a test server that defaults to http://localhost:9914/. This will provide a simple web server to avoid local file access errors.

<!DOCTYPE html>
<html>  
    <head>
        <title>My Project</title>
        <script src="path_to/CubicVR.js" type="text/javascript"></script>
        <script type='text/javascript'>
            function webGLStart(gl,canvas) {
                // init and setup here
            }
        </script>
    </head>
    <body onload="CubicVR.start('auto',webGLStart);"></body>
</html>

The significant lines involve the body onload statement (or jquery ready or preferred init method) which makes the js call:

CubicVR.start('auto',webGLStart);

This tells CubicVR.js to use automatic mode, which creates a full-browser canvas with resize support. The second parameter is the function to pass the gl context and the canvas element to, which is:

function webGLStart(gl,canvas) {
    // init and setup here
}

Here the function receives the WebGL context (gl) and the canvas element created, from there you can continue to initialise your scene and create a rendering loop.

Adding the Drawing Loop

With the basic initialisation of the canvas there's nothing displayed since nothing has been drawn to the canvas yet. To start drawing you'll need to add a main drawing loop in which you can perform operations. CubicVR.js provides a simple method to start and utilise an optimal drawing loop called MainLoop. To set-up the main loop it's a simple addition of code to the webGLStart function:

function webGLStart(gl,canvas) {
    // perform any initialisation here.

    // Start our main drawing loop, it provides a timer and the gl context as parameters
    CubicVR.MainLoop(function(timer, gl) {
      // perform any per-frame operations here
      // perform any drawing operations here
    });
}

After adding the MainLoop call it will now show a black canvas. Each frame the screen is cleared to the 'clear color' which represents what color should be used for the background each frame; the default clear color is black [0.0, 0.0, 0.0, 1.0]. You can set the clear color using gl.clearColor(r, g, b, a); during initialisation to set it to anything else (r,g,b,a value range 0.0-1.0).

With the render loop added the project is now ready to go; to find out what to do next check out the: Basics of Scene Construction



Add a custom footer
Add a custom sidebar
Clone this wiki locally