Geschreven door Jonny Kievits op 22-3-2017
Om de zoveel jaar ontstaat er een nieuwe trend op het internet op websites en pagina’s interessanter, leuker en interactiever te maken. Afgelopen jaren zagen we hier de opkomst van vele verschillende JavaScript Frameworks, waarvan ReactJS en EmberJs voorbeelden van zijn. Maar dat niet alleen. Ook op visueel gebied waren er trends waarneembaar. Van draaiende titels in nét niet vloeiende gif animaties tot websites volledig in flash gebouwd. Er is veel gekomen maar ook weer veel verdwenen.
Vandaag zijn we beland in het tijdperk van de interactieve 3D animaties.
Moeten we nu allemaal onze website ombouwen tot een veredeld computerspel?
Hoewel mijn inwendige nerd meteen keihard JA! schreeuwt, lijkt het me in de praktijk niet handig om je al rennend door een spelwereld van zoekresultaten te vechten. De kracht van deze techniek zit ‘m juist in de subtiele toepassing; een product in een webshop van alle kanten bekijken alsof je hem in je handen hebt. Of een meubelstuk in een kamer waarbij je vervolgens de stijl van deze kamer kunt aanpassen naar je eigen stijl. Zeker wanneer je een fotorealistische setting kan creëren, waarbij je het product van alle kanten kan bekijken, kan dit een positief effect hebben op de koopkracht.
De techniek die hiervoor wordt gebruikt heet WebGL en wordt al sinds een paar jaar ondersteund door alle grote browsers. Doordat deze techniek inmiddels volwassen is geworden en de interesse hierin door grote spelers als Microsoft en Intel, wordt de toepassing steeds bereikbaarder en is de integratie niet anders dan een video, een plaatje of een ander effect toevoegen aan een website. Als ontwikkelaar is affiniteit met 3D en een goede kennis van JavaScript wel vereist.
Voorbeelden
Er zijn legio voorbeelden beschikbaar van goede implementaties. Eén van de beste voorbeelden die de afgelopen tijd ben tegengekomen. is er een van Microsoft. In het Xbox Design Lab kan je een controller naar persoonlijke voorkeur samenstellen. Er wordt een 3D model van die controller getoond in de door jou gekozen kleurstelling. Bij iedere kleurkeuze verandert de controller en bij iedere configuratie optie wordt de controller dusdanig gedraaid dat ieder detail goed zichtbaar is. Uiteraard is het mogelijk om de gepersonaliseerde controller van alle kanten te bekijken.
Een ander, iets uitgebreide toepassing is de Molecube designer van Fatboy. Hiermee is het mogelijk om naar wens een hele kast samen te stellen.
The Kabisa Jar
Voor een iets technischere blogpost op The Guild heb ik een voorbeeld gemaakt. Dit is een eenvoudig model van een vaas waarin naar wens ballen in allerlei kleuren toegevoegd kunnen worden.
Zoals je ziet is deze animatie volledig geïntegreerd in deze pagina, alsof het een plaatje is, maar dan volledig interactief.
Nadelen
Vooral de langzamere mobiele apparaten zullen moeite hebben met complexere 3D modellen waardoor animaties haperig kunnen gaan. Mijn persoonlijke ervaring is dat het in de praktijk wel meevalt wanneer een 3D model goed opgebouwd wordt. Uiteraard is alles relatief en kunnen we in ieder geval met zekerheid zeggen dat een 3D animatie in de regel meer kracht kost dan het tonen van een plaatje of een video. Daarnaast kan er bij mobiele apparaten die niet snel genoeg zijn, ook altijd nog automatisch terug worden gevallen naar een video of afbeelding die wel goed werkt.
Daarnaast moet de browser ook de hele 3D engine downloaden voordat de afbeelding getoond kan worden. Met een dikke anderhalve MB is BabylonJS zeker niet de kleinste. Copperlight (ook een open source alternatief) doet het met zijn 400Kb een stuk beter en grote concurrent Tree.JS heeft staat er met ‘slechts’ 500Kb beter voor maar het blijven flinke happen code.
Verschillende engines
Over het algemeen wordt BabylonJS beschouwd als (een van) de beste open source 3D engines beschikbaar en gezien het aantal grote spelers dat er gebruik van maakt is het eenvoudig aan te nemen dat het op zijn minst tot de betere behoort.
Een eerder genoemd alternatief is ThreeJS. Functioneel lijken beide erg op elkaar. De focus van BabylonJS ligt echter meer op de vergelijkbaarheid met een traditionele 3D spel engine met alle opties die daarbij komen kijken. Een ander interessant alternatief is Blend4web. Wellicht door de licentiestructuur — GNU / broncode van het project waarin Blend4Web gebruikt is moet gedeeld worden — niet geschikt voor ieder project maar het pretendeert een volledige integratie met Blender te hebben. Daartegenover staat dat de licentiestructuren van ThreeJS en BabylonJS een stuk meer vrijheid bieden voor gratis gebruik.
3d in Mobiele App
Maar hoe zit het dan met 3D in mobiele apps? De apps die door Kabisa worden ontwikkeld zijn cross-platform. Dit wil zeggen dat een app maar één keer ontwikkeld hoeft te worden voor verschillende platformen (Windows Phone, Android en iOS). Voor de ontwikkeling apps maken we gebruik van het FrameWork Maji Mobile. Maji maakt het mogelijk om gebruik te maken van WebGL-toepassingen in een mobiele app. Eerder schreven we al eens dat Kabisa gebruik maakt van een Mobile App Toolkit voor het ontwikkelen van mobiele apps. Het integreren van 3D toepassingen in mobiele apps is ook onderdeel van dit toolkit. De belangrijkste voordelen van 3D integraties in een app wanneer deze wordt ontwikkeld in Maji Mobile:
- De app hoeft maar één keer te worden ontwikkeld en werkt voor verschillende platformen. Er is geen native development per platform nodig voor 3D.
- Omdat dit alles maar één keer hoeft te gebeuren én dat het in WebGL minder complex is, zorgt voor een kortere ontwikkeldoorlooptijd en maakt daarom de app ook nog eens goedkoper!
Conclusie
WebGL en daarmee 3D animaties worden steeds bereikbaarder. Met name door de uitgebreide ondersteuning in moderne browsers en de komst van betrouwbare en feature rijke 3D engines als BabylonJS wordt de implementatie ervan ook steeds eenvoudiger. Er is nog steeds specifieke kennis nodig om een goede integratie te maken en ook het opmaken en ontwerpen van een 3D element of een volledige scène is het werk van een specialist. Kabisa beschikt over deze kennis en kan uw bedrijf verder helpen met het integreren van (interactieve) 3D animaties op uw website. Ook kunnen we dezelfde techniek toepassen bij het ontwikkelen van een mobiele app.
Overweeg je om 3D toe te voegen aan je website, webapplicatie of mobiele app? Ben je nieuwsgierig geraakt naar de mogelijkheden? Informeer eens bij Kabisa, wij helpen jou en je organisatie graag op weg!
Vragen?
Heb je vragen naar aanleiding van dit artikel? Neem gerust contact met ons op!
(of stuur een bericht)+31 495 430 798
Jonny Kievitsstuur bericht