Sencha Inc. | HTML5 Apps

Blog

Introducing PhiloGL: A WebGL Framework from Sencha Labs

January 01, 1970 | Nicolas Belmonte

WebGL 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

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

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

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

Written by Nicolas Belmonte
Nicolas is the creator of the JavaScript InfoVis Toolkit, a web standard based toolkit to create advanced data visualizations for the Web, and V8-GL, a hardware accelerated graphics library built on top of the Google V8 JavaScript Engine. Nicolas’s main interests are web standards and information visualization. You can find him blogging at thejit.org.

Share this post:
Leave a reply

There are 39 responses. Add yours.

Steven Roussey

4 years ago

Looks awesome!

ibnesayeed

4 years ago

I needed such a tool yesterday! grin

Jay Garcia

4 years ago

Dude!!!!  I think 2011 is the year you guys take over. >:D

Piet crombach

4 years ago

Waouw! Great stuff. I allready worked with Infovis. Now we have perfect tools to create fabuleous visualizations in ExtJs and Sencha Touch?? Apps.

Well done Sencha team.

Florian

4 years ago

Nice one! I like the spirit you guys are pushing new technologies on the web. I could never understand why other companies that have enough budget are not running a lab.

Best thing to do!

Keep it going dude

Javier Rincon

4 years ago

Nice, I will have to download the new firefox 4, on chrome/linux 10.0.648.82 doesn’t work…
I have to get inside it when i have time to but for now, Good Job guys!, Sencha is rock and rolling our work!

Thanks

Mats

4 years ago

Absolutely incredible…. smile

Crysfel

4 years ago

This is just awesome!! I’m going to give it a try when I have some time smile

rick

4 years ago

hey thats looks pretty cool.

Omiod

4 years ago

Can’t wait to give it a try!

Clement

4 years ago

Stunning.

Vishal Kumar Singh

4 years ago

Guuurrrrreeeeeaaaaat!!!!!!

Joeri

4 years ago

Looks great! Is this planned on feeding back into the standard Sencha product, or is this a personal project?

By the way, the parametric example (and a few of the other ones) doesn’t work for me on Chrome (win) 9.0.597.98. I can tell the CPU is getting used, but the canvas stays black.

Conor

4 years ago

Well done guys.  The productivity of Sencha never fails to amaze me!

Thomas

4 years ago

Just…... WOW!!!

Seb

4 years ago

Looks fantastic. JS Infovis and now this, you’re quite the productive developer Mr Belmonte.

Nicolas

4 years ago

@Seb Thank you!

@Joeri Thank you for your feedback. I’ve been discussing this bug and apparently windows shaders have a limited number of arithmetic operations that can be done (64) The explorer example has 90. This is not a library specific bug but more of a windows OpenGL support bug. I will try to address this ASAP. Thanks again!

Kevin

4 years ago

Not sure if it’s just me but it didn’t work on chrome (version 9.0.597.98) running on windows XP

Daniel Bang

4 years ago

This is VERY IMPRESSIVE!!! But I would suggest you to add those last 6 years to the “Visualizing Temperature Anomalies” example,...

Rob Boerman

4 years ago

Awesome! things like this in the browser is already mindblowing, but with such an easy interface it becomes feasible for a much bigger crowd.

You guys keep amazing me!

rey

4 years ago

plain and simply amazing… great work… I really would like to know more about this new project.

Leonardo J. Parra

4 years ago

Amazing work, congratulations !

Valentin

4 years ago

Realmente impresionante, felicitaciones.

Sebastien Hareng

4 years ago

Very impressive!

Greggman

4 years ago

Please don’t use setInterval or setTimeout for these kinds of apps. It’s bad for the web.

Use requestAnimationFrame instead.

See:
http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Nicolas

4 years ago

@Greggman We don’t use setInterval or setTimeout. We wrap requestAnimationFrame instead: http://senchalabs.github.com/philogl/doc/fx.html#Fx:requestAnimationFrame .

Omiod

4 years ago

Really impressive, I’ve already managed to make a simple game with this.
How do I enable the scene fog? The (very well done) documentation doesn’t talk about it.

Nicolas

4 years ago

@Omiod Wow awesome, would love to see it! There’s no scene fog for now, scene effects and picking are planned for the next version.

I’m very excited to see what kind of things you’re doing with it!

Omiod

4 years ago

The idea is to improve this: http://www.omiod.com/games/fastkat.php that is using the canvas renderer particles with Mr.Doob three.js
The circles are now replaced with 3D objects, naturally, and hopefully will add more gameplay elements.
But the fog FX is really necessary here smile

Nicolas

4 years ago

I’m working on it. I also recommend you to join the Google Group of the Framework: http://groups.google.com/group/philogl there we can discuss feature requests, bugs, etc.

Trinad

4 years ago

PhiloGL under EXTJS/Sancha sounds great. What about Internet Explorer users ?
We know that IE doesn’t support WebGL since it is main competitor of DirectX.
How does it support IE ? Question why I am asking is what is the purpose of introducing PhiloGL in Cross browser supported JS Framework like EXTJS/Sancha ?

Nicolas

4 years ago

@Omiod Fog has been added in version 1.0.2. You can check an example of using the fog in the Scene:constructor documentation examples:

http://senchalabs.github.com/philogl/doc/scene.html#Scene:constructor

Have a nice weekend!

Mike

4 years ago

Any chance of a scene graph on top of this?? smile

Very nice by the way - love the demos.

Omiod

4 years ago

Thanks a lot Nicolas! Here is the demo: http://www.omiod.com/games/fastkat_gl/alpha.htm just move the mouse around to avoid the asteroids.
There are some issue by the way, but for now the biggest one is that it doesn’t work in Firefox 4 beta 7 (I use mainly Chrome) but just now I’ve seen that you other demos have the same issue. Weird, I heard that FF4 supported WebGL ...

GK

4 years ago

Excellent initiative, however on Chrome 9.0.597.98 on Win7 several scenes do not work in philoGL but work just fine in normal WebGL such as Learning WebGL Lesson 16. The plain WebGL version works just fine but the philoGL version does not.

John Davis

4 years ago

This is the first frame work that seem to really nail it right.  Moving my WebGL demos to it.

Check this one out ...
http://www.pcprogramming.com/flight.html

Nicolas

4 years ago

@John Davis , That’s great, thank you very much! I’ve seen that example before, I think it’s featured on ChromeExperiments too, right?

@GK Thanks for the heads up, I will try to see what the problem is with these examples.

John Davis

4 years ago

Any plans for quaternions in the math lib?

Nicolas

4 years ago

@John Davis: I haven’t thought about it, but I can add quaternions if you need them though smile We can discuss this in the google group of the framework: http://groups.google.com/group/philogl .

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.