Three.js: hoe een JavaScript-bibliotheek 3D naar de webbrowser bracht
Wie tegenwoordig op een website door een 3D-model van een schoen draait, een virtuele showroom bezoekt of een interactieve kaart met gebouwen in 3D bekijkt, gebruikt vaak zonder het te weten een stukje techniek dat Three.js heet. Het is geen app en geen los programma, maar een gereedschapskist voor webontwikkelaars: een verzameling kant-en-klare bouwstenen waarmee ze driedimensionale beelden - kubussen, landschappen, personages, gebouwen - rechtstreeks in een webbrowser kunnen laten zien, zonder dat de bezoeker iets hoeft te installeren.
Een vergelijking maakt het duidelijker. Stel je voor dat je een huis wilt bouwen: dat kan met losse bakstenen, cement en balken helemaal vanaf de grond, wat veel vakkennis vraagt. Of je gebruikt een bouwpakket met voorgevormde muurdelen, kant-en-klare kozijnen en een handleiding. Three.js is zo'n bouwpakket, maar dan voor 3D-graphics op het web. De "losse bakstenen" waarmee het werkt, is een ingewikkelde technische laag van de browser zelf, genaamd WebGL. Three.js maakt die laag toegankelijk voor gewone webontwikkelaars, zodat zij zich kunnen richten op het ontwerp in plaats van op de onderliggende wiskunde.
Wat is het precies?
Om 3D-beelden op een scherm te tonen, moet een computer voortdurend berekenen hoe licht, vormen en camerastandpunten samen een plat beeld opleveren - dat gebeurt tientallen keren per seconde om beweging vloeiend te laten lijken. Deze berekeningen worden uitgevoerd door de grafische chip van een apparaat, de GPU (graphics processing unit), die daar veel beter in is dan de gewone processor.
Browsers kunnen bij die GPU via een standaard genaamd WebGL (Web Graphics Library), beheerd door het internationale standaardenorgaan Khronos Group. WebGL is krachtig, maar ook notoir lastig: ontwikkelaars moeten met de hand "shaders" schrijven (kleine programmaatjes die bepalen hoe elk beeldpunt eruitziet), matrixwiskunde beheersen en veel technische boekhouding bijhouden.
Three.js, in 2010 gestart door de Spaanse ontwikkelaar Ricardo Cabello (bekend onder zijn schuilnaam "mrdoob"), verbergt die complexiteit achter simpele bouwstenen. Een ontwikkelaar maakt een scene (het decor), plaatst daarin objecten met een vorm (geometry) en een uiterlijk (material, bijvoorbeeld hout, metaal of glas), zet er een camera bij om vanuit te kijken en een licht om schaduwen te laten vallen, en laat een renderer dit alles omzetten in een bewegend beeld. Wat vroeger honderden regels technische code kostte, past nu vaak in enkele tientallen regels.
De bibliotheek is geschreven in JavaScript, de programmeertaal die in elke webbrowser standaard werkt, en is dus direct bruikbaar op websites zonder aparte plug-ins of installaties - iets wat vroeger, met technieken als Adobe Flash of Java-applets, wel nodig was.
Wat wil men ermee bereiken?
Het achterliggende doel is simpel: 3D-content net zo gewoon en toegankelijk maken op het web als tekst en platte afbeeldingen dat al waren. Voor het bestaan van WebGL en Three.js was interactieve 3D op internet zeldzaam en technisch omslachtig; het vereiste vaak losse software of browserplug-ins die niet overal werkten en beveiligingsrisico's met zich meebrachten.
Door 3D rechtstreeks in de browser mogelijk te maken, opent zich een breed scala aan toepassingen: productconfiguratoren waarin klanten zelf kleuren en materialen kunnen kiezen, wetenschappelijke datavisualisaties waarin je letterlijk om een dataset heen kunt "lopen", virtuele museumzalen, browsergames, architecturale doorlopen en kunstprojecten. Omdat het open source en gratis is, verlaagt Three.js bovendien de drempel enorm: een individuele ontwikkelaar of klein bedrijf kan zonder licentiekosten aan de slag, terwijl vergelijkbare 3D-technologie vroeger vaak dure, gespecialiseerde software vereiste.
Een ander doel is duurzaamheid van het web als platform: doordat alles in de browser draait en meteen deelbaar is via een link, hoeft niemand een aparte applicatie te downloaden of te updaten. Dat past bij de bredere ambitie van het open web: functionaliteit die vroeger was voorbehouden aan native apps, beschikbaar maken via een simpele hyperlink.
Voorbeelden uit de praktijk
Three.js heeft in ruim vijftien jaar een breed spoor van bekende projecten achtergelaten. Enkele voorbeelden die de reikwijdte laten zien:
- WebGL Globe (Google Data Arts Team, rond 2011) - een van de eerste veelbesproken demonstraties, waarin wereldwijde data zoals bevolkingscijfers als kleurrijke staafjes op een draaiende 3D-wereldbol werden getoond.
- Het portfolio van Bruno Simon (bruno-simon.com, rond 2018-2019) - een veelgeprezen persoonlijke website waarin bezoekers letterlijk met een virtueel speelgoedautootje door een 3D-wereld rijden om zijn werk te ontdekken; een klassiek voorbeeld in de creatieve-coding-gemeenschap.
- A-Frame (Mozilla, 2015) - een raamwerk voor virtual en augmented reality op het web, gebouwd bovenop Three.js, waarmee ontwikkelaars met simpele HTML-achtige tags VR-scenes kunnen bouwen die werken met een VR-bril of gewoon op een telefoon.
- model-viewer (Google, vanaf 2018) - een webcomponent waarmee winkels en musea 3D-modellen (en soms augmented reality) direct in een webpagina kunnen tonen; de eerste versies bouwden voort op Three.js, voordat Google een deel van de weergave later verder ontwikkelde.
- React Three Fiber (het Poimandres-collectief, sinds 2019) - geen eindproduct maar een populaire "vertaallaag" waarmee Three.js gecombineerd kan worden met React, het meestgebruikte raamwerk voor webinterfaces; dankzij dit project duiken 3D-elementen tegenwoordig op in talloze productpagina's, portfolio's en interactieve datavisualisaties.
Hoe ver is de techniek?
Three.js is inmiddels een volwassen, stabiel project dat al meer dan een decennium in productie wordt gebruikt door grote en kleine partijen. In plaats van traditionele versienummers zoals "1.0" of "2.3" gebruikt het project doorlopende "revisienummers" (bijvoorbeeld r160, r170), die ongeveer maandelijks verschijnen - een teken van een actieve, continue ontwikkeling in plaats van grote, zeldzame sprongen.
De belangrijkste technische verschuiving van de afgelopen jaren is de overgang van WebGL naar WebGPU, een nieuwere grafische standaard die beter aansluit op moderne GPU's en in potentie sneller en flexibeler is. Three.js bouwt hiervoor een experimentele WebGPU-renderer, samen met een nieuw, op knooppunten gebaseerd systeem om materialen en visuele effecten te beschrijven, aangeduid als TSL (Three.js Shading Language). Dit maakt het schrijven van geavanceerde visuele effecten toegankelijker, zonder dat ontwikkelaars zelf lage-niveau grafische code hoeven te schrijven.
Toch is deze overgang nog niet afgerond: WebGPU wordt nog niet door alle browsers en apparaten even goed ondersteund, waardoor WebGL voorlopig de betrouwbare standaardkeuze blijft en WebGPU-ondersteuning in de praktijk vaak als extra laag naast WebGL wordt aangeboden. Andere blijvende obstakels zijn de rekenkracht van mobiele apparaten (3D kost nu eenmaal batterij en prestaties) en de leercurve: hoewel Three.js veel wiskunde wegneemt, blijft enig begrip van 3D-ruimte, camera's en licht nodig om er goed mee te werken.
Wie werken eraan?
Three.js heeft geen enkele eigenaar of moederbedrijf; het is een open source project dat wordt onderhouden via GitHub, met Ricardo Cabello ("mrdoob") nog altijd als drijvende kracht en hoofdonderhouder. Rondom het project is een grote, internationale gemeenschap van vrijwillige bijdragers ontstaan die functies toevoegen, fouten oplossen en documentatie schrijven.
Enkele grotere technologiebedrijven leveren wel indirect een bijdrage: engineers die betrokken zijn bij browserontwikkeling - onder meer bij Google - hebben meegewerkt aan de nieuwe WebGPU-ondersteuning, mede omdat zij ook de onderliggende browserstandaarden mee vormgeven. Los van Three.js zelf onderhoudt de Khronos Group, een samenwerkingsverband van technologiebedrijven, de onderliggende WebGL- en WebGPU-standaarden waar de bibliotheek op steunt.
Rond de kern van Three.js is bovendien een eigen ecosysteem ontstaan van aanverwante projecten, zoals het genoemde React Three Fiber van het Poimandres-collectief en het VR-raamwerk A-Frame van Mozilla. Los van Three.js bestaan er ook concurrerende 3D-bibliotheken voor het web, zoals Babylon.js (met steun van Microsoft) en het commerciële PlayCanvas, die vergelijkbare doelen nastreven met een net iets andere aanpak.