Tuesday 14 October, 2008

Bitmapdata == 201% coolness: World 360


Sommigen die mij op Twitter volgen weten zonder twijfel wat ik bedoel als ik het over ‘world 360′ heb. Degenen die dat niet weten: Welkom in een trip door mijn absoluut geschifte brein.
De term World 360 heb ik in feite gewoon bedacht/gekozen omdat we van een 360 graden panorama foto een ‘wereldbol’ maken.

Op MultiMania 2008 heb ik Group 94 gezien, en hebben ze enkele van hun projecten en trukjes blootgelegd. Een behind the scenes van het waarschijnlijk meest gerenomeerde webdesign- en multimedia bedrijf van België (volgens mijn bescheiden mening). Ze lieten onder andere de Nokia – Non Stop Living site zien; een site waar ik al langer van wist. Ik was altijd compleet onder de indruk van de effecten en transitions die deze site te bieden heeft.

Lange tijd heb ik me afgevraagd hoe alles in zijn werk gaat. Op een dag wou ik het weten en begon ik m’n hoofd te breken in Flash en Actionscript 3. Op MultiMania wist Julian (Group 94 member) te vertellen dat de ‘intro animatie’ on-the-fly opgebouwd werd (aan de hand van ActionScript). Ik vond dat best wel een gewaagde zaak, aangezien het toch veiliger was geweest als men die intro had gerenderd, en dan als video had gebruikt in het project.
Maar voor mij maakte dat opeens allemaal niet meer uit: Ik wou het ook voor elkaar krijgen.

Ik heb hiervoor verschillende keren moeten herbeginnen. Maar stap voor stap kwam ik dichterbij wat ik wou bereiken. Ik dacht eerst dat het grootste probleem het ‘in stukken knippen’ ging zijn. Maar dat bleek niet waar te zijn. Integendeel: Dat was zelfs erg makkelijk. Het werd pas moeilijk als ik de individuele onderdelen wou gaan animeren. 360 bitmaps bijna simultaan tweenen is niet bepaald processor vriendelijk, zo bleek.

Eens ik daar geraakt was, was ik al vrij tevreden: het uiteindelijke effect was er al. Nu alleen nog wat machinevriendelijker maken. Maar daar was het probleem. Ik bedacht mij of er geen mogelijkheid was om on-the-fly een sequentie aan beelden te maken. Al vlug gaf ik het idee op, en ben ik nooit aan de code begonnen. In mijn hoofd zag ik namelijk het RAM geheugen door het dak gaan.

Enkele weken later las ik op Keith Peters’ blog dat Julian van Group 94 het effectief op die manier had aangepakt. Ik moest het dus ook proberen op die manier… En wat bleek: Het werkte! (DUHH!)
Ik kreeg het voor elkaar om de animatie te pre-renderen en daarna te laten weergeven. Het resultaat was één smooth-as-fuck animatie. Enige probleem: het RAM geheugen leidde er (zoals ik had voorspeld) echt onder. 900-950MB voor de 380 frames van de animatie.

Ik heb er lang op gezocht, maar de sleutel tot succes bleek gewoon een wat kleinere bitmap te zijn. Door de afmetingen van de bitmaps deels aan te passen slaagde ik erin om 600MB af te knippen. Het resultaat gebruikte 250-300MB, een veel redelijker getal.

Ik ben al erg fier op het gehaalde resultaat. Hieronder kun je de verschillende fases van mijn vooruitgang zien. Ik was van plan om de bron hiervan vrij te geven, maar ik wil het nog even voor mezelf houden om zelf nog wat meer zaken uit te pluizen. ;)

Basic versie: Twee.
Real time animation versie: Zeven.
Full blown prerendering (kan je browser crashen indien tekort aan geheugen): Acht.
Optimized prerendering: Negen.

De volgende stap is nu om te zien hoe Julian en zijn collega’s deze ronde wereld laten ‘openplooien’ tot rechte wereld…  Lijkt me allemaal nog net iets gecompliceerder te worden nu…

PS: als iemand een leukere panorama afbeelding te bieden heeft: aarzel niet om suggesties te posten. Ik ben de huidige zowat beu gezien ;)


Related Posts


Bezier animation fun!
Actionscript, Experiments
Webcam motion detection coolness
Actionscript, Download, Open-source
Visualizr source
Actionscript, Flash

2 Comments

  • Gov says:

    I still don’t get the point in putting that amount of work just to mess up a panoramic image into a ball, basically. However, I understand the programming challange going on here :-)

    http://www.flickr.com/photos/geek7/2874745723/in/pool-autopanopro and here http://www.autopano.net/forum/f4-gallery-galerie

    btw, Autopano is a great tool for stiching photos together into a ‘real’ panoramic image!

    And here’s the point I want to make: since you’re a little into photography yourself, why don’t you snap your own 360° pano image to work from?

    ;-)
    Greetz!

  • Ronny says:

    The obvious answer to ‘why’ would be ‘because I can’ ;)

    Thx for the links. I’ll look into those. Might just be what I’m looking for :)

    Taking a 360° pano image seems harder to me, than I can possible guess. The problem is that I don’t want to have a ‘hole’ in my ‘world’. So the camera needs to rotate around (not on) a certain point. I’ll have to look into how I’ll do this.

    Any suggestions on this are more than welcome :)
    Thanks!


Trackbacks and Pingbacks

Leave a Comment


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>