Responses by DPDK

Background: Global running footwear company Nike recently released a sneaker line called Nike React. Named for the way it molds to consumers’ feet, the soft, comfortable sneaker uses a unique foam that Nike spent the last three years developing. The Nike Reactor site lets users experience the new shoe line by creating their own react runners.

Challenges: In terms of technology, the hardest part was corralling all the 3-D assets and animation into a cohesive whole. Creating a scalable architecture was a big challenge, especially as requirements kept evolving during development.

Time constraints: We had many additional ideas that we had to cut because of the deadline, like making the runner jump, adding slow motion shots and making the objects interactive. Having the hard cut-off forced us to make smart decisions and focus on polishing the must-have elements.

Anything new: The run cycles and 3-D models were created by our designers. In development, we put it all together and added custom particle systems on top of the skeleton. This was a fun process where we got an excuse to dig into some new animation techniques and libraries.

Technical features: Mapping some of the particle systems to the skeletal run cycle was computationally expensive. During the optimization phase, we stored the output animation data in JSON, and chose to load that instead, improving performance. Since our whole stack uses JavaScript, it was easy to move the expansive code out of the client. Also, the whole experience was developed mobile first, so be sure to try it out on your phone.