HDR Lighting in FP10 (+ Away3D)

hdrIf you’ve played any video games the past few years, you’ve definately seen the HDR (High Dynamic Range) effect. Creating a more brilliant colour spectrum, it’s both popular in photography and 3D rendering. In games it typically enhances the brighter areas and makes light spill over into darker areas (the so called light blooming effect). Using some settings, it can also create a more blurry atmospheric surrounding. Being a big game fan (or rather gfx-fetishist), it’s an effect I’ve always wanted to do. Using a tiny Pixel Bender kernel and some Flash filters, I came up with this.

A demo showing the effect and its parameters on a simple image can be seen here: Demo | Source .

But let’s face it, when doing HDR, we want it in 3D ;) Rob Bateman kindly gave me permission to use his shader demo for Away3D (a 3D engine I’m growing more and more fond of). This demo in particular suited the use of HDR perfectly, so many thanks! I just added the HDRContainer class to the stage, setting the View3D as the target, and voila!

See HDR in Away3D (compare with the original to see the difference)

No source for that one tho, as 1) it’s not my demo (apart from 2 extra lines of code), and 2) it’s pretty much the same as the first demo :)

It should be similar to use the effect on any DisplayObject, for that matter: pass it through to the HDRContainer’s constructor and add the HDRContainer to the stage.

21 thoughts on “HDR Lighting in FP10 (+ Away3D)

  1. Mr.doob: Hehe first I’d like to see fullscreen action websites and games in general :D
    Katopz/Piergiorgio: Yeah, the version detection hickups now and then it seems. The latest version of Flash should do it. It might also be the server being slow so loading takes a while… I’ll have to stop being lazy and create preloaders :D
    Hamferus: True enough. That’s why I provided a mapScale parameter, so the Pixel Bender filter would operate at a lower scale (it can be scaled down a lot for most purposes, depending on the amount of blur used). Also, using less intense scenes should make the HDR faster as well.

  2. I have an interest to see it, but my opinion: it is not for commercial web sites )). Now I am in experiments with PV3D. David, are you saw an documentation for papervision? I have saw no one ))
    Sorry, if my english so bad ))

  3. Foreground: as far as I know, there is no documentation on Papervision3D 2.0 yet. Best option is to check on their mailing list, tho.

    Makc: That’s more or less the way it should be, since you’re standing in a relatively dark room compared to the light coming from the outside. This way the bright light in the doorway will bleed over unto the bust.

  4. It can be used that way, especially in photography (since you have the opportunity to capture an image with different exposures). However, an important aspect of HDR in real-time is the bloom effect, which I wanted to emphasize for this experiment (I only work with brightness in this case). By tweaking the parameters, you can create different results tho.

  5. mmhhh, i wa strying to make it work in flash cs4 (AS3) with an array of textures, but no luck yet implementing ur functions… can i have some light? (or a code in pure as ^^)

  6. somebody? im using the svn of the flash 10, the flex 3.0 and trying to make the same exmaple, ilet me show u: “…I just added the HDRContainer class to the stage….” ok i go with import com.derschmale.hdr.*; after that
    “…., setting the View3D as the target, and voila” i use

    function HDR():void
    {
    hdr = new HDRContainer();
    addChild(hdr);
    return;
    }
    but the errors keeps coming… the last one i got was in abstractrendersession.as, not found the time or its not an variable in runtime compilation:vector, so i said WTF?, sorry im lost in this example can plis someone help me out?

  7. i mean:
    function HDR():void
    {
    hdr = new HDRContainer(view);
    addChild(hdr);
    return;
    }
    where view is the View3D defined in the example of the living legend of Rob…

  8. Hi Desgraci,

    Sorry for the late reply, I’ve been busy :)
    You don’t need the FP10 branch for Away3D, you can just use normal version just as well (in fact, the HDR works on any DisplayObject, it’s not limited to 3D or Away3D in particular). Make sure you’re not adding the View3D to the stage before adding it to the view, set the brightnessThreshold, exposure and blur properties of the HDR class, and finally call hdr.render(); This last step is important and should be called any time your view changes.

    Hope that helps! :)
    Cheers,
    David

  9. D: You don’t need the FP10 branch for Away3D, you can just use normal version just as well (in fact, the HDR works on any DisplayObject, it’s not limited to 3D or Away3D in particular).

    You were right the new error was because the version, with the old fashion np ^^. Now i only got the white scene with the logo (yippie at least something), that brings me memories when i was starting :D, checked

    D: Make sure you’re not adding the View3D to the stage before adding it to the view,

    in the initEngine() i dont add the scene, checked

    D: set the brightnessThreshold, exposure and blur properties of the HDR class,

    (view, 0.5, 1, 40), checked

    D: and finally call hdr.render(); This last step is important and should be called any time your view changes.

    something like this i think…
    function onEnterFrame(event:Event):void
    {
    camera.hover();
    view.render();
    hdr.render();
    }

    uff, after all that i still get one last message,

    TypeError: Error #1007:Tried to create an instance in a no constructor type at HDR();

    to be honest i havent sleep, so if someone knows how to fix ill appreciate it, brain collapsed for now…

  10. Be sure you’re not calling new on anything but a class. This type of vague errors can occur runtime when you’re not strongly typing your variables, so the compiler cannot catch it.

  11. lol, all my work transcoding, now it’s for nothing :..(, now, if they got that in away3d, do i have to pay for using the code in my business???

  12. Really nice.

    I’m trying to make a high dynamic range spherical stiched panorama renderer in as3, i’ll have a look at ur code :)

  13. Pingback: HDR and BLOOM in AS3 « Dobos Bence

Leave a Reply

Your email address will not be published. Required fields are marked *