Elk 3D-stuk in onze Toen & nu-remakes begon als een Python-bestand. Superman, Batman, Wolverine, Spider-Man, Iron Man, Hulk, R2-D2 en de Game & Watch worden elk gebouwd door een script dat Blender aanstuurt, een model exporteert en dat doorgeeft aan een pagina die het live belicht met three.js. Niets is met een muis geboetseerd.
Dat klinkt als een kunstje. Het bleek de meest praktische beslissing van het project.
Waarom 3D bouwen met code
Een met de hand gemaakt model is een af object. Een model dat door een script is gemaakt, is een recept, en recepten kun je aanpassen. Toen de feedback op Hulk was "zijn vuisten lijken handschoenen", openden we niet opnieuw een bestand om vertices te verschuiven; we veranderden hoe de vuist werd gebouwd en draaiden het script opnieuw. Toen de onderarmen te kort waren, of een cape over de schouders moest vallen in plaats van erachter, was de oplossing een paar regels, en het hele model werd in minuten opnieuw gebouwd.
Het betekent ook dat elk stuk reproduceerbaar is. De scripts staan in de repository naast de site, en een gedeelde toolkit regelt de onderdelen die elke buste nodig heeft: de torso, de sokkel, het inkleuren en de export.
Gezichten zijn moeilijk, dus we begonnen niet vanaf nul
Onze eerste hoofden waren opgebouwd uit primitieven en vervormd met wiskunde. Ze leken op hoofden, maar niet op mensen. Gezichten zijn waar het oog het minst vergevingsgezind is, en geen enkele slimme ruis repareert een neus die net te lang is.
Dus veranderden we van aanpak. Blender Studio publiceert een set menselijke basismeshes onder CC0, vrij te gebruiken door iedereen. We beginnen elk gezicht nu vanuit dat realistische hoofd en vormen het met een script om: een zwaardere wenkbrauwboog en bredere kaak voor Hulk, een vierkante kaak en kinkuiltje voor Superman, een grauw voor Wolverine. Handen komen uit dezelfde set, door een script in een greep, een open hand of een vuist gezet.
Kleine details die het langst duurden
Een paar lessen die we iedereen meegeven die hetzelfde doet:
- Waterdicht of niets. Onderdelen samen remeshen en het resultaat daarna verkleinen om bestandsgrootte te besparen, kan het oppervlak over zichzelf heen vouwen, en vouwen worden zichtbaar als donkere gaten. Onze build weigert nu te voltooien als een model geen gesloten, geldig oppervlak is.
- Eén materiaal per mesh. De glTF-exporter van Blender bewaart vertexkleuren alleen op het eerste materiaal van een mesh, dus elk ingekleurd onderdeel is een eigen mesh.
- Monden dicht tot het nodig is. Hulk en Wolverine houden hun lippen in rust gesloten; het brullen en het grauwen zijn vormveranderingen die alleen spelen terwijl je ingedrukt houdt, met de tanden verborgen tot de mond opengaat.
- Geef elk model een versie. Browsers cachen modellen hardnekkig, dus elk bestand wordt geladen met een versielabel dat verandert als het model verandert.
Licht is de helft van het model
Op de pagina wordt elk stuk realtime belicht met three.js. Iron Man en Superman krijgen bloom, een gloei-effect voor de ogen, de arc reactor, de repulsor en de hittestraal. Dat vergde wat afstemming. Onze eerste Iron Man gloeide zo fel dat de helm verdween, dus de bloom begint nu klein en wordt pas groter als je een straal oplaadt.
Elk stuk krijgt ook een eigen scène: een regenachtig dak in Gotham, schemering boven New York, de twee zonnen van Tatooine, een notenhouten bureau voor de handhelds.
Het snel houden
3D is makkelijk traag te maken. Een paar regels houden het onze bruikbaar op een telefoon:
- Modellen laden als de pagina stil is, nooit vóór de tekst.
- Scènes worden één voor één opgebouwd, in kleine stukjes, zodat de pagina nooit vastloopt terwijl de graphics worden voorbereid.
- De graphics worden op de achtergrond ingesteld voordat het eerste frame wordt getekend.
- Apparaten zonder bruikbare grafische chip krijgen een stilstaand beeld in plaats van een vastgelopen pagina.
De museumplank bovenaan Toen & nu toont alle acht stukken tegelijk, dus die gebruikt lichte versies van elk model: vereenvoudigd, gecomprimeerd en alleen geladen wanneer nodig.
Wat hierna komt
De technieken achter deze bustes gaan rechtstreeks over naar klantwerk: productconfigurators, interactieve uitleg, opvallende momenten die snel laden en op aanraking reageren. Ze in code bouwen betekent dat ze net zo snel kunnen veranderen als het product waarnaast ze staan.
Ga intussen Hulk kwaad maken.