rezoner

playground({

  create: function() {

    app.loadData(...);

  },

  ready: function() {

rezoner

var app = new PLAYGROUND.Application({

  preload: function() {

    /* this is called before create and lets you silently load some assets */

    this.loadData("objects/buildings", "objects/subObjects", "objects/townBuildingList");

  },

rezoner

/* This will make you a screenshot for later usage whenever you want */

ENGINE.Game = {

  showOptionsScreen: function() {
    
    app.screenshot = this.app.layer.cache();
    app.setState(ENGINE.Options);

  }

rezoner

/* 
  
  Here is a simple plugin that creates scanlines image
  and draws it after everything has been rendered

  I am still not sure what will be the standard for configuration.

*/

PLAYGROUND.Scanlines = function(app) {

rezoner

PLAYGROUND.Layer = {

  plugin: true,

  app: {

    create: function(app, data) {

      app.layer = cq().appendTo(app.container);

rezoner

/* 
  
  I've decided there will be two levels of integration

  1) You get loaders only. You have to create renderers and scenes manually.
  2) You get loaders and magically bootstrapped Three.js
    
  Below is level 2 integration example which renders a textured cube:

*/

rezoner

/*
  ThreeJS bootstrap plugin

  Sets up three.js render for an application

  Sets up separate camera and scene for each state

*/

playground.plugins.three = {

rezoner

var app = playground({

  use: {

    "three": {
      renderer: "webgl"
    },

  },

rezoner

var app = playground({

  create: function() {

    this.renderer = new THREE.WebGLRenderer();

    document.body.appendChild(app.renderer.domElement);

  },

rezoner

/* 
  A full list of simple easing equations inspired by GIST from greweb - https://gist.github.com/gre/1650294
  Equations source - http://gsgd.co.uk/sandbox/jquery/easing/
*/

{
  linear: function(t) {
    return t
  },
  inQuad: function(t) {