Varje 3D-verk i våra Then & now-nyversioner började som en Python-fil. Superman, Batman, Wolverine, Spider-Man, Iron Man, Hulk, R2-D2 och Game & Watch byggs var och en av ett skript som styr Blender, exporterar en modell och lämnar den till en sida som belyser den live med three.js. Inget skulpterades med en mus.
Det låter som ett partytrick. Det visade sig vara projektets mest praktiska beslut.
Varför bygga 3D med kod
En modell gjord för hand är ett färdigt objekt. En modell gjord av ett skript är ett recept, och recept går att ändra. När återkopplingen på Hulk var "hans nävar ser ut som handskar" öppnade vi inte en fil och flyttade runt hörn; vi ändrade hur näven byggdes och körde om skriptet. När underarmarna var för korta, eller en cape behövde falla över axlarna i stället för bakom dem, var lösningen några rader, och hela modellen byggdes om på några minuter.
Det betyder också att varje verk är reproducerbart. Skripten ligger i repot bredvid sajten, och en gemensam verktygslåda tar hand om delarna varje byst behöver: bålen, sockeln, färgsättningen och exporten.
Ansikten är svåra, så vi började inte från noll
Våra första huvuden byggdes av primitiver och deformerades med matematik. De såg ut som huvuden, men inte som människor. Ansikten är där ögat är minst förlåtande, och inget smart brus räddar en näsa som är lite för lång.
Så vi bytte angreppssätt. Blender Studio publicerar en uppsättning mänskliga basmodeller under CC0, fria för alla att använda. Nu börjar vi varje ansikte från det realistiska huvudet och formar om det med skript: en tyngre panna och bredare käke för Hulk, en fyrkantig käke och kluven haka för Superman, ett morrande för Wolverine. Händerna kommer från samma uppsättning och poseras med skript till ett grepp, en öppen handflata eller en knytnäve.
Små detaljer som tog längst tid
Några lärdomar vi vill skicka vidare till alla som gör samma sak:
- Vattentätt eller inget alls. Att slå ihop delar till ett nät och sedan krympa resultatet för att spara filstorlek kan vika ytan över sig själv, och veck renderas som mörka hål. Vårt bygge vägrar nu att bli klart om en modell inte är en sluten, giltig yta.
- Ett material per nät. Blenders glTF-exportör behåller hörnfärger bara på ett näts första material, så varje målad del är ett eget nät.
- Munnen stängd tills den behövs. Hulk och Wolverine håller läpparna stängda i vila; vrålet och morrandet är formförändringar som bara spelas medan du håller inne, med tänderna dolda tills munnen öppnas.
- Versionera varje modell. Webbläsare cachar modeller hårt, så varje fil laddas med en versionsmärkning som ändras när modellen gör det.
Ljuset är halva modellen
På sidan belyses varje verk i realtid med three.js. Iron Man och Superman får bloom, en glödeffekt för ögonen, bågreaktorn, repulsorn och värmeseendet. Det krävde en del finjustering. Vår första Iron Man glödde så starkt att hjälmen försvann, så nu börjar bloomen svagt och öppnar sig bara när du laddar ett skott.
Varje verk får också sin egen miljö: ett regnigt tak i Gotham, skymning över New York, Tatooines tvillingsolar, ett skrivbord i valnöt för de handhållna konsolerna.
Hålla det snabbt
3D blir lätt långsamt. Några regler håller våra verk användbara på en telefon:
- Modellerna laddas när sidan är i vila, aldrig före texten.
- Scenerna byggs en i taget, i små bitar, så att sidan aldrig fryser medan grafiken förbereds.
- Grafikuppsättningen körs i bakgrunden innan första bildrutan ritas.
- Datorer utan ett användbart grafikchip får en stillbild i stället för en sida som står still.
Museihyllan högst upp på Then & now visar alla åtta verk samtidigt, så den använder lättviktsversioner av varje modell: förenklade, komprimerade och laddade bara när de behövs.
Vart det tar vägen härnäst
Teknikerna bakom de här bysterna går rakt in i kunduppdrag: produktkonfiguratorer, interaktiva förklaringar, effektfulla ögonblick som laddar snabbt och svarar på beröring. Att bygga dem i kod betyder att de kan ändras lika snabbt som produkten de sitter bredvid.
Under tiden kan du gå och göra Hulk arg.