Asset-guide
3D-modeller til webshop
En CAD-fil er et godt udgangspunkt, men sjældent en webklar model. Her er workflowet fra præcis produktgeometri til en hurtig, valideret GLB.
Bevar CAD eller original 3D som master. Lav en særskilt webversion med forenklet geometri, kontrollerede materialer og komprimerede teksturer. Lever typisk som GLB/glTF, og validér både filen og oplevelsen på rigtige mobilenheder.
Produktudvikling og web har forskellige mål. CAD prioriterer konstruktion, tolerancer og interne dele. Webmodellen skal gengive den synlige form effektivt i realtid. Den bør derfor behandles som et selvstændigt produktasset – ikke som et automatisk eksportformat.
GLB, glTF og CAD har forskellige roller
| Format/type | God til | Vær opmærksom på |
|---|---|---|
| CAD (fx STEP) | Mastergeometri og produktmål | Ofte for detaljeret og uden webmaterialer |
| Arbejdsfil (fx Blender) | Optimering, UV, materialer og eksport | Skal versionsstyres og have tydelig ejer |
| glTF | Åbent runtime-format med scene, mesh, materialer og referencer | Kan bestå af flere filer, som skal følges ad |
| GLB | Binær glTF-pakke i én fil | Praktisk levering, men stadig ikke automatisk let |
| KTX 2.0 | GPU-venlige, komprimerede teksturer | Kræver understøttelse i viewer og pipeline |
Khronos Group beskriver glTF som et royaltyfrit format til effektiv transmission og indlæsning af 3D-scener. En GLB kan samle scene, geometri, materialer og teksturer i én binær fil. Det gør distribution enklere, men filens størrelse afhænger stadig af geometri og især teksturer.
Et workflow, der kan gentages
Vælg synlig geometri
Fjern skruer, indvendige konstruktioner og detaljer, som kunden aldrig kan se. Bevar silhuet, samlinger og de kanter, der forklarer kvaliteten.
Forenkling og topologi
Reducer polygoner kontrolleret. Automatisk decimering kan hjælpe, men bør gennemgås på kurver, huller og produktets karakteristiske detaljer.
UV og materialestruktur
Planlæg hvordan 2D-teksturer lægges på modellen. Sørg for ensartet skala, så træårer, vævning og mønstre ikke ændrer størrelse mellem dele.
Teksturer og komprimering
Brug den opløsning, som den synlige detalje kræver – ikke den størst mulige. Overvej KTX 2.0/Basis Universal, når hele visningskæden understøtter det.
Eksport og validering
Eksportér en reproducerbar GLB/glTF, kør en validator, og dokumentér advarsler. Sammenlign den med godkendte produktreferencer.
Test i den rigtige side
En model, der kører fint alene, kan stadig være for tung sammen med webshoptema, scripts, billeder og tracking.
Sæt et performancebudget pr. scene
Der findes ikke ét korrekt filtal for alle produkter. En enkel stol og en maskine med mange separate dele har forskellige behov. Budgettet bør derfor mindst dække samlet download, teksturhukommelse, antal materialer/draw calls, tid til første brugbare visning og stabilitet på målgruppens telefoner.
I en offentlig web.dev-case valgte Googles hardwareteam et maksimum på 2 MB inklusive teksturer for deres konkrete mobilscenarie. Det er et nyttigt eksempel på en streng målsætning – ikke en universel regel. Jeres budget skal begrundes i produkt, netværk og enheder og måles i den færdige side.
- Vis et let poster-billede, før 3D er klar.
- Indlæs ikke alle materialer og moduler, hvis de aldrig bruges.
- Test på mindst én mellemklasse-telefon og en langsommere forbindelse.
- Mål både netværksdownload, hovedtråd, GPU-belastning og hukommelse.
- Lav en billedfallback, der stadig lader kunden forstå og købe produktet.
Godkendelse er mere end “filen åbner”
Brug Khronos’ glTF Validator til formatfejl og advarsler. Kontrollér derefter produktet visuelt: skala, orientering, normaler, farver, gennemsigtighed, UV, animationer og materialeskift. Til sidst testes viewer, browser, mobil og det faktiske konfigurationsflow.
Khronos Group: glTF – Runtime 3D Asset Delivery
web.dev: Interactive 3D on the web with Google hardware
3dkonfigurator.dk drives af teamet bag ConfigUX. Vi kan levere eller integrere 3D-konfiguration kommercielt, men filrådene her bygger på åbne standarder og kan bruges med andre platforme.