Josh Ingleby

3D / Motion Artist

Future Self

ROLE: 3D Modelling, Texturing, Kinect Integration, Facial Poses
DESC.: Digital Experience

AGENCY: Jam3
CLIENT: Orange / Publicis Conseil
PRODUCER: Sumit Ajwani
CREATIVE DIRECTION: Adrian Belina
WEBGL ENGINE: Tom Dysinski / Matt DesLauriers


Working closely with Jam3’s team to create a site allowing users to meet a future version of their self. Orange’s Future Self site celebrated the company’s 20 year anniversary by having users ask their future self about, well, the future.

The goal was ambitious to say the least — detailed 3D models rendered in the browser (!), face shapes adjusted to match a webcam photo, PLUS artificial intelligence.

Orange Future Self Example

Jam3’s process involved capturing actors’ facial movements with Kinect, applying to a 3D model, and then morphing and texturing the model to resemble the user’s own face. Likely a first time technical accomplishment for web — all rendered in the browser on the fly.

On my end, base characters, textures (clothing, hair, etc) and facial poses were created in Cinema 4D and tested with the actor’s “recorded” responses from their Kinect motion-capture data. Jam3 created an engine to dynamically reshape the 3D model based on the user’s webcam image. Working together the final renderings are a combination of revising textures on my end to accommodate the webGL environment, and textures modified by Jam3’s dev team in the experience.

Lastly, I also created the introductory video in the site loader — based off a still image but created 3D clouds, balloons, and Monorail in Cinema4D .

 WORK IN PROGRESS

SCULPTING: Outlines WIP sculpting of face from base low-poly mesh to create maps to appear higher quality.

POSE MODELLING: Various poses (“Blendshapes”) are linked to kinect motion capture data. Facial expressions are created by using a small % of many poses calculated.

FAUX 3D COMPOSITE: Intro scene’s source was a futuristic image cut out and projected to be able to add camera movement. 3D clouds and monorail (not pictured) were created to add realism.

Faux3D-intro

To see the site in action check out Jam3’s Case Study.

Comments are closed.