Flash in de derde dimensie

Flash en 3D hebben altijd al een moeizame relatie gehad. Bij elke nieuwe versie van de Flashplayer is de performance van de player verbeterd. Iedere keer weer proberen creatieve ontwikkelaars methodes te ontwikkelen om 3D-objecten zo soepel mogelijk wijze in Flash te tonen. Daarbij loopt men echter telkens tegen hetzelfde probleem aan: de performance van de Flashplayer. Flash is nu eenmaal gemaakt om 2D-vectoranimaties te tonen, de player maakt geen gebruik van een hardwarematige 3d-engine.

Om 3D-objecten te tonen in de Flashplayer moeten deze met of zonder hulp van Actionscript worden omgezet naar 2D-beelden. Of men kan beter gebruikmaken van alternatieven als Virtools of Shockwave die daar wel geschikt voor zijn. Maar ja, het aantal gebruikers en ontwikkelaars die Flash kennen, is nu eenmaal veel te groot om hen er allemaal toe te bewegen om van die alternatieven gebruik te maken. Het is dan ook niet langer nodig om Flash voor 3D-toepassingen links te laten liggen. Afhankelijk van het type 3D-toepassing natuurlijk.

Oldskool 3D
Stel, we willen dat de gebruiker een object (neem bijvoorbeeld een auto) 360 graden kan ronddraaien terwijl het verdwijnpunt op dezelfde plek blijft staan. In dat geval zouden we met behulp van een 3D-programma een reeks plaatjes kunnen laten renderen die alle verschillende hoeken tonen. Vervolgens importeren we deze genummerde plaatjes in Flash als een reeks. Flash plaatst deze plaatjes op de tijdslijn, achter elkaar, als een filmpje van een ronddraaiend object. Door dit filmpje voor- of achteruit te spelen beweegt het object links- of rechtsom.

Ondanks alle nieuwste ontwikkelingen is dit in veel gevallen nog steeds de beste manier om de meest realistische objecten in 3D in Flash te importeren. Maar dit is ook een methode met veel beperkingen. Ga maar na: een object dat gerenderd is in 360 verschillende hoeken van elk gemiddeld 50 kB maakt al een bestand van 18 MB! Beter is om het object iedere 5 graden te renderen, dat brengt zo’n object terug naar 3,6 MB. Als we dit object ook naar boven en onderen 360 graden willen kunnen bewegen, moeten we, uitgaande van 5 graden verschil per plaatje, in totaal 72 x 72 = 5184 plaatjes renderen. Dan hebben we het nog maar over één voorwerp. Toch is dit niet een methode om daarom maar direct af te wijzen. Wie kijkt naar de marionettenpoppen op comcastic.com ziet waarom: de performance en kwaliteit van deze 3D-marionetten zijn ongeëvenaard voor een interactieve Flashapplicatie. Dat komt misschien wel juist doordat er geen gebruik is gemaakt van een 3D-engine, maar van geïmporteerde plaatjes die gerenderd zijn door een 3D-programma.

Papervision 3D
Sinds de Flashplayer 9 en Actionscript 3 beschikbaar zijn, is de performance van de Flashplayer een stuk sneller geworden. Dit is vooral te merken bij projecten die gebruikmaken van de 3D-engine Papervision 3D. Dit is zonder twijfel het ‘heetste’ open-source Flash-project van het moment. Bij het vierkoppige ontwikkelteam van Papervision 3D zijn twee Nederlanders betrokken: Ralph Hauwert en Tim Knip. Papervision 3D is feitelijk een set classes die met het project mee geïmporteerd moeten worden en de ontwikkelaar een methode bieden om 3D-omgevingen en -voorwerpen te bouwen. Er is ook een Papervision 3D-component gemaakt voor wie de standaard interacties als ronddraaien voldoende zijn. Om de kracht van Papervision 3D te ervaren kunt u het best de vele voorbeelden bekijken die te vinden zijn op de blog van de ontwikkelaars: blog.papervision3d.org. Er zijn eenvoudige ‘walkthroughs’, 3D-objecten met schaduweffecten, panorama’s en andere toepassingen te vinden die allemaal schermvullend en soepel lopen.

In Papervision 3D zitten standaard 3D-vormen ingebouwd, zoals een kubus, een bol en een cilinder. Dergelijke vormen bestaan uit een verzameling van aan elkaar geschakelde driehoeken. Deze basisvormen kunnen als lijnen, met kleurvlakken of met een bitmapafbeelding worden gevuld. Maar de werkelijke kracht van Papervision 3D zit in de mogelijkheid om Collada-bestanden (.DAE) te importeren. Collada is een open standaard die door de meeste 3D-programma’s wordt ondersteund als exportoptie. Zo niet, dan biedt de gratis plug-in die mogelijkheid.

Handelingen
Om een 3D-object te importeren in Flash met behulp van de Papervision 3D-component, dienen in het kort de volgende handelingen te worden verricht:

Maak of gebruik een model met zo weinig mogelijk details; hoe meer detail, hoe trager. Pas naar believen structuur en kleur toe met een UWV-modifier, de bekleding van het model.
Importeer dit model in Photoshop CS 3 extended. In Photoshop kun je dit 3D-model van extra details voorzien via 3D-layers.

Exporteer het geheel naar Collada (.DAE)
Open Adobe Flash CS3 en plaats de Papervision-component op de stage.
Bewaar dit document en geef in het PV3D-panel de padnaam van het document aan en de naam van het DAE-bestand dat je wilt importeren.

Als dit alles goed is gedaan, heb je in Flash een 3Dmodel geïmporteerd dat met behulp van de component is te verdraaien of te verplaatsen. Papervision 3D biedt naast de component natuurlijk ook nog veel meer mogelijkheden. Om deze te ontdekken kun je het best naar wat voorbeelden online kijken. Deze zien er al direct heel indrukwekkend uit, maar bedenk dat je al snel tegen de limieten van de Flashplayer aan zult lopen met Papervision 3D. Een eenvoudige walkthrough of een eenvoudig object in de ruimte zijn uitstekend te realiseren, maar meerdere zeer complexe modellen met veel punten maken de movie helaas al snel traag. Desalniettemin is er met Papervision 3D in combinatie met Actionscript 3.0 een 3D-omgeving of -spel te maken die voorheen ondenkbaar waren om te realiseren in Flash. Deze open-source engine is via blog.papervision3D.com te downloaden.

Flashplayer 10
Tijdens de conferentie MAX 2007 in Chicago heeft Adobe een tipje van de sluier opgelicht wat we van de nieuwste Flashplayer, versie 10 of ‘Astro’, kunnen verwachten. Een van de meest in het oog springende nieuwe features is de ondersteuning van 3D. Zo zal het eindelijk mogelijk zijn om movieclips in perspectief te vervormen. Deze Flashplayer zal bovendien 3D hardwarematig gaan ondersteunen. De demo liet zien dat het mogelijk wordt om objecten te roteren met behulp van veranderende waarden van rotationX, rotationY en rotationZ. Papervision 3D gebruikt een vergelijkbare syntax. Het is echter niet zo dat het Papervision 3D-team betrokken is bij de ontwikkeling van het 3D-gedeelte van ‘Astro’.
Een andere vernieuwing aan de Flashplayer 10 is de ondersteuning van custom-made filters, blends en vullingen. In combinatie met de toekomstige 3D-ondersteuning wil dit zeggen dat het mogelijk wordt om structuren op 3D-vlakken geheel in Flash te plaatsen, zonder gebruik van externe graphics. Deze verbeteringen zullen Flash ongetwijfeld weer een stukje dichter bij het doel brengen waar het op afstevent: een applicatie waarmee ook wat uitgebreidere 3D-games, die soepel in de browser afspelen, gemaakt kunnen worden. Adobe kon ons helaas nog niet vertellen wanneer de nieuwste versie van Flash gereed zal zijn. Aangezien dat nog wel even kan duren, kunnen we ons in ieder geval alvast gaan storten op Papervision 3D.