Manchester International Festival

#react #three #webdev #creativecoding

The artist's work, visible semi-obscured by the star field

Together with MIF and Tai Shani’s, I developed a virtual experience adjacent to the artist work, to be part of MIF’s larger Virtual Factory platform.

Video canvas displaying the artist's work

At the core, the microsite had to showcase nine episodes of Shai’s digital, video-based, artwork. The site should integrate into the existing online platform Virtual Factory, in which other artists have periodically been exhibited.

Progression of hut model, from GLB to point cloud

MIF’s vision was a 3D environment, in which users could pan through the artist’s works, and subsequently end up in front of a video canvas. Therefore, all models (modelled by the Artist herself), had to be converted to extremely low file size GLBs and optimized for the web. However, this proved too heavy on loading times, and we decided to use a single model’s vertices as positions for points, merging into the exterior point cloud.

Using perlin noise to create point cloud clusters

The artist wished for a star field, and I created a point cloud with Perlin noise, as opposed to randomness. Not only does this make vertex placement feel more natural, but at a certain level of noise detail/octaves, this technique creates vertex clusters. The cloud’s vertex positions were generated once on page load, making it computationally viable to animate the cloud in its entirety.

The hut floating in the middle of the point cloud

To generate a bloom/glowing effect, I masked a shader to only affect the point cloud, and leave the video canvas untouched.

Close up of the vertices on the hut's point cloud