diff --git a/src/camera.js b/src/camera.js index 260737e5..df1c0a7f 100644 --- a/src/camera.js +++ b/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) { diff --git a/src/core.js b/src/core.js index 209dedc7..b1a21d47 100644 --- a/src/core.js +++ b/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]; + }; + })(); +})(); diff --git a/src/event.js b/src/event.js index 2fff5c62..a8c7749a 100644 --- a/src/event.js +++ b/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) { diff --git a/src/fx.js b/src/fx.js index e2ec44c8..7d196e06 100644 --- a/src/fx.js +++ b/src/fx.js @@ -1,4 +1,6 @@ (function() { + var $ = PhiloGL.$; + //Timer based animation var Fx = function(options) { this.opt = $.merge({ diff --git a/src/io.js b/src/io.js index a51d24c4..d468699d 100644 --- a/src/io.js +++ b/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, diff --git a/src/math.js b/src/math.js index eba1807b..876b087d 100644 --- a/src/math.js +++ b/src/math.js @@ -2,6 +2,7 @@ //Vec3, Mat4 and Quat classes (function() { + var sqrt = Math.sqrt, sin = Math.sin, cos = Math.cos, diff --git a/src/media.js b/src/media.js index dbaba33a..57ebca2a 100644 --- a/src/media.js +++ b/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, diff --git a/src/o3d.js b/src/o3d.js index d87641e5..4ba8d940 100644 --- a/src/o3d.js +++ b/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,6 +238,8 @@ }, 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++) { @@ -243,10 +247,10 @@ 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); diff --git a/src/program.js b/src/program.js index aa3f90c2..a94bdf3f 100644 --- a/src/program.js +++ b/src/program.js @@ -3,6 +3,7 @@ //buffers attributes and uniforms (function() { + var $ = PhiloGL.$; //First, some privates to handle compiling/linking shaders to programs. //Creates a shader from a string source. @@ -25,7 +26,7 @@ }; //Creates a program from vertex and fragment shader sources. - var createProgram = function(gl, vertexShader, fragmentShader) { + var createProgram = function(vertexShader, fragmentShader, gl, app) { var program = gl.createProgram(); gl.attachShader( program, @@ -206,10 +207,10 @@ }; //Program Class: Handles loading of programs and mapping of attributes and uniforms - var Program = function(vertexShader, fragmentShader) { - var program = createProgram(gl, vertexShader, fragmentShader); + var Program = function(vertexShader, fragmentShader, gl, app) { + var program = createProgram(vertexShader, fragmentShader, gl); if (!program) return false; - + var attributes = {}, attributeEnabled = {}, uniforms = {}, @@ -239,6 +240,10 @@ this.attributes = attributes; this.attributeEnabled = attributeEnabled; this.uniforms = uniforms; + this.app = app; + this.gl = gl; + + return this; }; Program.prototype = { @@ -262,6 +267,7 @@ ['setBuffer', 'setBuffers', 'use'].forEach(function(name) { Program.prototype[name] = function() { + var app = this.app; var args = Array.prototype.slice.call(arguments); args.unshift(this); app[name].apply(app, args); @@ -272,6 +278,7 @@ ['setFrameBuffer', 'setFrameBuffers', 'setRenderBuffer', 'setRenderBuffers', 'setTexture', 'setTextures'].forEach(function(name) { Program.prototype[name] = function() { + var app = this.app; app[name].apply(app, arguments); return this; }; @@ -280,10 +287,11 @@ //Get options in object or arguments function getOptions(args, base) { var opt; - if (args.length == 2) { + if (args.length == 3) { opt = { vs: args[0], - fs: args[1] + fs: args[1], + gl: args[2] }; } else { opt = args[0] || {}; @@ -293,23 +301,30 @@ //Create a program from vertex and fragment shader node ids Program.fromShaderIds = function() { - var opt = getOptions(arguments), + var $ = PhiloGL.$, + opt = getOptions(arguments), vs = $(opt.vs), - fs = $(opt.fs); - return preprocess(opt.path, vs.innerHTML, function(vectexShader) { + fs = $(opt.fs), + gl = opt.gl, + app = opt.app + program = null; + preprocess(opt.path, vs.innerHTML, function(vectexShader) { return preprocess(opt.path, fs.innerHTML, function(fragmentShader) { - opt.onSuccess(new Program(vectexShader, fragmentShader), opt); + opt.onSuccess(program = new Program(vectexShader, fragmentShader, gl, app), opt); }); }); + return program; }; //Create a program from vs and fs sources Program.fromShaderSources = function() { - var opt = getOptions(arguments, {path: './'}); + var opt = getOptions(arguments, {path: './'}) + gl = opt.gl, + app = opt.app; return preprocess(opt.path, opt.vs, function(vectexShader) { return preprocess(opt.path, opt.fs, function(fragmentShader) { try { - var program = new Program(vectexShader, fragmentShader); + var program = new Program(vectexShader, fragmentShader, gl, app); if(opt.onSuccess) { opt.onSuccess(program, opt); } else { diff --git a/src/scene.js b/src/scene.js index 398ea8e9..d8f617f1 100644 --- a/src/scene.js +++ b/src/scene.js @@ -4,7 +4,8 @@ (function() { //Define some locals var Vec3 = PhiloGL.Vec3, - Mat4 = PhiloGL.Mat4; + Mat4 = PhiloGL.Mat4, + $ = PhiloGL.$; //Scene class var Scene = function(program, camera, opt) { @@ -40,6 +41,7 @@ }, opt || {}); this.program = opt.program ? program[opt.program] : program; + this.app = this.program.app; this.camera = camera; this.models = []; this.config = opt; @@ -211,6 +213,8 @@ }, renderToTexture: function(name, opt) { + var app = this.app, + gl = app.gl; opt = opt || {}; var texture = app.textures[name + '-texture'], texMemo = app.textureMemo[name + '-texture']; @@ -230,6 +234,8 @@ world = view.mulMat4(object), worldInverse = world.invert(), worldInverseTranspose = worldInverse.transpose(); + app = program.app, + gl = app.gl; obj.setState(program); @@ -259,8 +265,9 @@ //setup picking framebuffer setupPicking: function() { + var app = this.app; //create picking program - var program = PhiloGL.Program.fromDefaultShaders(), + var program = PhiloGL.Program.fromDefaultShaders({app: app, gl: app.gl}), floor = Math.floor; //create framebuffer app.setFrameBuffer('$picking', { diff --git a/src/shaders.js b/src/shaders.js index 1ee3d8f2..f70b4490 100644 --- a/src/shaders.js +++ b/src/shaders.js @@ -2,6 +2,7 @@ //Default Shaders (function() { + var $ = PhiloGL.$; //Add default shaders var Shaders = { Vertex: {}, diff --git a/src/webgl.js b/src/webgl.js index c27e4ff2..623d0b64 100644 --- a/src/webgl.js +++ b/src/webgl.js @@ -2,6 +2,7 @@ //Checks if WebGL is enabled and creates a context for using WebGL. (function () { + var $ = PhiloGL.$; var WebGL = { @@ -78,6 +79,7 @@ $$family: 'application', setBuffer: function(program, name, opt) { + var gl = this.gl; //unbind buffer if (opt === false || opt === null) { opt = this.bufferMemo[name]; @@ -157,6 +159,7 @@ }, setFrameBuffer: function(name, opt) { + var gl = this.gl; //bind/unbind framebuffer if (typeof opt != 'object') { gl.bindFramebuffer(gl.FRAMEBUFFER, opt? this.frameBuffers[name] : null); @@ -234,6 +237,7 @@ }, setRenderBuffer: function(name, opt) { + var gl = this.gl; if (typeof opt != 'object') { gl.bindRenderbuffer(gl.RENDERBUFFER, opt? this.renderBufferMemo[name] : null); return; @@ -269,6 +273,7 @@ }, setTexture: function(name, opt) { + var gl = this.gl; //bind texture if (!opt || typeof opt != 'object') { gl.activeTexture(opt || gl.TEXTURE0); @@ -400,6 +405,7 @@ }, use: function(program) { + var gl = this.gl; gl.useProgram(program.program); //remember last used program. this.usedProgram = program;