Nike Team Kit
The Project
For the launch of the Nike Team Kit we wanted to explore the new fabic technologies in the shirt in micro detail. This meant being able to zoom in to see the very fibers of the shirt.
The Technology
The project was to be deployed to the Nike Football mobile app which allowed embedded html content to be viewed. To allow the user to interact with the shirt and be able to zoom into the shirts fabric, we used custom shaders and three.js to deliver the 3D model and materials.
My Work
The 3D model and textures equated to over 50MB of texture maps and over 6Million Tri 3D mesh. Which doesn't make for an efficient or optimal web based experience. We optimised the mesh to reduce the poly count to a usable level, which left the issue of 50Mb of texture maps. I additionally encountered an upper texture memory limit on mobile devices limiting the number of textures we could use for normals and textures.
Instead of using a baked texture map I instead used a tilable texture of the various fibres making up the shirt. I additionally embedded UV map based masks into the RGBA channels, to control where the tiled fibre maps were rendered on the 3D model.
Additional custom functionality was added to support multiple instances of the webgl player with different models on a single webpage, and to allow for intuitive interaction with the model whilst still being able to scroll the page.