{"id":165,"date":"2009-07-08T21:42:42","date_gmt":"2009-07-08T20:42:42","guid":{"rendered":"http:\/\/lqd.hybird.org\/journal\/?p=165"},"modified":"2009-09-01T16:03:57","modified_gmt":"2009-09-01T15:03:57","slug":"hardware-accelerated-effects-in-swing-with-jxlayer-and-decora","status":"publish","type":"post","link":"https:\/\/lqd.hybird.org\/journal\/?p=165","title":{"rendered":"Hardware Accelerated Effects in Swing with JXLayer and Decora"},"content":{"rendered":"

Update (August, 31st)<\/strong>: I released version 0.2 of this library, fixing a couple of problems, and adding the possibility of making your own custom pixel shaders. You can find the second part of this series on pixel shaders here<\/a>.<\/p>\n

The Olive Branch<\/h3>\n

A lot has been said about Swing and JavaFX recently, in a seemingly unending flame war between fans of each side. Both have merits and flaws, and as you’ve seen over time, i’m advocating a 3rd way, which i decided to pompously call The Olive Branch for no reason whatsoever, which is using the best of both worlds.<\/p>\n

The plan is to use, directly from java, scenario and decora -the graphics libraries that power the javafx runtime, and which i love probably more than my girlfriend, but don’t tell her (: – (btw if you don’t like crappy jokes, you better stop reading now, and grab a taco or something) . Of course, things have changed since their release, what was once an open source public API (albeit destined to change heavily) is now an internal proprietary one, which means danger, will robinson. So, the plan is to have the community build things that are so cool, and innovative, that Sun will allow us to do just that and make scenario\/decora public and usable from java, as they said they would, like with a jnlp extension or something. I think when things have stabilized a little, they’ll get to it. But at the moment, i have succeeded in doing that, at a level of 2% (and i’ve mailed Sun telling them everything i’ve done with scenario in the last 18 months – which is quite a bit in retrospect). Let’s see if we can crank that baby up.<\/p>\n

Introducing jfxlayer<\/h3>\n

I’ve started this a long time ago, i wanted to help people use scenario and decora in swing, not only in a pure scenario scene as with Scenile, but from regular, real world swing, because some tasks are better handled by scenario and decora, and vice versa. The best of both worlds. I never got around to releasing it because i haven’t gotten to a satisfying point in this endeavour (+ i’m lazy), i’ve just planned the whole shebang, and coded the first little step, how to use hardware accelerated decora effects in plain old swing. It’s like 30 lines of code, that i kept in sync with every JavaFX release. I’ll get to the other planned features eventually, in the meantime, here’s the result of this piece of work. Hopefully, it’s interesting enough for regular Swing java users, or more “exotic” ones, like them groovy folks (:<\/p>\n

It’s almost nothing code and work-wise. However, this opens a *huge* realm of possibilities for swing apps, and i hope you’ll see that too.<\/p>\n

The concept is simple: add decora’s effects to the BufferedImageOps effects that jxlayer allows.<\/p>\n

Decora. OpenJFX. JXLayer. JFXLayer.<\/p>\n

Decora ?<\/h3>\n

Decora is Chris Campbell’s baby, if you don’t know who that is, you can stop reading now, bye. This library is arguably the smallest, the easiest to use and most powerful one you’ll ever come across if you’re dealing with effects, image processing, and shaders. A decora effect is made with a JSL file (Java Shader Language) which is basically a mix between Java (in order to get\/set parameters and control the effect) and GLSL\/HLSL ie, a generic high level OpenGL\/DirectX shader language. This JSL file is then “compiled” (by a code generation utility) into a specific effect for each supported backend. The backends are mutually exclusive branches of code that target a specific architecture\/3D API, etc. Depending on your software and hardware configuration, decora will choose the backend that will perform the best on your computer, whether you’re on windows mac or linux for instance. You have a regular “software” backend in pure java, one using JNI, one targetting OpenGL, another one OpenGL ES2 for mobile devices, another one Direct3D, and one targeting Prism, the next gen JavaFX graphics renderer, which will allow 3D and more perf, which is about as far as everyone knows. Back in the open source decora days, i’ve also written a backend myself, which multithreaded the regular Java backend, so that effects would use all your available cpus\/cores.<\/p>\n

All that from one tiny JSL file, they really are small, check the old open source version you’ll see. For the user, it’s of course transparent, you create an instance of the effect you want, and use it, decora handles the rest behind the scenes.<\/p>\n

Sure, there aren’t that many effects yet (in fact there haven’t been any new ones since it was released, the work is done on the architecture, perf, backends, for the existing effects, which is very logical if you think about it) compared to, say, what Jerry Huxtable offers in his jhlabs filters library. In practice, it’s enough, for instance you have blurs and shadows, a perspective effect (think coverflow), color transforms, etc and a way to mix and chain all of the effects. If we had access to the compiler (or if we reverse engineered and forward ported that to the open source version) we could add new effects, but it’s not the case anymore. I think it’s doable if you really want it, especially for GLSL shaders which’ll be very interesting once Prism is released, if the compiler isn’t available at that time. I haven’t felt the need to create new effects until this week where i needed a better displacement effect than the one provided. So we’ll see how it goes but i’m not planning on doing it anytime soon.<\/p>\n

How do i use it in swing ?<\/h3>\n

Enough about decora. In your Swing app, use JXLayer, and use the JFXLayer effect bridge with stock decora effects. It’s very simple:
\n[sourcecode language=’java’]
\nBufferedLayerUI ui = …; \/\/ your regular JXLayer LayerUI
\nEffect decoraEffect = …; \/\/ your regular decora effect
\n\/\/ like GaussianBlur, Bloom, DropShadow, etc
\nui.setLayerEffects (new DecoraLayerEffect (effect));
\n[\/sourcecode]<\/p>\n

Compare that with using JOGL and pixel shaders directly as Romain did in the Filthy Rich Clients book (the sample is like 500 lines long, and which are mostly low level code for setting everything up for rendering, here it takes 5 at most, thanks Chris!)<\/p>\n

Demos. Finally! I’m as tired reading this awfully long blog post as you are writing it<\/h3>\n

I know you’re all about demos and eye candy, and today, i have 3 of them for you. Not one, but three, and if you call right now with your credit card number, i’ll add a set of Ginsu2000 knifes for only 3 easy payments of 9.99$, they can cut a shoe, you know ?<\/p>\n

Since this post is about hardware accelerated effects, you’ll obviously need a decent graphics card with up to date drivers.<\/p>\n

\"basicdemo\"<\/a><\/p>\n\"Launch<\/a>\n

The first one is pretty basic, it’s two buttons. Pushing each one starts an animation (using the same code that powers the eMotionBlur demo of last time) that progressively blurs the component (but remains live). The button on the left is using a jhlabs blur filter, while the one on the right is using decora’s one. At the default size, it’s really close, but maximize the window and you’ll see the difference, and possibly start to envision the possibilities this offers. Who knows maybe it can be used to power screen transitions (even though i’m still not fully satisfied with the perf yet – maybe Alexander Potochkin, or Dmitri Trembovetski can help us out here, pajalusta (or whatever it’s spelled in cyrillic (: – you’ll see it’s decent enough for me to release it) – Mark, you can keep us updated on that (:<\/p>\n

\"lockabledemo\"<\/a><\/p>\n\"Launch<\/a>\n

The second one is a modified demo from the JXLayer distribution, using the LockableUI, here also you can compare blurs. On my machine it’s almost instantaneous with decora.<\/p>\n

\"twimber2demo\"<\/a><\/p>\n

\"webstart\"<\/a><\/p>\n

And finally the 3rd one is a modified version of Twimber, my tiny twitter provider for Kirill’s great Amber project. I’ve hacked animated blooms, blurs, and color transforms into it in a matter of an hour, where it would have probably taken me days fiddling with jogl. Bear in my mind this demo is *heavy* with animated effects, and absolutely not optimized at all (for instance the repaints are too big, the effects target components that are too big, etc) and might run slowly (it does a little on my machine) or quite possibly crash your vm (which it does on another machine, probably a bug in my graphics card driver that crashes everything), plus there are some deadlocks somewhere between Amber and the latest releases of Trident, that i haven’t tried to remove, maybe Kirill can help us with that, if need be. If that happens, you can only close the webstart window by killing the process, sorry about that, guys.<\/del> Hopefully, we fixed the problem, it stll won’t be optimized though ^^<\/p>\n

Is it safe to use ?<\/h3>\n

Sure, using internal APIs is going to be a pain in the neck, it already has been for me. But, all in all, Decora’s API did not change much in the last 18 months, and especially not the effects’. And as the saying goes, no pain no gain. Plus they work fine with JavaFX 1.2 and JFXLayer right now, you don’t have to use the next version if you don’t want to have to modify them.<\/p>\n

Downloads and source<\/h3>\n

Update (August, 31st)<\/strong>: As mentioned earlier, I released version 0.2 of this library, fixing a couple of problems, and adding the possibility of making your own custom pixel shaders. You can find the second part of this series on pixel shaders here<\/a>. I didn’t change the code linked here for archive purposes though.<\/p>\n

You can find JFXLayer here<\/a> (zipped source project + demos<\/a>), and twimber2 here<\/a> (zipped source project).<\/p>\n

Let me know what you think, if the demos run well, or whatever in the comments, or sooner on twitter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to use Decora to add hardware accelerated effects to your Swing UIs, as usual with open source code and demos<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,5],"tags":[14,4,15],"class_list":["post-165","post","type-post","status-publish","format-standard","hentry","category-demo","category-java","tag-decora","tag-scenario","tag-swing"],"_links":{"self":[{"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=\/wp\/v2\/posts\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=165"}],"version-history":[{"count":23,"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=\/wp\/v2\/posts\/165\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lqd.hybird.org\/journal\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}