Scoping Functions and Adding Multiple GL Context Support

src/camera.js

@@ -4,7 +4,8 @@
 (function () {
   //Define some locals
   var Vec3 = PhiloGL.Vec3,
-      Mat4 = PhiloGL.Mat4;
+      Mat4 = PhiloGL.Mat4,
+      $ = PhiloGL.$;
 
   //Camera class
   var Camera = function(fov, aspect, near, far, opt) {

src/core.js

@@ -8,6 +8,7 @@ this.PhiloGL = null;
 //with a gl context, a camera, a program, a scene, and an event system.
 (function () {
   PhiloGL = function(canvasId, opt) {
+    var $ = PhiloGL.$;
     opt = $.merge({
       context: {
         /*
@@ -50,16 +51,21 @@ this.PhiloGL = null;
         optEvents = opt.events,
         optTextures = opt.textures,
         optProgram = $.splat(opt.program),
-        optScene = opt.scene;
+        optScene = opt.scene
+        program = null;
 
-    //get Context global to all framework
-    gl = PhiloGL.WebGL.getContext(canvasId, optContext);
+    //Get the 3D context, holds the application
+    var gl = PhiloGL.WebGL.getContext(canvasId, optContext);
+    PhiloGL.glConstants = gl;
 
     if (!gl) {
         opt.onError("The WebGL context couldn't been initialized");
         return null;
     }
 
+    //make app instance
+    var app = new PhiloGL.WebGL.Application({gl: gl});
+
     //get Program
     var popt = {
       'defaults': 'fromDefaultShaders',
@@ -93,13 +99,15 @@ this.PhiloGL = null;
 
     optProgram.forEach(function(optProgram, i) {
       var pfrom = optProgram.from, program;
+      optProgram.gl = gl;
+      optProgram.app = app;
       for (var p in popt) {
         if (pfrom == p) {
-          try {
+          //try {
             program = PhiloGL.Program[popt[p]]($.extend(programCallback, optProgram));
-          } catch(e) {
-            programCallback.onError(e);
-          }
+          //} catch(e) {
+          //  programCallback.onError(e);
+          //}
           break;
         }
       }
@@ -121,14 +129,10 @@ this.PhiloGL = null;
       //get Scene
       var scene = new PhiloGL.Scene(program, camera, optScene);
 
-      //make app instance global to all framework
-      app = new PhiloGL.WebGL.Application({
-        gl: gl,
-        canvas: canvas,
-        program: program,
-        scene: scene,
-        camera: camera
-      });
+      app.program = program;
+      app.canvas = canvas;
+      app.scene = scene;
+      app.camera = camera;
 
       //Use program
       if (program.$$family == 'program') {
@@ -148,7 +152,7 @@ this.PhiloGL = null;
           onComplete: function() {
             callback(app);
           }
-        }));
+        }), app);
       } else {
         callback(app);
       }
@@ -158,65 +162,66 @@ this.PhiloGL = null;
 })();
 
 
-//Unpacks the submodules to the global space.
-PhiloGL.unpack = function(branch) {
-  branch = branch || globalContext;
-  ['Vec3', 'Mat4', 'Quat', 'Camera', 'Program', 'WebGL', 'O3D',
-   'Scene', 'Shaders', 'IO', 'Events', 'WorkerGroup', 'Fx', 'Media'].forEach(function(module) {
-      branch[module] = PhiloGL[module];
-  });
-  branch.gl = gl;
-  branch.Utils = $;
-};
+(function() {
+  globalContext = this;
+  //Unpacks the submodules to the global space.
+  PhiloGL.unpack = function(branch) {
+    branch = branch || globalContext;
+    ['Vec3', 'Mat4', 'Quat', 'Camera', 'Program', 'WebGL', 'O3D',
+     'Scene', 'Shaders', 'IO', 'Events', 'WorkerGroup', 'Fx', 'Media'].forEach(function(module) {
+        branch[module] = PhiloGL[module];
+    });
+    branch.gl = gl;
+    branch.Utils = PhiloGL.$;
+  };
+});
 
 //Version
 PhiloGL.version = '1.5.2';
 
-//Holds the 3D context, holds the application
-var gl, app, globalContext = this;
-
 //Utility functions
-function $(d) {
-  return document.getElementById(d);
-}
+(function() {
+  PhiloGL.$ = function (d) {
+    return document.getElementById(d);
+  }
+  var $ = PhiloGL.$;
 
-$.empty = function() {};
+  $.empty = function() {};
 
-$.time = Date.now;
+  $.time = Date.now;
 
-$.uid = (function() {
-  var t = $.time();
+  $.uid = (function() {
+    var t = $.time();
 
-  return function() {
-    return t++;
-  };
-})();
+    return function() {
+      return t++;
+    };
+  })();
 
-$.extend = function(to, from) {
-  for (var p in from) {
-    to[p] = from[p];
-  }
-  return to;
-};
-
-$.type = (function() {
-  var oString = Object.prototype.toString,
-      type = function(e) {
-        var t = oString.call(e);
-        return t.substr(8, t.length - 9).toLowerCase();
-      };
-
-  return function(elem) {
-    var elemType = type(elem);
-    if (elemType != 'object') {
-      return elemType;
+  $.extend = function(to, from) {
+    for (var p in from) {
+      to[p] = from[p];
     }
-    if (elem.$$family) return elem.$$family;
-    return (elem && elem.nodeName && elem.nodeType == 1) ? 'element' : elemType;
+    return to;
   };
-})();
 
-(function() {
+  $.type = (function() {
+    var oString = Object.prototype.toString,
+        type = function(e) {
+          var t = oString.call(e);
+          return t.substr(8, t.length - 9).toLowerCase();
+        };
+
+    return function(elem) {
+      var elemType = type(elem);
+      if (elemType != 'object') {
+        return elemType;
+      }
+      if (elem.$$family) return elem.$$family;
+      return (elem && elem.nodeName && elem.nodeType == 1) ? 'element' : elemType;
+    };
+  })();
+
   function detach(elem) {
     var type = $.type(elem), ans;
     if (type == 'object') {
@@ -252,12 +257,12 @@ $.type = (function() {
     }
     return mix;
   };
-})();
 
-$.splat = (function() {
-  var isArray = Array.isArray;
-  return function(a) {
-    return isArray(a) && a || [a];
-  };
-})();
+  $.splat = (function() {
+    var isArray = Array.isArray;
+    return function(a) {
+      return isArray(a) && a || [a];
+    };
+  })();
 
+})();

src/event.js

@@ -2,6 +2,7 @@
 //Handle keyboard/mouse/touch events in the Canvas
 
 (function() {
+  var $ = PhiloGL.$;
 
   //returns an O3D object or false otherwise.
   function toO3D(n) {

src/fx.js

@@ -1,4 +1,6 @@
 (function() {
+  var $ = PhiloGL.$;
+
   //Timer based animation
   var Fx = function(options) {
       this.opt = $.merge({

src/io.js

@@ -2,6 +2,7 @@
 //Provides loading of assets with XHR and JSONP methods.
 
 (function () {
+  var $ = PhiloGL.$;
   var IO = {};
 
   var XHR = function(opt) {
@@ -265,7 +266,7 @@
   };
 
   //Load multiple textures from images
-  var Textures = function(opt) {
+  var Textures = function(opt, app) {
     opt = $.merge({
       src: [],
       noCache: false,

src/math.js

@@ -2,6 +2,7 @@
 //Vec3, Mat4 and Quat classes
 
 (function() {
+
   var sqrt = Math.sqrt, 
       sin = Math.sin,
       cos = Math.cos,

src/media.js

@@ -2,6 +2,7 @@
 //media has utility functions for image, video and audio manipulation (and
 //maybe others like device, etc).
 (function() {
+  var $ = PhiloGL.$;
   var Media = {};
 
   var Image = function() {};
@@ -17,8 +18,9 @@
       position: { x: 0, y: 0, z: 1.205 }
     }), scene = new PhiloGL.Scene({}, camera);
 
-    return function(opt) {
-      var program = app.program.$$family ? app.program : app.program[opt.program],
+    return function(opt, app) {
+      var gl = app.gl,
+          program = app.program.$$family ? app.program : app.program[opt.program],
           textures = opt.fromTexture ? $.splat(opt.fromTexture) : [],
           framebuffer = opt.toFrameBuffer,
           screen = !!opt.toScreen,

src/o3d.js

@@ -2,6 +2,7 @@
 //Scene Objects
 
 (function () {
+  var $ = PhiloGL.$;
   //Define some locals
   var Vec3 = PhiloGL.Vec3,
       Mat4 = PhiloGL.Mat4,
@@ -156,12 +157,13 @@
     },
 
     setIndices: function(program) {
+      var glc = PhiloGL.glConstants
       if (!this.$indices) return;
 
       if (this.dynamic) {
         program.setBuffer('indices-' + this.id, {
-          bufferType: gl.ELEMENT_ARRAY_BUFFER,
-          drawType: gl.STATIC_DRAW,
+          bufferType: glc.ELEMENT_ARRAY_BUFFER,
+          drawType: glc.STATIC_DRAW,
           value: this.$indices,
           size: 1
         });
@@ -236,17 +238,19 @@
     },
 
     setTextures: function(program, force) {
+      var app = program.app;
+          glc = PhiloGL.glConstants;
       this.textures = this.textures? $.splat(this.textures) : [];
       var dist = 5;
       for (var i = 0, texs = this.textures, l = texs.length, mtexs = PhiloGL.Scene.MAX_TEXTURES; i < mtexs; i++) {
         if (i < l) {
           var isCube = app.textureMemo[texs[i]].isCube;
           if (isCube) {
             program.setUniform('hasTextureCube' + (i + 1), true);
-            program.setTexture(texs[i], gl['TEXTURE' + (i + dist)]);
+            program.setTexture(texs[i], glc['TEXTURE' + (i + dist)]);
           } else {
             program.setUniform('hasTexture' + (i + 1), true);
-            program.setTexture(texs[i], gl['TEXTURE' + i]);
+            program.setTexture(texs[i], glc['TEXTURE' + i]);
           }
         } else {
           program.setUniform('hasTextureCube' + (i + 1), false);
@@ -270,7 +274,8 @@
     },
 
     unsetState: function(program) {
-      var attributes = program.attributes;
+      var attributes = program.attributes,
+          gl = program.gl;
 
       //unbind the array and element buffers
       gl.bindBuffer(gl.ARRAY_BUFFER, null);