Cutting a Three.js product configurator from 16.7 MB to 2.4 MB

The report details the process of reducing the size of a 3D product configurator built using Three.js from 16.7 MB to 2.4 MB. Initially, the primary issue was the file size, which was too large for different devices and internet connections. After optimizing the geometry using Draco compression, the file size decreased significantly. However, further reduction was needed to make the configurator more accessible on various devices.

The report highlights that the majority of the file size was due to textures. Draco compression, while effective for geometry, did not significantly reduce texture sizes. The author then re-authored the textures at appropriate resolutions based on the camera's viewing distance, separating the maps by precision requirements. The base color map kept the highest resolution, while the normal, roughness/metalness, and ambient occlusion maps were compressed further.

The KTX2 format with Basis Universal was used, which allows textures to remain compressed on the GPU, reducing memory usage on mid-range devices.

The second problem encountered was colour consistency during colourway changes. The initial approach of simply changing the colour of the base texture led to an unnatural appearance. The author found a solution by separating the luminance (which carries textural details) from the chroma (which carries colour information) in the texture.

By changing only the chroma channel, the configurator maintained the appearance of the shoe while allowing for easy colourway changes. This approach preserved the integrity of the 3D model and improved the overall user experience.