Interior Mapping Shader: Lightweight Depth Illusion for Procedural Cities

Sunday, May 18, 2025 | 2 minute read | Updated at Sunday, May 18, 2025

@ Jasper Stocker

✨ Interior Mapping Shader: Fake Depth, Real Presence

This prototype shader implements interior mapping — a technique that simulates depth and interior volume for windows and façades without creating any interior geometry. Ideal for procedural buildings and cityscapes, it provides a cost-effective way to add depth and variation to architecture using nothing more than a shader and a texture atlas.

🧠 How It Works

The shader uses parallax projection and ray intersection logic to calculate where a viewer would “see” into a virtual room from a flat window surface. Then it samples a room atlas texture accordingly.

🧩 Key Concepts

Room Grid Projection:
A façade is divided into configurable floors and slices using _RoomWidth, _RoomHeight, and _RoomDepth. Each pixel is traced into this virtual space.
Wall Intersection Logic:
In the fragment shader, a ray is cast from the camera into a cuboid volume behind the window. It determines which wall (back, left, right, top, or bottom) would be visible and maps the corresponding UV.
Atlas Sampling:
Each wall type maps to a region of a shared texture atlas (_AlbedoAtlas), making it possible to scroll or randomize interiors per window.
Animated Offset:
_RoomOffset and _ScrollSpeed can simulate environmental motion — like TVs flickering, rooms shifting, or dynamic lighting.

🔧 Shader Parameters

_RoomWidth, _RoomHeight, _RoomDepth: Controls the size and segmentation of the virtual room volume
_AlbedoAtlas: A 2D texture that holds interior visuals for each wall
_RoomOffset, _ScrollSpeed: Optional scrolling or jitter for variation
_ColorTint, _EmissionBoost: Style and light tweaking

🛠️ Use Cases

Procedural cityscapes where modeling every interior is impractical
Stylized games aiming for PS1/N64-level fidelity or aesthetic
VR/AR or mobile experiences that demand high performance
Background buildings that need to “feel alive” without cost

🧪 Bonus Tip

You can layer this shader with baked lighting, fake shadowing, or fog overlays to create even more depth illusion. Combining this with LOD switching can create a scalable visual architecture system.

If you’re interested in learning how this shader works under the hood or want a breakdown of the GLSL logic, feel free to reach out!

I’m a developer and systems designer specializing in procedural generation — from terrain and architecture to runtime logic and asset pipelines. For over a decade, I’ve been building tools and frameworks that enable dynamic content in games, with a focus on performance, modularity, and control.

Procedural Labs is my space to share experiments, devlogs, and prototypes — often built around graph-based systems, multithreaded generation, and stylized runtime rendering. I care about systems that are expressive for developers, friendly for designers, and efficient under load.

Whether it’s non-Euclidean space generation, Voronoi-based city layouts, or custom lighting via mesh data, I build tools that treat procedural generation as both a creative and engineering discipline.