De ultieme verrijking voor productpagina’s: 3D-modellen maken met photogrammetry

3D modellen: kostbaar en tijdsintensief

Voordat je normaliter een interactief 3D-model hebt, komt er nog best wat kijken. De grootste uitdaging is dat een 3D-ontwerper het product helemaal met de hand moet namaken als een digitaal 3D-object. Elk klein detail moet precies worden gemodelleerd en voorzien van realistische texturen (materialen). En het is een ingewikkelde taak om de belichting en reflecties er levensecht uit te laten zien. Het is een nauwkeurig en vaak kostbaar proces, wat het helaas niet voor elk merk of product haalbaar maakt.

Een vroege fase in het handmatige 3D-proces: De mesh (vorm) is af, maar het object mist nog texturen, een dieptemap en belichting.

De toegevoegde waarde van producten in 3D

In het verleden hebben we configurators gebouwd voor fietsen, bedden, banken en lenzen. Soms met een 3D-render van het product en soms met mooie, hoge kwaliteit productfoto’s. Een configurator met een 3D-functie vraagt om heel precieze 3D-modellen, wat deze aanpak soms minder geschikt maakt.

Een ronddraaiend 3D-model van je product is echter ook een mooie toevoeging als interactief element op je productpagina. In combinatie met video’s en hoogwaardige productfoto’s geeft zo’n model je bezoekers een veel beter gevoel voor het product, inclusief de materialen, vormen en kleuren. Ze kunnen het als het ware oppakken met een muisklik en van alle kanten bekijken. Dit zorgt voor een veel betere en realistischere ervaring.

Het resultaat van de beschreven aanpak: een 3D-render van het product, gecreëerd in slechts 10 minuten.

Voordelen van deze werkwijze

• Een product is binnen 5-10 minuten om te zetten naar een 3D-model
• Alleen een smartphone, een app en een minimale setup zijn nodig
• Op een goede dag kunnen wel 50 producten worden gedigitaliseerd
• Geen kennis van 3D-modelleren, belichting of andere geavanceerde onderwerpen vereist
• Geschikt voor objecten van verschillende formaten, zowel groot als klein

Limitaties

• De nauwkeurigheid van het 3D-model is hoog, maar niet volledig perfect
• Zonder een slimme methode om producten op te hangen, blijft er altijd een contactpunt (de onderkant van het product) dat niet zichtbaar is in 3D
• Producten met reflecties zijn lastig om via fotogrammetrie nauwkeurig om te zetten naar een 3D-model
• Voor maximale efficiëntie is er weinig ruimte voor kleine correcties. Als het resultaat niet naar wens is, is een nieuwe opname het makkelijkst.

3D modellen maken met fotogrammetrie

De theorie achter deze methode heet fotogrammetrie, waarbij een object wordt vastgelegd en opgemeten door overlappende foto’s te maken. Het werkt eigenlijk vergelijkbaar met hoe een 3D-ontwerper een object handmatig zou modelleren in een 3D-programma. Net als de ontwerper gebruikt fotogrammetrie foto’s als referentie om te bepalen hoe het product er in drie dimensies uitziet.

Fotogrammetrie wordt in de praktijk vaak gebruikt om kaarten te maken op basis van luchtfoto’s die met speciale meetcamera’s worden genomen. Het wordt ook toegepast in de architectuur om een ruimte nauwkeurig in kaart te brengen, of in de archeologie om een object in 3D vast te leggen en gedetailleerd te bestuderen. Tot een paar jaar geleden vereiste fotogrammetrie dure camera’s en meetapparatuur, wat het voor veel mensen onbereikbaar maakte. Maar dankzij de vooruitgang in smartphone-technologie, en met name de implementatie van Lidar, heb je tegenwoordig alles wat je nodig hebt gewoon op je telefoon om zelf producten in 3D te scannen.

Voor onze research hebben we Polycam gebruikt, een 3D-scan-app voor iPhone en Android. Er zijn echter ook andere vergelijkbare apps beschikbaar die hetzelfde kunnen.

Setup voor het schieten van foto’s

Om te laten zien hoe krachtig deze technologie is, gaan we voor een simpele setup. Het product staat op een ronddraaiende schijf, zodat we vanuit één vaste plek foto’s kunnen maken. Dit is niet per se nodig, maar het maakt het fotograferen wel een stuk makkelijker en sneller. We zetten het product op een transparante buis om zo min mogelijk contact met de ondergrond te hebben—een glas werkt trouwens ook prima. Hoe minder contactpunten, hoe beter de kwaliteit van het 3D-model (de mesh) aan de onderkant van het object.

Als je dit op grotere schaal wilt doen, is het handig om een kleine studio in te richten die onveranderd blijft. Zorg voor gelijkmatige, stabiele verlichting, zodat elke opname onder dezelfde omstandigheden plaatsvindt. Dat zorgt ervoor dat je 3D-modellen er consistent en nauwkeurig uitzien.

De opstelling waarmee wij experimenteerden. Een kleine studio zal veel beter resultaat geven.

We maken ongeveer 80-100 foto’s van het product vanuit verschillende hoeken. We letten erop dat de foto’s scherp zijn en proberen alle kanten van het product vast te leggen: de onderkant, zijkanten en bovenkant. Doordat het product ronddraait, kunnen we gewoon op één plek blijven staan en hoeven we niet om het object heen te lopen.

Aandachtspunten

• Houd de foto’s zo scherp mogelijk; minimaliseer de dieptescherpte voor optimale resultaten.
• Bij een stilstaand object zijn foto’s alleen op een verticale as nodig. Maak opnamen vanuit schuin onder, horizontaal, schuin boven en recht boven.
• De afstand tussen de telefoon en het object is niet cruciaal, maar consistentie is wel aan te raden.
• De afmetingen van het product kunnen later in centimeters worden ingevoerd.
• Licht en schaduwen worden in het GLTF-model geïntegreerd, dus een gelijkmatig en consistent verlichte ruimte is essentieel bij het fotograferen van meerdere producten.

Algoritme verwerkt de foto’s tot een 3D model

Na het maken van de gewenste hoeveelheid foto’s (meer is beter, waarbij tijd de grootste beperking is), wordt de app ingesteld om de foto’s te verwerken tot een 3D-model. Polycam maakt hierbij gebruik van fotogrammetrie om het 3D-model te genereren, waarbij een kunstmatige intelligentie de tweedimensionale foto’s zo nauwkeurig mogelijk interpreteert. Dit proces duurt meestal 2 tot 5 minuten.

Een nadeel van deze 'pipeline' is dat er beperkte mogelijkheden zijn voor aanpassingen of kleine correcties. Hoewel de app enige opties biedt, gaat de efficiëntie verloren zodra je de mesh moet bewerken in een 3D-programma zoals Blender. In plaats van tijd te besteden aan uitgebreide nabewerking, is het vaak efficiënter om gewoon een nieuwe scan te maken. Gelukkig is het resultaat in veel gevallen al bij de eerste poging goed genoeg en bijzonder indrukwekkend:

Screenshot van Polycam; kleurcorrectie voeren we later uit in onze 3D-scène.

De anatomie van het 3D model

Om het 3D-model op de productpagina te plaatsen, downloaden we het als een GLTF 3D-object (in .glb-bestandsformaat) van de Polycam-website. Dit .glb-bestand is een enkel binair bestand waarin verschillende onderdelen van het 3D-model zijn opgeslagen. Later zullen we dit bestand uploaden bij het product in het CMS of het e-commerce systeem (bijvoorbeeld Magento Commerce, Shopify, Hygraph, Contentful).

Als we het .glb-bestand uitpakken, zien we de volgende componenten:

• De texture: een uitgeklapte versie van de ‘skin’ van het 3D-model, samengesteld uit de foto’s die zijn genomen.
• De normal map (bumpmap): deze wordt gebruikt om details zoals bulten, groeven en krassen op het model toe te voegen, waardoor het licht vangt zoals echte vormen dat zouden doen en er realistischer uitziet.
• De displacement map: een dieptemap die daadwerkelijk de punten van de mesh verplaatst in 3D-ruimte om het 3D-object te vormen.
• Het GLTF-bestand: een open-source en royaltyvrij 3D-bestand dat statische modellen, animaties en bewegende scènes ondersteunt. GLTF wordt veel gebruikt in games, AR, VR en slaat 3D-modelinformatie op in JSON-indeling.

Het .glb bestand bevat een GLTF file, waarin de Mesh (3d vorm) opgeslagen zit die onder andere te bekijken is in 3d applicatie Blender

De texture van het 3D model die de engine genereert

Het minimaliseren van bestandsgrootte

Het doel is om het 3D-bestand zo klein mogelijk te maken, zodat bezoekers niet lang hoeven te wachten voordat het geladen is. Hiervoor gebruiken we de commandline interface van gltf-transform.dev om het bestand te optimaliseren. In onze situatie kunnen we vooral winst behalen door het bestand automatisch op te schonen, de mesh te comprimeren en de grootte van de texture te verkleinen (van 4K naar een iets kleinere resolutie, in ons geval 1800x1800px). We gebruiken de volgende commandline:

gltf-transform optimize input.glb optimized.glb --compress meshopt --texture-compress webp --texture-size 1800

De bestandsgrootte van het 3D-model is nu verkleind van 2,8 MB naar 1,2 MB, wat vergelijkbaar is met de grootte van een productfoto van hoge kwaliteit.

Weergeven op productpagina’s: technische implementatie

Nu we het 3D-model klaar hebben, is de volgende uitdaging om het als interactief object op de productpagina's van de shop te krijgen. We implementeren hiervoor open-source technologie die goed aansluit op de techniek die wij gebruiken voor het realiseren van headless frontends: React en Next.js. De libraries die we gebruiken zijn: three.js en React Three Fiber.

We gaan niet te diep in op de details, maar de technische implementatie moet een eenvoudig proces mogelijk maken dat bestaat uit slechts drie stappen:

1. Foto’s maken om het 3D-object te creëren
2. Het 3D-model controleren en het 3D-bestand downloaden
3. ⁠Het bestand uploaden in het CMS of e-commerce platform en koppelen aan het juiste product

⁠Het 3D model geimplementeerd in onze headless e-commerce template voor Adobe Commerce

Extra: Performance optimalisatie van Core Web Vitals

Het renderen van het 3D-object op de pagina vereist het gebruik van JavaScript-libraries zoals de 3D-engine three.js en R3F (React Three Fiber), de React-renderer voor three.js. Het uitvoeren van JavaScript neemt tijd in beslag, waardoor bezoekers langer moeten wachten totdat de elementen op de pagina interactief zijn. Dit willen we zoveel mogelijk voorkomen.

⁠We willen voorkomen dat het 3D model in de viewport staat en en daarmee de LCP metric beinvloed

Om een goede en snelle gebruikerservaring te bieden, willen we het 3D-component slim inladen. Een deel van de oplossing is om het 3D-object niet meteen in de viewport (de bovenkant van de pagina) te plaatsen, maar iets verder naar beneden. In e-commerce is het een best practice om de productpagina te openen met productfoto’s, opties en een ‘voeg toe aan winkelwagen’-knop. Dus net onder deze informatie, buiten de viewport, is een ideale plek voor het 3D-model.

Lazyloading: pas inladen bij gebruik

Nu het element wat verder op de pagina staat, kunnen we het verbergen totdat de bezoeker ernaartoe scrollt. Dit concept heet lazyloading en is een veelgebruikte techniek om de gebruikerservaring te optimaliseren wanneer er met grote bestanden wordt gewerkt. We checken zelf of het component in de viewport is (met behulp van Framer Motion). Zodra dat het geval is, renderen we het component en laden we de benodigde 3D-libraries pas op dat moment in. Op deze manier blijft de INP-score optimaal.

Daarnaast reserveren we de ruimte door het parent element van de canvas een vaste aspectratio te geven, vergelijkbaar met hoe een afbeelding zich gedraagt. Dit doen we ook als het canvas-element nog niet is ingeladen. Zo voorkomen we dat de pagina verschuift, wat anders impact zou hebben op de Core Web Vital CLS-metric (Cumulative Layout Shift).

Een uitstekende performance score na lazyloading van het 3D-model. Logisch, want er staat aanvankelijk weinig op de pagina.

Wil jij ook een extra dimensie toevoegen?

Hey! Je hebt het einde van ons artikel bereikt. Waarschijnlijk sta je nu te trappelen om je eigen schoenen in 3D te fotograferen. Of misschien iets anders? We zien dit ook wel werken voor bijvoorbeeld kamerplanten, handgemaakte artikelen, speelgoed, keukenspullen, meubels, en meer.

Voordat je aan de slag gaat, nog een laatste tip: als je overweldigd bent of graag hulp en advies van een expert wilt, neem dan contact op met Reach Digital. We hebben de know-how om je te helpen met vergelijkbare innovatieve vraagstukken (veel AI de laatste tijd), maar ook met de bekende e-commerce uitdagingen zoals replatforming, ipaas, integraties, en het optimaliseren van snelheid, design en UX.

Leuk om te weten: klanten vinden het vaak een verademing om met ons samen te werken. We houden de communicatie duidelijk, zorgen voor een ontspannen samenwerking, denken actief mee over wat het beste is voor jouw organisatie, en vinden waar mogelijk voordeligere of eenvoudigere oplossingen. Simpel gezegd, we weten waar we mee bezig zijn.

Dus, als je op zoek bent naar een partner die je kan helpen om je e-commerce ambities waar te maken, ben je bij ons aan het juiste adres. Zin om eens kennis te maken of van gedachten te wisselen? We staan voor je klaar. Spreek je snel!