Portalis

Project Context

Portalis is a 3D WebGL exploration project developed by Goodboy Digital to demonstrate portal rendering, layered environments, shader effects and spatial audio in the browser. Users could 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 a 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.

Engine Structure

The engine structure mattered most where rendering data had to change per layer. Portals, fog and masked geometry all needed to use shared scene systems while still letting individual layers provide different visual data to the renderer.

That is why the render-pipeline work was more important than generic game architecture: the project needed engine-level hooks for layered rendering, masking and fog rather than only scene-specific logic.

Stencil Buffer Masks

Stencil buffer masks made the portals possible. 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 faked caustics in the ocean environment. A physically accurate approach would have been too expensive, so the effect came from mapping textures onto environment geometry. The ocean movement was driven by offsetting geometry in the vertex shader using a sine wave.

Spatial Audio

Ambient audio and spatial audio were handled separately. 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.