In 2016 I worked with Stimulant to produce this interactive site for City of Hope cancer treatment center. Inspired by Japanese wishing trees as well as the architecture that surrounds an actual tree at the treatment center. Users can submit wishes via the website or through hashtags on Facebook and Twitter and it would populate this tree on the web where anyone can browse them. I spearheaded the production of the entire website front-end and WebGL components from start to finish.
The tree itself is a typical L-System however in stylizing it we had to come up with multiple components. The leaves themselves were meshes of two triangles each, animated with a vertex shader. There's an internal lattice growing inside the trunk and the lattice was rendered on a separate pass then composited onto the trunk in post-processing. For the terrain we used baked ambient occlusion. I worked with Matt Yeager on building the architectural and ground elements.
The unfolding process was a unique challenge. I built a Maya rig that animated a sliced plane such that it folded and unfolded as desired. Then the transforms were ported over to THREE.js and TWEEN.js was used to chain the animation effect. On the last frame a 3D transformed HTML element was overlaid exactly on top of the geometry plane to give the final look.
The tree had to grow as well. This was all done through a vertex shader, each branch and leaf was assigned a start and end time and a uniform controlled all of the growth in one fell swoop.