A facehugger tribute with MediaPipe face tracking

· 1 min read · three.js, webgl, ar, mediapipe, launch

A facehugger creature floating in deep space under starlight, a Three.js tribute to Alien: Romulus

This is a small tribute to Alien: Romulus, made for the browser. It has two parts: a set piece you look at, and a filter you wear.

The facehugger floating in space

The scene #

A facehugger floats in deep space, under starlight. The camera work is borrowed from film: lens flares and a shallow depth of field, so the frame feels like a still from the movie and not a 3D model on a stage.

The filter #

The second part is the one that makes people laugh. With MediaPipe face tracking, the page can turn on a live facehugger filter: the creature locks onto your face through the camera and follows it. It is an interactive layer on top of a render, and it is also a small demonstration of real-time tracking and lighting in a web page.

Behind it #

  • Three.js and WebGL for the scene, with cinematic lighting,
  • MediaPipe for the face landmarks,
  • lens flares and depth of field to get the film look.

Videos #

I recorded the project in three short videos: the website with the trailers in 3D, the first look and a source code review.

Try it #

The scene is live at alien-facehugger.vercel.app, and the details are on the project page.

Related projects