Manchester International Festival

Web Development

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

Manchester International Festival (MIF) has announced Virtual Factory, a new series of artistic commissions inviting artists to create online and digital work that responds to The Factory, the landmark cultural space currently under construction, which will be MIF’s permanent home. The festival’s identity is designed by Knoth & Renner.

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

The final site had to be simplified for accessibility, whereby many of three.js’s features (like rendering the video to the canvas, instead of the video element) unfortunately had to be dropped.

Check out the final version at virtual-factory.co.uk, and the prototype version with all of its intended features here.