Provides the global PhiloGL
function to create WebGL applications, the static PhiloGL.hasWebGL()
method to detect if the browser is WebGL capable and the static PhiloGL.unpack()
method for unpacking modules into the global namespace.
Returns true or false whether the browser supports WebGL or not.
PhiloGL.hasWebGL();
Unpacks Vec3, Mat4, Quat, Camera, Program, WebGL, O3D, Scene, Shaders, IO, Events, WorkerGroup, Fx modules and classes so they can be accessed by the global scope and not through PhiloGL.moduleName.
PhiloGL.unpack();
Creates a PhiloGL application. The PhiloGL application provides a WebGL context, a Program, a Camera, a Scene, and also options for handling Events, loading textures via IO and more. For more information about the application you may take a look at the App class. This section describes the configuration options you can pass in to create the WebGL application.
PhiloGL(canvasId, options);
debug: true
.program - (mixed, optional) An object that contains options for creating a Program. Can also be an array of program objects, provided that each object contains an id. The options for program are:
defaults
, ids
, sources
, uris
. This will create a program from default shaders, from script ids, from string sources and from urls respectively.vs
and fs
string properties.false
.camera - (object, optional) An object with options for creating a Camera. These options are:
45
.0.1
.500
.{ x: 0, y: 0, z: 0 }
.{ x: 0, y: 0, z: 0 }
.scene - (object, optional) Scene creation options. These options are:
lights - (object, optional) An object for managing lights. The options for lighting are:
enable - (boolean) Set this to true
to enable lighting.
ambient - (object, optional) A r, g, b object with values in 0, 1 to select ambient lighting.
directional - (object, optional) An object with properties:
points - (mixed, optional) An array of point lights configuration objects containing as properties:
effects - (object, optional) An object with scene effect options.
textures - (object, optional) An object to load textures with the IO module. See also Program.setTexture. The object has as properties:
src - (array) An array of strings containing the path of the images to be loaded.
textureType - (string, optional) The type of the texture. Default’s TEXTURE_2D
.
pixelStore - (array, optional) An array of name, value objects to define how pixels are stored into the texture. Defualt’s [ { name: 'UNPACK_FLIP_Y_WEBGL', value: true }]
.
parameters - (array, optional) Parameters to set texture filters among other things. Default’s NEAREST
for MAG
and MIN
filters.
data - (object) An object containing either the dimensions of the texture or the image itself. The properties for the data object are:
RGBA
.events - (object, optional) An object with callbacks and configuration for event handling. For more information about the event callbacks check the Event documentation. These options are:
true
.true
.true
.true
.true
.onError - (function, optional) A callback for when the app creation goes wrong. The first parameter might be an object with the error description.
onLoad - (function) A function called when the application is successfully created. An app instance is created if the context is loaded, the program is compiled and linked correctly, the scene object is created correctly, the events are appended correctly to the canvas element, all textures and images are correctly loaded and set and the camera is created. The first parameter of the callback function is an app instance that has as some of the properties:
Creates an application from two shader files, sets some camera properties and loads two images as textures. Taken from LearningWebGL lesson 14.
//Create application
PhiloGL('lesson14-canvas', {
program: {
from: 'uris',
path: '../../../shaders/',
vs: 'frag-lighting.vs.glsl',
fs: 'frag-lighting.fs.glsl'
},
camera: {
position: {
x: 0, y: 0, z: -50
}
},
textures: {
src: ['arroway.jpg', 'earth.jpg'],
parameters: [{
name: 'TEXTURE_MAG_FILTER',
value: 'LINEAR'
}, {
name: 'TEXTURE_MIN_FILTER',
value: 'LINEAR_MIPMAP_NEAREST',
generateMipmap: true
}]
},
onError: function() {
alert("There was an error creating the app.");
},
onLoad: function(app) {
/* Do things here */
}
});
Creates an application with a moon texture and sets events to apply drag and drop to the moon object as well as to zoom in and out. Taken from LearningWebGL lesson 11.
//Create application
PhiloGL('lesson11-canvas', {
camera: {
position: {
x: 0, y: 0, z: -7
}
},
textures: {
src: ['moon.gif'],
parameters: [{
name: 'TEXTURE_MAG_FILTER',
value: 'LINEAR'
}, {
name: 'TEXTURE_MIN_FILTER',
value: 'LINEAR_MIPMAP_NEAREST',
generateMipmap: true
}]
},
events: {
onDragStart: function(e) {
pos = {
x: e.x,
y: e.y
};
},
onDragMove: function(e) {
var z = this.camera.position.z,
sign = Math.abs(z) / z;
moon.rotation.y += -(pos.x - e.x) / 100;
moon.rotation.x += sign * (pos.y - e.y) / 100;
moon.update();
pos.x = e.x;
pos.y = e.y;
},
onMouseWheel: function(e) {
e.stop();
var camera = this.camera;
camera.position.z += e.wheel;
camera.update();
}
},
onError: function() {
alert("There was an error creating the app.");
},
onLoad: function(app) {
/* Do stuff here... */
}
});