WebGL – TBT Solid Series

Together with TBT, we developed an interactive WebGL viewer for their solid series product line, which is most recognizable by their brushed steel front, powder-coated column and their customizable acrylic frame. The smaller but taller solid mix series come in four different dispenser configurations. The larger solid series tower features 6, 8 or 10 dispenser modules as well as the integration of the Patriot1 or Patriot2 electronic lock system.

The 3D meshes have been modeled after CAD files and have been highly optimized for WebGL. The main issue with web is not so much drawing performance, but much more data sizes and download speeds. We reduced the triangle count as much as possible, removed unnecessary UVs and used compressed .jpeg files for textures. The .obj models have also been combined into a compressed custom format. Another optimization technique was to tile or “reuse” parts, especially on the configurable solid series tower. Every material type has been cut precisely into side, center and middle pieces. The UVs have been set out accordingly, to allow seamless repetition of textures across the surfaces. This allowed us to only import one of each piece and then to duplicate, mirror and position them to create the whole thing without any visual cuts.

The WebGL app has been created with ThreeJS. We handled the asset creation, import, visualization and scene construction. TBT took care of the interface, controls and further optimization.

You can try out the WebGL apps here, just click on the product you want to view and click on “3D”: http://www.tbt.at/en/dispensers-solid-series.xml 

Client: TBT elektronische Systeme