A 3D visual novel designed to promote the animated Netflix series, Arcane.

RiotX Arcane

Released
2021
Client
RIOT Games
Agency
North Kingdom
Tags
three.jswebglgameblender

A visual novel in the browser made by North Kingdom to promote the new series on Netflix: Arcane X


I developed the WebGL scenes through which you navigate, finding clues and hotspots that activate dialogues.

Image

Image

Image

Image

Tools

The most engaging aspect of my learning journey was developing tools in Blender to streamline the transformation of large, complex 3D scenes, which contain extensive geometry, into their final exported form, optimised and ready for realtime use.

The process began by eliminating all triangles not visible to the camera. Given that the cameras move along animated splines (paths), I could select the triangles visible at every frame. By marking all unselected (invisible) triangles, these could then be safely removed.

I then designed tools capable of infusing the scene with vibrant colors using an unlimited array of light volumes. These tools altered the vertex colors in various ways, adding depth and dimension to the scene.

The remaining triangles were merged and automatically mapped to two UV channels: one dedicated to baked shadows and the other for tiled texture atlases, optimizing the scene's visual fidelity and performance.

Moreover, the camera, which animates along the spline, was exported directly into a camera system within three.js, ensuring seamless integration of the 3D scenes with the web environment.

The materials were custom-crafted to accommodate all optimizations and simulate lighting effects, ensuring that the materials could also be replicated in Blender using nodes. This replication allowed for the final visuals to be previewed within Blender before export, ensuring accuracy and visual consistency.

Image
Image
Image

I went further by baking diffuse color, unlimited light emissive color, and reflective factors into attributes. This included optimizing the mesh by dividing it into chunks based on distance, removing invisible vertices, and baking lightmaps for ambient occlusion and shadows. Such optimizations facilitated a dynamic workflow for scene creation.

Additionally, settings for interactive hotspots were saved as nodes with metadata, which were then imported into the game, transforming Blender not just into a modeling tool but a comprehensive game editor. This approach greatly streamlined the development process, making it both efficient and convenient.