Blog

Introducing PhiloGL: A WebGL Framework from Sencha Labs

December 31, 1969 | Nicolas Belmonte

For some time now I’ve been working on a Sencha Labs project to build a WebGL framework and today I’m very proud to release it. It’s called PhiloGL and it’s intended for advanced data visualization, creative coding and game development.

WebGL has been in development for a few years, and although the raw API’s are powerful, they’re also very low-level. This makes doing WebGL development tough for the average JavaScript developer. The goal of PhiloGL is to make WebGL programming as fun and easy as developing with any of the mainstream frameworks. PhiloGL uses cutting edge technology, JavaScript idioms and good practices to deliver elegantly coded, high performance WebGL applications. It also provides a rich module system for program and shader management, IO, XHR, JSONP, Web Worker management, effects, tweening, and much more.

“PhiloGL code is highly abbreviated compared to WebGL.”

PhiloGL is Open Source Software, licensed under the MIT license and owned by the Sencha Labs foundation. Sencha Labs is the Sencha foundation for non-commercial open source projects like jQTouch, Raphäel and InfoVis.

PhiloGL has complete API documentation with a detailed description of all the modules and class methods. Another very cool thing is that all Learning WebGL lessons have been ported into PhiloGL so that you can easily learn PhiloGL, WebGL or both at the same time. Here is a list of the ported “Learning WebGL” lessons.

PhiloGL code is highly abbreviated compared to WebGL. Here’s a quick example of the PhiloGL version of Lesson 11 from Learning WebGL.

 
//Create application
PhiloGL('canvasId', {
    camera: {
        position: {
            x: 0, y: 0, z: -7
        }
    },
    scene: {
        lights: {
            enable: true,
            ambient: { r: 0.5, g: 0.5, b: 0.5 },
            directional: {
                color: { r: 0.7, g: 0.7, b: 0.9 },
                direction: { x: 1, y: 1, z: 1 }
            }
        }
    },
    textures: {
        src: ['moon.gif']
    },
    events: {
        onClick: function(e) {
            /* write event handler here */
        }
    },
    onError: function() {
        alert("There was an error creating the app.");
    },
    onLoad: function(app) {
        //Do things with the application...
        //Add object to the scene
        scene.add(moon)
        //Animate
        setInterval(draw, 1000/60);
        //Draw the scene
        function draw() {
            //render moon
            scene.render();
        }
    }
});
 

In order to show how PhiloGL applications are made, I created three featured projects that deal with different aspects of data visualization. In order to see these examples you’ll need the latest Google Chrome and/or Firefox 4 beta. If you don’t have a WebGL capable browser then you’ll see a video showcasing the application.

Visualizing Temperature Anomalies

NASA collects annual data on temperature changes around the globe. This information has been collected since 1880 and tracks temperature anomalies (changes) at different points of the earth as a 2D heatmap. By loading these images into textures and then mapping them into a 3D histogram we are able to track the temperature changes around the globe interactively. Smooth animations between date ranges enable us to spot the overall differences in temperature across the years. Can you guess what the temperature changes will be for the next decade? Access the example

Real-time 3D color Histogram Analysis

Color decomposition of RGB or other color schemes can be illustrated using 3D graphics. In order to show the color decomposition of an image, we assign each dot on a 3D color histogram a different diameter. The following example renders fine grained and precise color decomposition schemes of each frame of a video in real time. Notice how the color varies on each frame. Feel free to change the color scheme or pause the video to have a closer look at the color decomposition. You can interact with the visualization by using drag and drop and zooming in/out with your mouse wheel. Access the example

3D Parametric Surfaces

Exploring 3D surfaces is a fun way to learn about geometry, physical phenomena or even terrain modeling. Parametric surfaces are surfaces that change their shape with an extra variable: time. You can explore 3D surfaces by using drag and drop and the mouse wheel to zoom in/out. You can enable the t parameter (by clicking on the checkbox) and hit play to see it move. There are three predefined surfaces for you to explore or modify. Access the example

Get The Framework

I hope these examples show what you can do with the framework and interest you enough to explore the code. I’ve had a lot of fun building and using PhiloGLand I can’t wait to see what you can build with it. Download PhiloGL here