TERUG NAAR: Home > Artikelen > 3D-experts aan het werk 3D-experts aan het werk Visualiseer je producten met een 3D-animatie P roducten visualiseren met een 3D-animatie kan je website een extra dimensie geven en de productbeleving van de bezoeker vergroten. Deze maand kijken we mee met de totstandkoming van een 3D-animatie die Cyberfish Laboratories enige tijd geleden maakte in opdracht van Philips. De 3D-experts zijn Pieter van Lier en Ronald van Vemden. Auteur: Rogier Mostert (www.mostert.org) Bron illustratiemateriaal: Philips Afbeeldingen (c): Cyberfish Laboratories Voor de introductie van de Philips Rush MP3-speler werd Cyberfish Laboratories gevraagd om de speler in 3D te modelleren, te animeren en om deze animatie in verschillende webformaten beschikbaar te stellen. Het grote voordeel van 3D is dat je een object of situatie maar één keer hoeft te creëren om het van alle kanten te kunnen bekijken. De 3D-software berekent voor elke positie hoe de voorwerpen eruit moeten zien, inclusief zaken als schaduw en reflectie van licht op het oppervlak van het voorwerp. Animaties zijn dan vrij eenvoudig te maken. Cyberfish heeft voor deze opdracht het 3D-programma Lightwave gebruikt om het object te modelleren. Dit had ook Maya of 3D-Studio kunnen zijn, maar bij Cyberfish gaat de voorkeur uit naar Lightwave. Maak uw keuze: Stap 1: Modelleren Stap 2: Texturing Stap 3: Rendering Stap 4: Opstelling Stap 5: Animeren Stap1: Modelleren Het modelleren van objecten is een specialistisch klusje. Het uitgangspunt is uiteraard om dit zo realistisch mogelijk te doen. Een model kun je met 3D fotorealistisch nabootsen, waardoor het niet van echt is te onderscheiden. Voordat Ronald en Pieter met het modelleren begonnen hebben zij met een digitale camera de echte MP3-speler van alle kanten gefotografeerd. Ook zijn alle afmetingen van het apparaatje nauwkeurig bepaald. In het 3D-programma Lightwave kun je aan de hand van de zogenaamde viewports alles wat je maakt direct van diverse kanten bekijken. Je ziet dan het bovenaanzicht, vooraanzicht, zijaanzicht en eventueel het 3D-perspectief. Modelleren. (c) Cyberfisch Laboratories “De afbeelding van het bovenaanzicht van de player werd ingeladen in de juiste verhouding. Hierna konden we vrij gemakkelijk de hoekpunten bepalen en deze punten met elkaar verbinden. Je tekent als het ware de punten over. Zo ontstaan polygonen, gesloten vormen met een oppervlak. Aan de hand van polygonen kun je een compleet voorwerp maken. Nadat we de punten hadden verbonden konden we de hoeken afronden, waardoor een mooie afgesloten vorm ontstond. Hierna zijn we het oppervlak gaan vervormen, zodat de typische basisvorm van de MP3-speler zichtbaar werd.” “De volgende stap was om elk deel van het voorwerp een tijdelijke kleur te geven, zodat deze voor ons goed herkenbaar waren en we ze gemakkelijk konden aanpassen. Daarna voegden we de kleinere onderdelen toe, zoals de controleknoppen. Deze hebben we gecreëerd vanuit de basisvorm.” “Daarna hebben we de tekst PHILIPS aan het oppervlak toegevoegd. De bovenkant van de tekst is ‘gebevelled’. Er is een speciaal randje (facetrandje) toegevoegd, waardoor het licht in een later stadium mooi zal worden gereflecteerd. Zonder facetranden zien objecten er kunstmatig, hard (computerachtig) en dus niet realistisch uit. Hierna hebben we de resterende knoppen gemaakt en aan het model toegevoegd.” Nu werd het tijd voor de onderkant. “Vanuit de bottomview zijn we een uur beziggeweest om nieuwe onderdelen toe te voegen. Ook hebben we een aantal gaten in de zijkant gemaakt, waar later schroeven en pluggen in kunnen worden gezet. Sommige interne onderdelen zijn zichtbaar vanaf de buitenkant. Om te controleren of deze onderdelen op de juiste plaats zaten hebben we delen van het model in wireframeview bekeken. Een wireframe laat alleen de lijnen zien waaruit het voorwerp is opgebouwd. Tot slot hebben we de zijkanten gemaakt en alle onderdelen samengevoegd. De modelleringsfase was hiermee een feit.” Omhoog Tools De animatie is gemaakt met het 3D-programma Newtek Lightwave. Verder is er gebruik gemaakt van Macromedia Flash, Ulead Gif animator, Adobe Photoshop, Adobe Premiere en Swift 3D. Stap 2: TEXTURING “Om het object zo realistisch mogelijk te maken is het belangrijk om veel aandacht te besteden aan het oppervlak van het voorwerp. Elk onderdeel kreeg zijn eigen kleur, intensiteit van de kleur, reflectie en materiaaltoekenning.” Materiaaleigenschappen. (c) Cyberfisch Laboratories Omhoog Stap 3: RENDERING “Hierna renderden we het complete model voor de eerste keer. De computer berekent hiervoor alle benodigde gegevens en bouwt de afbeelding op. Dingen die niet kloppen vallen direct op en kunnen worden aangepast.” Opstelling. (c) Cyberfisch Laboratories Omhoog URL's Cyberfish Laboratories De uiteindelijke animatie van Cyberfish LightWave Stap 4: OPSTELLING “Nu was het tijd om het object op de juiste manier in de 3D-wereld te plaatsen. Hierbij plaatsten we diverse lichtbronnen in de wereld en voorzagen we die wereld ook van een camera waarmee we de MP3-speler zichtbaar konden maken. Het 3D-programma laat dan direct zien hoe het object er vanuit die camerahoek uitziet.” Rendering. (c) Cyberfisch Laboratories Omhoog Stap 5: ANIMEREN Een animatie is opgebouwd uit stilstaande beelden (frames). Als deze beelden snel achter elkaar worden getoond denken menselijke hersenen dat het om een (vloeiende) beweging gaat. Een vloeiende beweging ontstaat bij ongeveer 25 frames per seconde. Bij een 3D-animatie wordt de animatie gevormd door een serie gerenderde frames die achter elkaar zijn geplaatst. Als je dan één minuut video wilt maken, heb je daar al snel ongeveer vijftienhonderd frames voor nodig. Het zou ondoenlijk zijn om al die frames zelf te maken; hiervoor kun je zogenaamde keyframes gebruiken. Je geeft dan in het 3D-pakket een aantal keyframes aan (bijvoorbeeld de MP3-player van de voorkant en dan 90 graden gedraaid), waarna de software de tussenliggende frames automatisch berekent en voor je maakt. Dit bespaart je enorm veel werk. “Nadat we de juiste keyframes hadden geplaatst en de animatie naar onze zin was, zijn we de animatie gaan renderen in verschillende formaten. Voor de avi/mpg-animatie met de Player op de vloer en met koptelefoon hebben we raytracing gebruikt (een fotorealistische manier van rendering). Omdat het geheel is gerenderd in Lightwave 5.5 hebben we de plug-in Gaffer gebruikt voor een realistische weergave van de lampen en de intensiteit van de kleur van het materiaal, want Lightwave ondersteunt dit pas sinds versie 6.0. Tevens hebben we de plug-in Bloom gebruikt om een gloed rond de highlights te krijgen die het geheel net iets sprankelender maakt.” Animeren. (c) Cyberfisch Laboratories “Op Pal-formaat (720 x 576) rendert een 1.2 GHz AMD-computer 7 minuten en 33 seconden over een frame. De animatie is 320 frames lang, het renderen van de complete animatie heeft zodoende ongeveer veertig uur en dertig minuten op een CPU in beslag genomen. Voor de mpg op het web hebben we de animatie naar 320 x 240 geschaald in Premiere. Het renderen van de frames voor de Gif-animatie, Flash en QuickTime VR ging een stuk sneller, omdat ze een stuk kleiner gerenderd zijn, zonder raytracing en scherptediepte. Daarnaast bestaan die animaties maar uit een klein aantal frames (minder dan dertig frames per animatie).” “In zijn geheel zijn we ongeveer tien dagen met de animatie bezig geweest, inclusief renderen. Er is met name veel tijd gaan zitten in het converteren van 3D naar Flash, omdat het uiteindelijke bestand aan een aantal eisen moest voldoen, waaronder een maximale bestandsgrootte. De plug-in van Lightwave die de gerenderde bitmaps omzet naar Flash maakt niet echt economische Flash-bestanden, waardoor het nog een hele klus werd om het geheel beneden een bepaalde bestandsgrootte te krijgen.” “We hebben het eindresultaat dan ook handmatig moeten nabewerken in Flash. We hebben hiervoor het aantal punten in het model verminderd. Dit gaat ten koste van detail. De kunst is dan ook om een goed evenwicht te vinden tussen zo klein mogelijk qua omvang en zo mooi mogelijk qua beeld.” Omhoog Tips van de professional Ronald heeft een aantal tips op een rijtje gezet: 1.Houd van tevoren rekening met je kleurenpalet wanneer je een GIF-animatie maakt, zodat je uiteindelijk zo min mogelijk kleuren nodig hebt en een zo klein mogelijk bestand krijgt. 2. Verwijder de anti-aliasing langs de rand van je object wanneer je een transparante achtergrond gebruikt in je GIF-animatie (in Lightwave kun je hiervoor Bman’s Alphaclip gebruiken) of render met de achtergrondkleur die je uiteindelijk in je pagina gaat gebruiken. 3. Gebruik bij voorkeur geen 25 frames per seconde, maar 12 of minder. 4. Gebruik geen rare codecs die niet op de pc en Mac lopen. Wij gebruiken bij voorkeur MPG1- compressie – ondanks dat er tegenwoordig veel betere compressiemethoden zijn – omdat dit compatibel is met de meeste platforms en standaard loopt op de meeste besturingssystemen. 5. Houd rekening met bezoekers die geen kabel, ADSL of een andere breedbandverbinding hebben en houd je animaties zo klein mogelijk. Je kunt altijd een animatie in groot formaat en fantastische kwaliteit als alternatief aanbieden voor diegenen die veel geduld of een breedbandverbinding hebben. Oorspronkelijk verschenen in het tijdschrift Net Professional (juli/augustus 2002). Omhoog (c) 2004 - 2006 Rogier Mostert