WebGL/3D op MKB-site — overkill of differentiator?

Waar 3D op het web nu staat

2026 is een goed moment voor WebGL. Three.js is al 14 jaar oud, R3F (React Three Fiber) is mainstream, WebGPU werkt in Chrome/Edge/Safari (sinds 2023). Tools als Spline en Rive maken het toegankelijk zonder code. Voor designers en developers is dit volwassen techniek.

Maar volwassen techniek ≠ standaard inzetten. Voor MKB-sites moeten we eerst de vraag stellen: wat moet de site bereiken? Een lokale dienstverlener moet vertrouwen wekken en leads converteren. Geen van beide vereist 3D.

Wanneer 3D wél MKB-relevant is

Vier categorieën waar wij 3D zinvol vinden voor MKB:

1. Productconfigurator

Maatwerk meubel, geprinte producten, fietsen op maat, sieraden met steenkeuze. De klant moet visueel kunnen kiezen — dan is 3D-configurator een verkoop-driver. Voorbeeld in onze klantenlijst: een 3D-configurator voor een autoshop (zie SV Transport — Three.js scene voor demo-doeleinden).

2. Architectuur / interieur

Pand bekijken voor verhuur/verkoop, interieurontwerpen, tuinontwerp. Klanten willen ruimte voelen — 3D doet dat veel beter dan foto's. Niet voor elke hovenier, wel voor premium-tuinontwerper.

3. Complex product uitleggen

Machine-onderdelen, technische installaties, medische apparatuur. Een geanimeerde 3D-explainer is vaak duidelijker dan een PDF-handleiding.

4. Premium-branding voor luxe-segment

Luxe horlogemaker, premium-restaurant met experience-vooraf, high-end haarstylist. 3D communiceert "premium". Maar dan moet de rest van de site ook premium-niveau zijn.

Wanneer 3D NIET nodig is (en dus schadelijk)

Voor 95% van MKB-sites is 3D ruis. Concreet:

• Lokale dienstverleners (hovenier, schoonmaakbedrijf, elektricien, klusbedrijf)
• Webshops met simpele producten (slagerij, kaaswinkel, kledingmerk)
• Zakelijke dienstverlening (boekhouder, advocaat, fysiotherapeut)
• Restaurant, café, hotel (foto's slaan 3D meestal)
• Bouw- en aannemersbedrijven (projectfoto's zijn sterker)

De vraag is niet "kan 3D mooi zijn op deze site?" — natuurlijk kan dat. De vraag is: kost het meer conversie dan het oplevert? Voor bovenstaande categorieën: ja.

De vier verborgen kosten van 3D op MKB-sites

1. Page-weight schiet door het dak

Een gemiddelde Three.js-hero met één 3D-model en lichten: 1.5-3MB. Voeg textures en animatie toe: 4-8MB. Versus een gecomprimeerde WebP-foto: 80KB. Factor 20-100 zwaarder.

2. Mobile performance bombaart

Op iPhone 12+ werkt het redelijk. Op een Samsung A20 (€180 toestel, veel MKB-doelgroepen) gaat de fan aan, de browser hangt, batterij leegloopt. 30% van NL-mobiele bezoek zit op toestellen onder €250.

3. Lighthouse-score zakt

3D-hero's halen vaker LCP-rood (Largest Contentful Paint). Niet omdat de 3D-scene niet binnen 2.5s rendert — wel omdat de page-weight zorgt dat álles langzamer laadt. Vaak zakt mobiele score van 92 naar 55. Zie ook Core Web Vitals voor MKB.

4. Onderhoud over 2-3 jaar

3D-code veroudert sneller dan 2D-code. Library-updates breken vaak. Een 3D-hero uit 2024 werkt in 2026 vaak niet meer zonder rebuild. Voor MKB die jaar 2-5 op de site moet draaien zonder extra onderhoud is dat reëel risico.

Mijn DesignCheck-regel

Voor elke MKB-bouw stellen we 3 vragen:

1. Vraagt het product visueel om 3D? (configuratie, ruimte, complexe uitleg)
2. Is de doelgroep technisch sterk (Apple-prijssegment, jong, urban)?
3. Heeft de klant budget voor onderhoud van de 3D-scene over 3 jaar?

Drie keer ja = we doen 3D. Anders niet. In de praktijk: 1 op 20 MKB-projecten krijgt 3D.

"Goede technologie verkeerd ingezet schaadt meer dan slechte technologie goed ingezet." — niet van mij, maar past wel.

Lichtere alternatieven die wel werken

Wat we wél vaak doen voor "premium" visuele indruk zonder 3D:

• Cinemagraph: één element subtiel bewegend op een statische foto. 200KB lichter dan video.
• SVG-animaties: vector, schaalbaar, lichtgewicht (5-50KB).
• Lottie-animaties: voor iconen en kleine illustraties.
• Scroll-driven CSS-animaties: native browser, geen library nodig.
• Hover-states met subtiele transitions.

Deze geven 80% van de "wow" zonder 5% van de page-weight.

Wat kost 3D op MKB-site bij DC?

Bij DesignCheck Mijdrecht: standaard rebuild €3.995 zonder 3D. Met 3D-configurator: vanaf €6.995 (premium-pakket) — daarin zit het modelleren van assets, scene-setup, fallback en 6 maanden onderhoud. Voor klanten die 3D zinvol vinden (configurator, architectuur) verdient het zich terug in 12-18 maanden via conversie-uplift. Zie prijzen.

Hoe weet je of 3D voor jouw site zinvol is?

Doe deze test: kan je in één zin uitleggen wát het 3D-element bijdraagt aan de bezoeker? "Het ziet er gaaf uit" is geen antwoord. "De klant kan zijn keuken voor bouw visualiseren" wel.

Of vraag een gratis audit aan. Wij kijken niet alleen naar wat er staat, maar adviseren ook wat zinvol is — soms is dat juist géén 3D.

FAQ — WebGL/3D op MKB-site

De technische staat van WebGL en WebGPU in 2026

Three.js bestaat sinds 2010 en heeft in 2026 versie r170+ bereikt. Het is volwassen, breed gedocumenteerd en heeft een ecosysteem van plug-ins, post-processing-effecten, GLTF-loaders en physics-bridges. WebGPU is de nieuwe browser-API onder de motorkap. Sinds 2023 in Chrome en Edge, sinds macOS 14 in Safari, en in Firefox 2025-2026 via een experimentele flag. WebGPU geeft toegang tot compute-shaders, betere multithreading en lagere CPU-overhead. Voor MKB-sites is dat zelden een direct voordeel — die wonen meestal op het niveau van een statisch 3D-model met enkele animaties.

Wat wel relevant is voor MKB: de glTF-standaard is in 2026 universeel. Een 3D-model in glTF is met DRACO-compressie 5 tot 10 keer lichter dan een ongecomprimeerde versie en kan op vrijwel elk apparaat geladen worden. Voor een productconfigurator betekent dat: een 80 MB Blender-export kan teruggebracht worden naar 800 KB - 2 MB zonder zichtbare kwaliteitsverlies. Dat is het verschil tussen "onbruikbaar op mobiel" en "werkt acceptabel".

Performance-budget voor 3D: harde grenzen

Wanneer we 3D wel inzetten, hanteren we strikte performance-budgets. Voor een MKB-3D-scene: maximaal 1.5 MB initiële assets (model + texturen + JS-runtime), maximaal 100.000 polygonen in het scherm tegelijk, maximaal vier dynamische lichten, en LOD-versies (Levels of Detail) voor zwakkere apparaten. Op een mobiel toestel van 250 euro moet de scene starten binnen 3 seconden en stabiel op 30 frames per seconde draaien. Lukt dat niet, dan vervangen we hem door een gerenderde video of stilstaande afbeelding voor dat apparaat-segment.

Een second-pass-optimalisatie die vaak vergeten wordt: textures. Een 4K-PBR-textuur kost 16 MB ongecomprimeerd, 4 MB met DXT-compressie en 1 MB met Basis Universal (KTX2). Voor MKB-sites is 1024x1024 of zelfs 512x512 vrijwel altijd genoeg. Het verschil met 4K is op een telefoonscherm niet zichtbaar maar in laadtijd 16x zwaarder. We rekenen bij elke 3D-build per texture-slot terug: heb ik echt 4K nodig of voldoet 1K?

Accessibility en 3D: een vaak vergeten combinatie

Een 3D-scene is voor schermlezer-gebruikers per definitie ontoegankelijk. WCAG 2.2 schrijft voor dat niet-tekst-content een tekstuele alternatief moet hebben. Voor een 3D-configurator betekent dat: een toegankelijke parallel-flow met dropdowns en tekstvelden. Voor een 3D-hero zonder functionele rol: een aria-hidden-marker en geen content-functie. Wie 3D inzet zonder over toegankelijkheid na te denken, schakelt een meetbaar deel van zijn bezoekers uit en loopt risico op WCAG-handhaving onder de EAA.

Een tweede issue is prefers-reduced-motion. Veel gebruikers hebben deze instelling actief omdat zij motion sickness of vestibulaire problemen hebben. Een automatisch ronddraaiend 3D-model in de hero is dan letterlijk misselijkmakend. Onze regel: respecteer altijd prefers-reduced-motion en bied een statische alternatieve compositie.

• Definieer een performance-budget voor elke 3D-scene voor je begint te modelleren
• Houd model-bestanden onder 2 MB met DRACO-compressie en LOD-varianten
• Beperk textures tot 1024x1024 of 512x512 voor MKB-toepassingen
• Comprimeer textures met Basis Universal (KTX2) in plaats van PNG of JPG
• Maximaal vier dynamische lichten in een scene — meer kost grafisch onevenredig veel
• Bied een toegankelijk tekst-alternatief voor elke 3D-flow met functionele rol
• Respecteer prefers-reduced-motion en serveer een stilstaande compositie als die actief is
• Test op een toestel van 250 euro met traag 4G — niet alleen op je eigen iPhone
• Reserveer een onderhoudsbudget voor library-updates over 2-3 jaar
• Vermijd WebGPU-only — gebruik altijd Three.js-fallback voor WebGL 2
• Bouw graceful degradation in voor toestellen zonder hardware-acceleratie
• Optimaliseer je glTF met gltf-transform of soortgelijke pipeline-tools
• Schakel post-processing-effecten (bloom, DOF) uit op mobiel voor performance-winst
• Bewaar je Blender-bron-bestanden samen met je optimalisatie-pipeline-script
• Documenteer je 3D-aanpak voor opvolgers — niemand wil over 3 jaar de stack reverse-engineeren

Drie wereldwijde use-cases waar 3D echt verschil maakt

Een Italiaanse fietsenmaker bouwde in 2024 een 3D-configurator voor maatwerk-fietsen. Klanten kiezen frame-grootte, kleur, componenten en zien de fiets in real-time draaien. Resultaat: gemiddelde besteltijd in webshop daalde van 8.4 naar 3.1 minuten en conversie steeg met 38%. Investering: 14.000 euro. Terugverdientijd: vijf maanden. Hier voegt 3D directe verkoopwaarde toe.

Een Duitse architectenfirma toont op de homepage een 3D-walkthrough van een recent woningproject. Bezoekers kunnen door virtuele kamers lopen. Gemiddelde tijd op site verdubbelde van 47 seconden naar 1 minuut 38 seconden. Leads namen toe met 24%. Hier is 3D het verhaal zelf, geen decoratie.

Een Canadese sieradenmaker liet zijn collectie als 3D-modellen renderen met steenkeuze en metaaltype. Klant ziet exact wat hij koopt, returnratio daalde van 18% naar 4%. Aankoopwaarde steeg gemiddeld met 22% omdat klanten zelfverzekerder boekten op duurdere combinaties. Hier neemt 3D operationele kosten weg.

In alle drie gevallen geldt hetzelfde patroon: 3D is geen versiering maar onderdeel van het kernproduct. Voor MKB-bedrijven waar 3D dat niet is — wat het overgrote deel is — vervalt het voordeel en blijft alleen het performance-nadeel staan.

Wat doe je vandaag?

• Inventariseer of je product 3D-functioneel is of dat het 3D zou zijn als decoratie
• Bekijk je analytics — welk percentage van je bezoekers zit op laag-end mobiel
• Als je 3D overweegt, stel een performance-budget vast voor je een bureau aanneemt
• Test bestaande 3D-elementen op een goedkope Android met Chrome DevTools throttling
• Reserveer een onderhoudsbedrag voor de toekomst van elke 3D-component die je deployt

Verder lezen

Wij bouwen 3D alleen wanneer het functioneel is voor het product, met strikte performance-budgetten en toegankelijke alternatieve flows. Voor Keurmeesters is dat geen 3D maar een editorial-baseline met BAG-formulier — omdat het kernproduct geen 3D vereist. Bekijk de prijzen of vraag een gratis audit aan.

Door Lorenzo Ruisi — DesignCheck Mijdrecht. Laatst bijgewerkt 16 mei 2026.