VML Technologies Product Configurator

VML Technologies makes bespoke Lattice LED strips for large-scale LED media facades, and until this project every quote and spec sheet was put together by hand for each custom order. They wanted a self-serve web tool where their sales team, external customers, and architects could pick their own specifications (pixel pitch, LED type, orientation, connector position, finish) and immediately see the exact product they were configuring in 3D, then download a spec sheet for it. The dimensions, materials, and every value on that spec sheet had to genuinely match what was selected, and the PDF had to be generated dynamically rather than served from a set of fixed templates.

I modeled and materialized the LED strip components in Blender (extrusion profiles, end caps, connectors, LED types), then built the PlayCanvas app that reconstructs the exact configuration in real time. Rather than shipping a separate 3D model for every possible product code, the app procedurally assembles the strip from the customer's choices: pixel type (SMD or DIP), pitch, quantity, orientation, and connector side. On top of that I built a custom real-time mirror reflection so the product renders on a reflective floor the way it does in the marketing photography, and a stencil-based masking system for the optional lattice mask finish.

The 3D viewer sits inside an iframe on the wizard page, and I built the communication between the two: the wizard sends the current configuration to PlayCanvas over postMessage, and the PlayCanvas app tears down and rebuilds the model to match. The last piece is the spec sheet: I used pdf-lib to fill in a PDF template with the calculated dimensions, brightness and power figures, and matching product images, so the customer gets a proper VML datasheet for their exact configuration, generated on the spot instead of picked from a library of static PDFs.

A colleague built the wizard's HTML step-by-step interface. I did the 3D asset creation, the PlayCanvas configurator, the PDF generation, and the integration tying all three pieces together.

A step-by-step web configurator, live on VML's own website, where anyone can build a Lattice LED strip to spec: pick a pitch or length, an LED type, orientation, connector position, and finish, watch the exact product render in 3D as they go, and download a matching spec sheet PDF with the model number, dimensions, brightness, and power values already filled in.

Live and in active use on vml-technologies.com for VML's own sales team, external customers, and architects planning installations. Looking back, the parts I'm happiest with are the stencil-based masking, building the right 3D model procedurally from a handful of variables instead of a model per product code, and getting the PDF generation set up so the whole pipeline (3D view, spec sheet, and dimensions) stays in sync from one source of truth.