Initialisation and Entry Point

To help us out and make things easier to work with we'll create an initialisation .js file (init.js) which will collect all of the engine files in one place and wrap them in a namespace (in this case 'eng'). We also declare and initialise our main App instance ('APP') in this file and then export everything together.

import GL, {glSetContext} from './engine/gl.js'
import GLStates from './engine/glstates.js'
import * as eng from './engine/exports.js';

var APP = new eng.App();

export {glSetContext, GL, GLStates, eng, APP as default};

By doing it this way we can import and access our App instance in any of our project files (also true of the WebGL Context 'GL'). Next we need to create the entry point for our app which will be run when the page loads.

import APP from './init.js';
import InitialScene from './initialscene.js';

function main() {
  try {
    APP.init("canvas"); // initialise the app instance, passing in the canvas id (from index.html)
    APP.sceneManager.requestChange(new InitialScene()); // request a change to our initial scene
    APP.sceneManager.change(); // perform the scene change immediately
    APP.run(); // enter the main loop of our app
  } catch (e) {
    console.error(e.message);
  }
}

window.onload = function() {
  main(); // run our entry function immediately when the page loads
}

We import our APP instance that we defined during initialisation, as well as our InitialScene class which we'll look at in detail later. Next, we declare a function (called 'main()' here, but the name is irrelevant) and initialise our app. This is where we pass in the id of our canvas element ('canvas'). Next we request and immediately change to an instance of our InitialScene (more on Scenes later). Finally, we enter the main loop of our App which runs until it is terminated (usually by the page closing).

The entry function can be called whenever and however you like but in this case we call it as soon as the page loads.