Production Basics

Production Basics


Web Based 3D Product Configurator


The Brief.


We were approached by Production Basics to create a port of their Product Configurator to run on modern browsers, with the intention of expanding it in the future. The original Configurator was created using Java and our Client wanted to move to the HTML 5 and WebGL APIs so no plug-ins were required to run the application.  

We had no access to the original code, only the source graphics so we had to figure out the logic system for ourselves. We reversed engineered the original Java version and created a thin layer, adapting the rule set to accept our existing APIs.


Using a rules based system, rather than a code heavy framework, we created a system that runs off custom scripts and databases, which enables easy implementation of new products or features.


We improved the animation hierarchy system for each Workbench to make the scenes easier to handle and reduce the memory footprint of the scenes.  The result is a system that is very powerful and enabled us to replicate the seamless effect of changing accessory widths if the dimensions of the Workbench are adjusted.

Configurator Details.


  • Choose from Three different Workbench Ranges;
    • C-Leg, featuring Hand Crank and Motorized height adjustment modes.
    • Easylift, featuring two frame types, 4 Post and Dual Leg, and Two height adjustment types, Hand Crank and Motorized.
    • RTW, featuring Hand Crank and Motorized height adjustment modes.
  • Choose between Standard Industrial Laminate and ESD Laminate.
  • Accessories will switch between the two material types when appropriate.
  • Each Workbench frame and worksurface is available in a variety of colours.
  • Each Workbench has a variety of accessories available, including lights, under-surface drawers and freestanding drawer units.
  • Product code tracker for easy reference on screen.
  • Once a configuration is created, the order form is populated for the user.


Technical Details.


  • Designed for all modern web browsers. 
  • Runs on Windows, Mac OS, Linux, IOS, Android, and all modern systems that are compatible with the WebGL graphics API.
  • Almost completely script driven, using our rules based system.
    • The author can efficiently add new products, create dependency list entries and choose how it interacts with other products.
    • Fast turn around time for adding new accessories and features.
  • If the user changes the dimensions of the workbench whilst having accessories attached, if there is a correct width version, the Configurator will adjust accordingly for seamless updates.
  • Once each scene is loaded, there are no loading times. Everything is loaded in to memory for a more immediate, responsive experience.