Lesson 0, Material 1: The Complete Flow from Grenade to Bullet Hole

CS2's smoke system operates through five coordinated steps that all interact with a single shared voxel grid. When a smoke grenade detonates, the engine first creates a 3D grid dividing space into thousands of invisible cubes called voxels. Next, a spreading algorithm fills these voxels outward from the grenade's center, checking six directions and respecting walls and obstacles—this is why smoke wraps around corners realistically rather than forming perfect spheres. When you fire a bullet through smoke, the interaction system traces the bullet's path and temporarily clears smoke data from every voxel along that line, creating a tunnel-shaped hole. The rendering system continuously reads this grid using raymarching, sending virtual rays from your camera through each pixel to determine where smoke exists and where bullets have created transparent gaps. Finally, the spreading algorithm runs throughout the smoke's lifetime, gradually refilling cleared voxels so bullet holes close over time. These five systems work seamlessly because they share the exact same underlying data structure—when one system modifies a voxel, all other systems see the change immediately without requiring messages or synchronization. You now have a complete mental model of how CS2's smoke coordinates every behavior from grenade explosion to bullet interaction through this unified voxel grid approach. The next lesson will examine what specific data each voxel stores and why this particular structure enables CS2's reactive smoke capabilities.

Recap

You learned that CS2's smoke uses a unified volumetric system where a single 3D data structure handles everything—rendering, vision blocking, and interactions. This is why bullets can carve holes and grenades can clear gaps, unlike traditional games that use separate, non-communicating systems.

The Complete Flow: From Grenade to Bullet Hole

When a smoke grenade detonates in CS2, five distinct steps happen in sequence, each building on the previous one to create the interactive smoke you experience in-game.

Step 1: Creating the Voxel Grid

The moment the grenade explodes, CS2 creates a 3D grid that divides the surrounding space into thousands of tiny invisible cubes called voxels. Think of it like overlaying an invisible 3D checkerboard over the explosion area—each square on that board is a voxel that can either be empty or filled with smoke. This grid becomes the foundation that every other system will read from and write to.

Step 2: Filling the Grid with Smoke

Next, a spreading algorithm fills the voxels outward from the grenade's center, similar to how water spreads across a flat surface. The algorithm checks each neighboring voxel in six directions (up, down, left, right, forward, backward) and fills them with smoke data if there's no wall or obstacle blocking the path. This continues outward until the smoke "runs out"—meaning a predetermined number of voxels have been filled—or the smoke hits walls that stop its spread. This is why CS2's smoke wraps around corners and fills rooms realistically instead of forming perfect spheres like older games.

Step 3: Bullet Interaction with the Grid

When you fire a bullet through the smoke, the interaction system traces the bullet's path through 3D space and identifies every voxel the bullet passes through. For each voxel along that path, the system temporarily reduces or clears the smoke data stored in those cubes. Because bullets travel through multiple voxels in a line, this creates a tunnel-shaped clear path through the smoke—not just a single point.

Step 4: Rendering Reads the Grid

The rendering system continuously reads the voxel grid to decide what to display on your screen. Using a technique called raymarching, it sends virtual rays from your camera through each pixel and checks which voxels contain smoke along that ray's path. Where voxels are filled with smoke data, it draws thick gray smoke. Where voxels were cleared by bullets (Step 3), it draws transparency—creating the visual hole you see. The rendering system doesn't create the holes; it simply reveals what the interaction system already changed in the grid.

Step 5: Gradual Refilling

The spreading algorithm doesn't stop after the initial fill. It continues running throughout the smoke's lifetime, gradually refilling voxels that were cleared by bullets. This is why bullet holes slowly close over time rather than staying permanent. The algorithm treats cleared voxels like temporary gaps and spreads smoke back into them from neighboring filled voxels, maintaining the smoke's intended volume.

Why This Coordination Works Seamlessly

All five systems—voxel grid creation, spreading, bullet interaction, rendering, and refilling—work with the exact same underlying data structure. When the interaction system clears a voxel in Step 3, it's modifying the same grid that the rendering system reads in Step 4. No messages need to be sent between systems. No synchronization is required. The moment one system changes a voxel's state, every other system sees that change immediately because they're all reading from and writing to the same shared grid.

This is the unified approach you learned about in action. The voxel grid acts as a single source of truth that coordinates everything automatically. Traditional games can't achieve this because their visual system (2D sprites) and gameplay system (invisible barriers) are completely separate—there's no shared data structure for them to coordinate through.

What You Can Now Visualize

You now have a complete mental model of CS2's smoke system from start to finish. You understand that when you throw a smoke grenade, you're triggering a five-step process: grid creation, intelligent spreading that respects walls, bullet interactions that carve temporary tunnels, continuous rendering that displays the current grid state, and gradual refilling that maintains smoke volume over time. Each step modifies or reads from the same voxel grid, which is why everything stays perfectly synchronized without complex coordination logic.

What's Next

You understand how all the systems coordinate through the voxel grid, but what exactly is this grid made of? Lesson 2 will break down the voxel grid itself—how these invisible cubes are structured, what data each cube stores, and why this specific data structure makes CS2's reactive smokes possible.