IRÄYE
- Interactive Web GL Model
THE BRIEF
IRÄYE is a pioneering skincare brand that works with the lymphatic system. Rosenmond were tasked with creating IRÄYE's new Shopify experience and wanted a unique home page that would immerse users into the science led world of IRÄYE skincare. With this in mind, I was tasked with creating a web GL model of the eye serum product along with an animated world that represented the lymphatic system.
Final look on the website.
CAPTURING THE LOOK & FEEL
Rosenmond were able to give me a clear reference and direction for how they wanted the lymphatic strands to look. I began by creating a style frame to establish the look and feel. The strands representing the lymphatic system needed to feel delicate and the nodes that would travel across them needed to glow with light.
Establishing style frame
ORGANIC MOVEMENT
Once the look and feel had been established, I then focused on the motion. Using dynamic splines and fields, I was able to carefully art direct and refine the movement while keeping it feeling organic. One of the biggest impacts on the movement was how bendy the splines were. Here is an early test with a high bendiness setting. While it has more organic movement, it feels less flowing than the option with a lower bendiness setting.
The strands are bendy.
The strands are stiffer.
SETTING UP FOR INTERACTIVITY
Once everything was set up and good to go, the next challenge was exporting as a web GL file. This was a fairly new task for both myself and the web developer who would be implementing it onto the site. To begin with testing on my end, I used the Babylon Sandbox browser tool to preview the files. I was able to set up post processing to preview it with a glow effect and depth of field, though the tool used to implement the model on the site wasn't capable of this for the final result.
The web GL model previewed on Babylon Sandbox.
In addition to the web GL model, I also created a short looping video of the strands for the banner of the landing page. These were composited on top of a portrait to represent the lymphatic flow across the face.
THE RESULT
A unique, interactive shopping experience that showcases the product and science behind it.
Contact
