← All work
ShippedConfigurator2018
SafeJawz Configurator
A 3D mouthguard configurator in WebGL, wired into a Shopify checkout.
Customers design their own mouthguard in 3D (colours, patterns and text) and buy it straight from the Shopify store.
My role
Solo developerSolo developer: the configurator and its store integration
Team
Siligin Software · Mar 2018 — Mar 2019
Platforms
- WebGL
Stack
- Unity
- WebGL
- Shopify
Solo developer
What I did
- 01Built the configurator alone.
- 02A real-time 3D mouthguard model with colour, pattern and text customisation.
- 03A WebGL build tuned for the browser.
- 04Shopify integration, from the design to the checkout.
What stands out
- 01Real-time 3D customisation in the browser.
- 02Shopify integration all the way to checkout.
- 03Built and integrated end to end as the only developer.
- 04A WebGL product configurator for the SAFEJAWZ mouthguard, not a game.
- 05Built on Unity 2018.3, targeting WebGL with a custom retina-friendly template.
- 06Client/server-style integration of IAP, Ads and Analytics.
- 073D mouthguard model supports 1/2/3-section color configurations, matched by a color-swatch picker with gold/green/silver metallic finishes.
- 08Configurator UI includes model/color selection, jaw fitting, image-select and finish screens, plus an e-commerce add-to-cart flow with confirm/warning popups.
- 09Third-party tooling: LeanTween (tweening), OutlineEffect, and WebGL-specific retina, file-browser, keyboard and IME plugins.
- 10Server-side image handling (Cloudinary) backed the custom 'Add image' upload feature.
See it in action
