Antti Kupila

Personal Blog, Portfolio and Online playground

Bryant Street, San Francisco, CA

The best use of 3d so far

I’ve got to say that I got this warm fuzzy feeling when I checked my RSS feeds today and saw the Red Bull Flightlab site mentioned on a couple sites. After checking out the piece myself I’ve got to say that it is hands down the best use of 3d I’ve seen online so far.

Red Bull Flugtag

redbull.com/flightlab

The biggest thing here is that it doesn’t feel like 3d is used just because it’s 3d, but for a reason. The rest of the site holds up to the high standard it sets too. As frosting on the cake the site supports deeplinking too and has a fully functional browser history. A big hand to Lessrain.

Read their blogpost about the creation too. Good stuff :)

My take on Hydra

Loads of new stuff has been happening. As you probably know, Adobe announced loads of more goodies for us at their Adobe MAX conference.

Native 3d support. Although it won’t be (most likely — according to Justin Everett-Church) hardware accelerated it will still mean that in a year or two we won’t see sites that don’t have 3d in them, in some form. I’m guessing the behavior is pretty similar to the basic 3d we see in After Effects today and that this will be an addition—not a replacement—to Papervision.

Improved text support. This one’s a big one. I don’t really need the right-to-left text, even if i can see it’s huge in other parts of the world, but support multiple columns and inline html tables — sweet! In addition you can build your own stuff on top of the api’s, extending the capabilities even more.

Custom filters, blend modes and fills. That’s right. Astro brings support for Hydra, a new pixel shader language that lets you build your own filters that will then run at native (same speed as blur, dropshadow etc) inside flash. Wow! This is pretty amazing. The possibilities that something like this brings us are pretty remarkable.

    The best part is that we don’t even have to wait to get our hands on Hydra, as you can download it from Adobe labs right now. I tried it out today and created a levels filter in Hydra which works (as far as i know) exactly the same as in Photoshop. Here’s the result on an image i took in Yosemite:

    Hydra levels

    Levels source code

    The language itself is very simple even if it’s pretty far from Actionscript (then again if you’ve used other pixel shader languages such as HSLS for Direct3D, you should feel right at home). I think the hard part is more about getting your head around the way a pixel shader works and thinking of the technique of what you want to do, not so much how to do it.

    Check out Aral Balkan’s post from Adobe MAX 2007, along with a video of Emmy Huang’s and Justin Everett-Church’s presentation. Also make sure you get some of your questions answered by Justin in the interview by Lee Brimelow.

    Flame - 3D music in Actionscript 3

    A couple days ago i happened to stumble upon a really cool 3d engine called papervision3d. It’s been out quite some time already, and i’ve heard of it before, but i’ve never really gotten to it to actually play around with it. Well, no i have - and boy, i love it. It’s amazing! Huuuge props to Carlos Ulloa + everybody else who have contributed to this magnificent open source project.

    This also gave me a reason to get back and play with as3 a bit again. Due to loadsa other stuff it’s been a while and i had already forgotten how great it is compared to as2 ;) Actually it’s not so nice working with projects in as2 anymore, but you’ve gotta do what you’ve gotta do ;)

    Anyway, flame. Or well, yeah, that’s what i wanted to call this experiment. Codename: flame maybe? Either way the first time i iTunes‘ CoverFlow i really liked it. In general i love pretty much everything Apple does visually, and CoverFlow was no exception. So i got my dose of inspiration pretty easily. Also papervision3d is so amazingly easy to work with (compared with the results) that i just had to sit up way too late a night or two, doing some nifty demos. At the same time we also had this technology specialization module at school, where we were supposed to do some technological individual project, so this fit in pretty nicely. I heard of the deadline pretty close to 24h before :)

    Well, you probably wanna see what i did? Sure.
    As it’s written in actionscript 3 the Flash 9 player required. A fast computer is recommended.

    Click to see flame live!

    So, what is it? When you start it, it asks for an artist. Type in something you like and flame will find similar artists, that you probably also will like. You can then browse the artists in a cool 3d interface using the arrow keys. The amount of artists is limited due to performance issues. Also the images look like crap because of the original low resolution (about 160px), sorry for that.
    All the data comes from last.fm, thanks! :)

    When you find a cover image that seems interesting, why not listen to a song or two? Alrighty, just press the up arrow (or enter) and you’ll enter listening mode, where flame will play short samples from a couple songs. If it’s all quiet, a sample for the artist you’ve chosen doesn’t exist (yeah i know, could maybe have some indication .. but hey, the version number is 0.1.1, can’t expect miracles). There are also a couple known bugs and probably several more that i don’t know of, but i’m guessing you understand this is just an experiment.

    As probably everybody who has worked with flash and external data knows crossdomain.xml is a bitch. I created a simple php script that acts as a proxy for the data, allowing flash to load the files (this means that every single image goes through my server, even if it comes from last.fm). Another pretty cool thing was the music. Last.fm doesn’t provide links to the mp3 files, so what i do is send the link to the artist’s page on last.fm to another script, which will screen scrape the page, find some stuff i need and out of it figure out what the url to the mp3 is. Works like a charm, as long as the artist has streamable music :) Big thanks to Joel Larsson for helping out with this one!

    That’s about it for an introduction, go play with flame and feel free to leave a comment or two.

    Oh, before you ask:
    Yes, the sourcecode will be released as soon as i’ve cleaned it up a bit and tweaked a couple small things ;)

    Update: the source is available here

    I hope you get inspired enough to do your own cool demos with papervision3d