library logo

Core

Script: Core

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.

PhiloGL Static Method: hasWebGL

Returns true or false whether the browser supports WebGL or not.

Syntax:

PhiloGL.hasWebGL();

PhiloGL Static Method: unpack

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.

Syntax:

PhiloGL.unpack();

PhiloGL Method: constructor

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.

Syntax:

PhiloGL(canvasId, options);

Arguments:

  1. canvasId - (string) The id of the canvas element.
  2. options - (object) An object containing the following options:

Options:

General WebGLRenderingContext options:

Program management:

Camera management:

Scene management:

Texture management:

Event handling:

Loading callbacks:

Examples:

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... */
    }
  });