ExtJS, Adobe AIR and PixelBender technology - beautiful, you will not say anything!

For a long time, something new about ExtJS did not appear, apparently everyone is preparing for the announced conference ( I already wrote about this ), and those that remain in comfortable home chairs are ready for the announcement of ExtJS 3.0. But today, having looked at the official blog of the company, I found an interesting note . As you already know, in the latest versions of ExtJS they began actively introducing support for the Adobe AIR platform , which cannot but rejoice, because it is the symbiosis of these two amazing tools that can, in skilled hands, of course, give excellent results.

In Flash 10, and therefore in Adobe AIR 1.5, it was in its flash part that an interesting technology was introduced, in fact, full control of everything displayed on the screen - PixelBender. Using a special programming language GLSL (OpenGL Shading Language), a developer can describe operations on pixels, while the program can be applied not only to a picture, but to any flash object, including a whole window or web page. By the way, yes, you heard right, we are talking about OpenGL, and this brings us close to the possibility of creating serious graphical applications, using only tools common for web development. If anyone understands 3D, then this technology is very close to pixel shaders, which are also programmed in their own languages.

But how, excuse me, is this related to ExtJS? Yes, very easy! If you are using special toolscreate a description of your own PixelBender function, then you can very simply apply it to objects created in ExtJS (Ext.air. * package). To demonstrate the collaboration of both technologies, Pixel Bender Explorer has been released , showing a number of effects that apply to a video, graphic, or window created by ExtJS. You can flexibly change the parameters of effects and view their result in real time.

The effects can be completely different, in the proposed demo package there are several dozens of them, both produced by Adobe itself and the work of other developers. It is interesting to take just the third of the proposed options - Demo with Browser, then a new window will be created (mind you, using ExtJS), in which the Google home page will be opened. And then - then simply choose any effect in the list and see what happens to the window, while noting that it is the entire window that is transformed, not just its contents! But even distorting it almost beyond recognition, the page is still workable, you can enter text in a window, click on buttons and even work. This means that the operation is visual and occurs after the complete formation of the page, leaving all the functionality in place.



And an example of this is very simple (for those familiar with Ext): Why can I use such a tool? Well, the simplest example is a beautiful splash-screen when starting your AIR application, although this is too superficial an example. The ability to flexibly control each pixel can be used to develop various graphic applications, entertainment (albums with transitions, etc.), and what prospects open up in game projects is simply breathtaking. So the guys with ExtJS are great for trying to unleash and utilize the power of the Adobe AIR platform to the maximum!

var win = new Ext.air.NativeWindow({
file: '../html/browser.html',
transparent: true,
chrome: 'none',
width: 640,
height: 480
});
win.animFn({
paramName: 'amount',
reset: true,
startValue: 5,
endValue: 0,
duration: 1,
mode: 'easeOutStrong',
url: 'app:/kernels/smudger.pbj'
});
win.bend();





By the way, there is a wonderful resource for developers, Pixel Bender Exchange, where you can download or buy the necessary filters, because this technology began its work much earlier than AIR, having been tested in professional multimedia processing packages such as After Effects and Photoshop. By the way, I really, really want to answer yes to the question - is it possible to make "on-line Photoshop" in this way? ..