Loading ...

Responses by Amélie Rosser, creative developer, Jam3

Background: Whether they are beside us or worlds away, we always hold our loved ones in our hearts. Interactive online poem “Love Lost” encourages people who have experienced the loss of a loved one to reflect and remember. Built with WebGL, users journey through five phases while revealing poetry through artful interaction.

Highlights: A WebGL-enabled heart beats and changes shape as people interact with it.

Challenges: Building the WebGL heart to morph and shapeshift, and integrating the score to naturally match up. The “Love Lost” title sequence at the beginning was technically challenging from a motion design perspective. It was created as a Bodymovin animation in After Effects, and the first iteration contained lots of masks for the typography. This didn’t perform as well or render correctly in some browsers and our motion designer had to recreate it using other simpler techniques.

Navigational structure: We wanted to reveal the poem throughout the journey of the experience. Each line would be paired with a unique heart sculpture that would spell out “h-e-a-r-t” as users progressed through the experience. We also wanted users to connect with the poem emotionally, so we created an interactive heart that reacts through mouse touch. And once users have connected with the heart sculpture, they would be taken to the next line of the poem until they reach the end.

Technical features: The morphing heart animation. Each heart sculpture started out around 350,000 vertices for high-poly sculpting. After exporting the normal maps for the detail, we reduced the polygon count to 9,950 vertices per heart. The reduction operation in Maya caused the vertex order, which is responsible for pairing the vertices with triangles, to change. If the vertex order is different from the two models with the same polygon count, they won’t be able to morph seamlessly together.

After exporting the heart models to .obj format and testing out the blend animation in WebGL, it became apparent that this technique wouldn’t work. The triangles would not connect to each other while morphing from one heart to the next. To fix this, we wrote custom Maya scripts to export indexed geometry and blend the shape data for each of the hearts.

lovelost.jam3.com/h

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In