Portalis

Project Context

Portalis is an immersive 3D exploration game developed by Goodboy Digital that showcases a range of technical WebGL features. The experience lets users move through different environments using portals, with visual effects such as metallic surfaces, texture-mapped caustics and spatially rendered fog.

The project consisted of three key people: a designer and two developers, including myself as lead developer. Over roughly six months, we built an immersive 3D exploration game that allowed users to traverse worlds within worlds through portals.

As lead developer I oversaw development and redesigned the 3D render pipeline in our in-house game engine to accommodate layers, 3D geometry masking and layer-specific render data interception. That interception made it possible for fog to be rendered using different visual data depending on the layer.

Shader & GLSL Rendering Work

Custom GLSL shaders were used throughout the project to create realtime visual effects, environment transitions, layered fog rendering, geometry manipulation and animated surface behaviour. Vertex shader manipulation drove effects such as procedural ocean movement, while fragment shader work supported atmosphere, masking and post-processing-style effects across multiple environments.

OOP and ECS Architecture

The experience used object-oriented programming and entity-component-system architecture. This helped keep game logic separate from rendering, made systems more reusable and kept the codebase manageable as the experience grew.

Stencil Buffer Masks

Stencil buffer masks were used to create portals that the user could walk through to explore different environments. Without masking, geometry occupying the same space would visually intersect. I created a layer-based approach so groups of objects could be masked together instead of masking every object manually.

Physically Based Rendering

Physically based rendering techniques were used for metallic surfaces, such as pylons in the desert environment. This was one of the first uses of those techniques inside the company at the time.

Texture Mapping and Caustics

Texture mapping was used to fake caustics in the ocean environment. A physically accurate approach would have been too expensive, so the effect was achieved by mapping textures onto environment geometry. The ocean movement was driven by offsetting geometry in the vertex shader using a sine wave.

Spatial Audio

The experience used ambient background audio and spatial audio. Spatial sounds were positioned in 3D space, with volume determined by distance and direction. The calculations were handled in-house rather than through an external library, allowing the behaviour to be tailored to the experience.