JopaMX Configurator
Een interactieve 3D-configurator waarmee klanten van JopaMX zelf hun motorcrosspak kunnen samenstellen.
Het Project.
01.JopaMX is een bedrijf dat custom motorcrosspakken ontwerpt en produceert. Het samenstellen van zo'n pak ging voorheen via heen-en-weer mailcontact tussen JopaMX en de klant: kleuren doorgeven, ontwerpen aanpassen, voorbeelden terugsturen, nog een rondje feedback. Dat kostte aan beide kanten veel tijd.
In de zomer van 2024 ben ik via Rohaan IT aan dit project begonnen om daar een oplossing voor te bouwen: een interactieve 3D-configurator waarmee klanten zelf hun complete pak kunnen samenstellen. Kleuren kiezen, logo's en afbeeldingen toevoegen, en direct in 3D zien hoe het eindresultaat eruit komt te zien. Is het pak naar wens? Dan kan de klant het meteen in het winkelmandje leggen en afrekenen, zonder tussenkomst van JopaMX. De bestelling komt vervolgens netjes binnen, klaar voor productie.
De Configurator.
02.Binnen dit project heb ik de volledige frontend ontwikkeld, plus een deel van de backend. Concreet komt dat neer op:
- De interactieve 3D-omgeving waarin het pak wordt weergegeven en vanuit elk hoek bekeken kan worden
- Het volledige configuratiesysteem waarmee losse vlakken van shirt, broek en paddockmat aangepast kunnen worden
- Live rendering van kleurwijzigingen en geüploade afbeeldingen direct op het 3D-model
- De logica achter het detecteren op welk vlak een klant klikt in de 3D-weergave
- Het volledige bestelproces zodat een samengesteld pak direct besteld kan worden
- Een geautomatiseerd importscript dat de ontwerpen omzet naar drukklaar formaat binnen de grafische software
- Een pipeline voor het renderen van previews van ontwerpen in de backend, zodat klanten ook buiten de configurator om een 3D-preview kunnen zien van hun ontwerp
Technische Aanpak.
03.De configurator is gebouwd in Vue 3 met ThreeJS. Op de achtergrond wordt een SVG gerenderd die één-op-één het pak representeert. Bij elke wijziging wordt die SVG live aangepast, omgezet naar een PNG en via UV-mapping als texture op het model geprojecteerd. Dezelfde SVG-data kan later ook voor productie gebruikt worden, zonder extra omzetting.
De grootste uitdaging was performance. Elke aanpassing betekent de SVG opnieuw opbouwen, rasteren en naar de videokaart sturen, wat op de main thread voor haperingen zorgt. Met gebruikt van een OffscreenCanvas heb ik dat proces naar een aparte thread verhuist. Ook door objecten, lichten en texturen op te ruimen en hergebruiken blijft het geheugengebruik stabiel naarmate de gebruiker meer aanpassingen doet.
Daarnaast moest het ontwerp drukklaar gemaakt worden. Beeldschermen werken met RGB terwijl drukpersen met CMYK werken. Om dit juist te verwerken heb ik een geautomatiseerd importscript gebouwd dat elke laag van de SVG verwerkt binnen de grafische software zodat het drukresultaat overeenkomt met wat de klant in de configurator zag.
Rohaan IT.
04.De opdracht liep via Rohaan IT, die het project van JopaMX had aangenomen en mij inschakelde voor de configurator. Zij namen het klantcontact en een deel van de backend voor hun rekening, waardoor ik mij volledig op de configurator kon richten.