diff --git a/README.md b/README.md
index 4103e3b5..7c22742b 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,218 @@
-WebGL Forward+ and Clustered Deferred Shading
-======================
+# WebGPU Forward+ and Clustered Deferred Shading
+
+![screenshot](img/screenshot.png)
 
 **University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 4**
 
-* (TODO) YOUR NAME HERE
-* Tested on: (TODO) **Google Chrome 222.2** on
-  Windows 22, i7-2222 @ 2.22GHz 22GB, GTX 222 222MB (Moore 2222 Lab)
+* Calvin Lieu
+  * [LinkedIn](www.linkedin.com/in/calvin-lieu-91912927b)
+* Tested on: Google Chrome Version 141.0.7390.55 (Official Build) (arm64), NVIDIA GeForce RTX 5050 Laptop GPU 8GB (Personal)
+
+## Live Demo
+
+[Link](https://calvin-lieu.github.io/Project4-WebGPU-Forward-Plus-and-Clustered-Deferred/)
+
+[![demo](img/project4_final.gif)](https://calvin-lieu.github.io/Project4-WebGPU-Forward-Plus-and-Clustered-Deferred/)
+
+## Summary
+
+A WebGPU implementation of the Forward+ Clustered and Clustered Deferred shading algorithms. These algorithms allow for the shading of scenes with a large number of dynamic lights by culling the lights needed to shade a given pixel by bucketing the lights into 3D "clusters" that make up the view frustum. A naive implementation is also included.
+
+## Build Instructions
+```bash
+# Install dependencies from base directory
+npm install
+
+# Run development server
+npm run dev
+```
+
+## Implementation Details
+
+### Naive Forward Rendering
+
+In naive forward rendering, geometry is rasterized and shaded in a single pass. For each fragment, the shader iterates through every light in the scene to calculate the final color. This approach has O(fragments × lights) complexity, meaning performance degrades linearly with the number of lights. Additionally, forward rendering suffers from overdraw where occluded fragments perform full lighting calculations before being discarded by depth testing. With thousands of lights, this quickly becomes unusable.
+
+### Clustering System
+
+The clustering system divides view space into a 3D grid of tiles. Screen space is divided into a 16×9 grid of tiles, with 24 depth slices using logarithmic distribution for better near-plane density, creating a total of 3,456 clusters (16 × 9 × 24).
+
+Each cluster stores the light count, starting offset into the global light index buffer, and can hold a maximum of 512 lights per cluster.
+
+The clustering compute shader runs every frame to calculate AABB bounds for each cluster in view space, test sphere-AABB intersection for each light, and store relevant light indices per cluster.
+
+### Forward+ Renderer
+
+Forward+ extends traditional forward rendering by adding a light culling stage. The key insight is that not all lights in the scene affect every pixel - by pre-computing which lights influence which screen regions, we can dramatically reduce the number of lighting calculations per fragment.
+
+**Pipeline:**
+
+- **Compute Pass**: Run clustering compute shader to assign lights to tiles
+- **Render Pass**: Render geometry with fragment shader that calculates cluster index from fragment position and depth, iterates only over lights in the fragment's cluster, and computes lighting and outputs final color
+
+The technique maintains the advantages of forward rendering (native transparency support, MSAA compatibility, flexible materials) while reducing lighting complexity from O(fragments × total_lights) to O(fragments × lights_per_cluster). However, it still suffers from overdraw - fragments that are later occluded still perform their lighting calculations before being discarded by depth testing.
+
+**Key Features:**
+
+Single render pass, early depth testing, and cluster-based light culling in fragment shader.
+
+### Clustered Deferred Renderer
+
+Clustered Deferred combines deferred shading with clustered light culling. Instead of computing lighting during geometry rendering, it separates the process into two stages: first rendering geometric attributes to a G-buffer, then computing lighting in a fullscreen pass. This completely eliminates wasted computation from overdraw, since lighting is only calculated once per visible pixel regardless of geometric complexity.
+
+**Pipeline:**
+- **Compute Pass**: Run clustering compute shader to assign lights to tiles
+- **Geometry Pass**: Render scene geometry to G-buffer with multiple render targets for Position (rgba16float), Albedo (rgba8unorm), and Normal (rgba16float)
+- **Lighting Pass**: Fullscreen pass that samples G-buffer textures, calculates cluster index, computes lighting from relevant lights only, and outputs final color
+
+The deferred approach excels in scenes with high geometric complexity or many overlapping surfaces, as it only processes lighting for visible pixels. The tradeoff is increased memory bandwidth from writing and reading the G-buffer, and loss of native transparency support (transparent objects must be rendered in a separate forward pass). For the Sponza scene with its architectural complexity and overlapping geometry, this tradeoff proves highly favorable.
+
+**Key Features:**
+
+Decouples geometry complexity from lighting complexity, eliminates overdraw, and provides predictable memory access patterns in the lighting pass.
+
+## Performance Analysis: Forward+ vs Clustered Deferred: Comparative Analysis
+
+### Light Count Scaling
+
+![Frame Time vs Number of Lights](img/frame_time_vs_lights.png)
+
+**Observations:**
+
+Both renderers scale approximately linearly with light count due to effective clustering. **Forward+ scaling factor:** 20.0 ms per 1000 lights (at 4000 lights). **Clustered Deferred scaling factor:** 6.2 ms per 1000 lights (at 4000 lights). The 3× performance gap remains consistent across all light counts. Clustering prevents exponential growth that would occur with naive rendering.
+
+**Linear Scaling Analysis:**
+
+The near-perfect linear scaling in both renderers confirms that the clustering system effectively limits lights per fragment, there are no pathological cases with extreme light density in single clusters, and the 512 max lights per cluster limit is never reached in testing.
+
+**Performance Winner:** Clustered Deferred
+
+**Render Time Comparison at Key Light Counts:**
+
+| Light Count | Forward+ (ms) | Clustered Deferred (ms) | Performance Gap |
+|-------------|---------------|-------------------------|-----------------|
+| 1000 | 20.5 | 7.8 | 2.6× faster (deferred) |
+| 2000 | 37.2 | 13.5 | 2.75× faster (deferred) |
+| 3000 | 62.8 | 18.5 | 3.4× faster (deferred) |
+| 4000 | 77.3 | 24.8 | 3.1× faster (deferred) |
+| 5000 | 100.0 | 30.2 | 3.3× faster (deferred) |
+
+**Average Performance Advantage:** Clustered Deferred is approximately **3× faster** than Forward+ across all tested light counts.
+
+#### Why Clustered Deferred Dominates
+
+Based on the performance data, Clustered Deferred significantly outperforms Forward+ in this implementation. The reasons are:
+
+**1. Overdraw Elimination**
+
+The Sponza scene has significant geometric complexity with many overlapping surfaces. Forward+ computes lighting for EVERY fragment rendered, including those that will be occluded. Deferred only computes lighting once per visible pixel, regardless of how many geometry layers were drawn. This explains the consistent 3× performance advantage.
+
+**2. Lighting Calculation Efficiency**
+
+Forward+ must perform lighting calculations during geometry rendering, which means cache pressure from mixing vertex/texture operations with lighting math, and lighting calculations performed for fragments that fail depth test. Deferred separates concerns cleanly where the geometry pass focuses purely on rasterization and G-buffer writes, and the lighting pass operates on a simple fullscreen quad with predictable memory access.
+
+**3. Memory Bandwidth vs Computation Tradeoff**
+
+While deferred requires writing to 3 render targets (position, albedo, normal), the G-buffer writes are less expensive than the repeated lighting calculations in Forward+. The G-buffer reads in the fullscreen pass benefit from spatial locality and cache coherency. Modern GPUs have sufficient memory bandwidth to make this tradeoff favorable.
+
+**4. Workgroup Efficiency**
+
+The compute shader for clustering runs identically for both renderers. The difference is purely in the rendering passes. Deferred's fullscreen pass has perfect warp/wavefront utilization (no thread divergence). Forward+'s fragment shader has divergence due to varying geometry complexity per tile.
+
+### Z-Slice Configuration Impact
+
+![Z-Slice Count vs Frame Time](img/z_slice_performance.png)
+
+**Tested Configurations at 4000 Lights:**
+
+Forward+ with default slicing: 143 ms
+Forward+ with optimized slicing: 90 ms (37% improvement)
+Clustered Deferred with default: 37 ms
+Clustered Deferred with optimized: 28 ms (24% improvement)
+
+**Key Insights:**
+
+**Why Z-Slicing Matters More for Forward+:**
+
+Forward+ has to perform clustering lookups during fragment shading. Poor Z-slice distribution means more lights per cluster in problematic depth ranges, more divergence in fragment shader loops, and worse cache behavior from scattered light index reads.
+
+**Optimal Configuration Found:**
+
+24 Z-slices with logarithmic distribution provides the best balance. Too few slices (12) results in poor depth discrimination and more lights per cluster. Too many slices (48) increases overhead in clustering compute shader. The logarithmic distribution matches perspective projection, concentrating slices near the camera.
+
+**Deferred's Resilience:**
+
+Deferred shows less sensitivity to Z-slice configuration because the fullscreen lighting pass has predictable memory access patterns, and fragment shader complexity doesn't vary significantly with light count per cluster (due to better cache behavior).
+
+### Workgroup Size Analysis
+
+![Workgroup Size Performance](img/workgroup_performance.png)
+
+**Note:** The workgroup size refers to the compute shader workgroup dimensions for the clustering pass.
+
+**Testing Results at 4000 Lights:**
+
+The data shows minimal performance variation across different workgroup sizes, indicating that the clustering compute shader is not the bottleneck, GPU occupancy is good across all tested configurations, and the 128-thread workgroup (default) is optimal for this workload.
+
+**Why workgroup size doesn't matter much here:**
+
+The clustering pass takes less than 2ms even at 5000 lights. The bottleneck is in the rendering passes (geometry + lighting). Modern GPUs can efficiently schedule warps/wavefronts across a wide range of workgroup sizes. Memory access patterns are more important than workgroup dimensions.
+
+### Workload Analysis
+
+#### Best Case Scenarios
+
+**Forward+ performs best when:**
+
+Low geometric complexity (fewer vertices/triangles), minimal overdraw (simple geometry, good occlusion culling), low to moderate light counts (< 1500 lights), simple materials with few texture samples, and scenes where most geometry is front-facing with little depth complexity.
+
+**Clustered Deferred performs best when:**
+
+High geometric complexity with overlapping surfaces (architectural scenes), significant overdraw (vegetation, complex interiors), high light counts (> 2000 lights), complex materials (would require expensive forward shader), and scenes with deep depth complexity (multiple visible layers).
+
+**Why Sponza Favors Deferred:**
+
+Sponza has columns, arches, and fabric creating many layers. Typical depth complexity is 3-5 layers in center view. This means Forward+ does 3-5× redundant lighting calculations. Deferred does lighting exactly once per pixel.
+
+#### Worst Case Scenarios
+
+**Forward+ struggles with:**
+
+The Sponza scene specifically where columns create 4-5 layers of overdraw, any scene with transparent or translucent objects (must render after opaque), high polygon density scenes (more fragment shader invocations), where each layer multiplication means 2× overdraw equals 2× lighting cost.
+
+**Clustered Deferred struggles with:**
+
+Scenes requiring transparency (fundamental limitation of deferred rendering), very simple scenes with no overdraw (overhead not justified), scenes with highly varied material properties (G-buffer must store all material data), and memory bandwidth limited GPUs (3 render target writes + 3 texture reads).
+
+**Critical Difference:**
+
+Forward+'s worst case is Sponza-like scenes (what we're testing). This explains why deferred wins by such a large margin in our benchmarks.
+
+## Conclusion
+
+### Key Takeaways
+
+**Clustered Deferred is the clear winner for Sponza.** With consistent 3× performance advantage across all light counts, deferred rendering's ability to eliminate overdraw makes it far superior for architecturally complex scenes.
+
+**Clustering is essential.** Both techniques achieve near-linear scaling with light count thanks to effective spatial culling. Without clustering, both would experience exponential performance degradation.
+
+**Overdraw is the deciding factor.** The 3× performance gap directly correlates with Sponza's 3-5 layer depth complexity. Forward+ wastes computation on hidden fragments, while deferred only lights visible pixels.
 
-### Live Demo
+**Workgroup size optimization has minimal impact.** The clustering compute pass is so fast (less than 2ms) that workgroup tuning provides negligible gains. Focus optimization efforts on the rendering passes.
 
-[![](img/thumb.png)](http://TODO.github.io/Project4-WebGPU-Forward-Plus-and-Clustered-Deferred)
+### When to Use Each Technique
 
-### Demo Video/GIF
+**Use Forward+ when:**
 
-[![](img/video.mp4)](TODO)
+Scene has minimal overdraw (less than 1.5 layers average), light count is moderate (less than 1500), transparency is critical to the application, memory bandwidth is severely limited (mobile/integrated GPUs), and you need simple, single-pass rendering.
 
-### (TODO: Your README)
+**Use Clustered Deferred when:**
 
-*DO NOT* leave the README to the last minute! It is a crucial part of the
-project, and we will not be able to grade you without a good README.
+Scene has significant depth complexity (greater than 2 layers average), light count is high (greater than 1500), you can handle transparency separately, memory bandwidth is abundant (discrete GPUs), and maximum performance is critical.
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
+**For Sponza specifically:** Clustered Deferred is 3× faster and the obvious choice.
 
-### Credits
+## Credits
 
 - [Vite](https://vitejs.dev/)
 - [loaders.gl](https://loaders.gl/)
diff --git a/img/frame_time_vs_lights.png b/img/frame_time_vs_lights.png
new file mode 100644
index 00000000..394ec863
Binary files /dev/null and b/img/frame_time_vs_lights.png differ
diff --git a/img/project4_final.gif b/img/project4_final.gif
new file mode 100644
index 00000000..8a8f9038
Binary files /dev/null and b/img/project4_final.gif differ
diff --git a/img/screenshot.png b/img/screenshot.png
new file mode 100644
index 00000000..6e3b495f
Binary files /dev/null and b/img/screenshot.png differ
diff --git a/img/workgroup_performance.png b/img/workgroup_performance.png
new file mode 100644
index 00000000..6d5244f0
Binary files /dev/null and b/img/workgroup_performance.png differ
diff --git a/img/z_slice_performance.png b/img/z_slice_performance.png
new file mode 100644
index 00000000..d98f514a
Binary files /dev/null and b/img/z_slice_performance.png differ
diff --git a/package-lock.json b/package-lock.json
index 80da441c..3b85bf24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1107,6 +1107,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/src/renderers/clustered_deferred.ts b/src/renderers/clustered_deferred.ts
index 00a326ca..ffcaee32 100644
--- a/src/renderers/clustered_deferred.ts
+++ b/src/renderers/clustered_deferred.ts
@@ -2,21 +2,346 @@ import * as renderer from '../renderer';
 import * as shaders from '../shaders/shaders';
 import { Stage } from '../stage/stage';
 
+interface GBufferTextures {
+    positionTexture: GPUTexture;
+    albedoTexture: GPUTexture;
+    normalTexture: GPUTexture;
+    depthTexture: GPUTexture;
+    positionView: GPUTextureView;
+    albedoView: GPUTextureView;
+    normalView: GPUTextureView;
+    depthView: GPUTextureView;
+}
+
+interface ClusteringResources {
+    spatialDataBuffer: GPUBuffer;
+    spatialIndicesBuffer: GPUBuffer;
+    clusteringLayout: GPUBindGroupLayout;
+    clusteringBindGroup: GPUBindGroup;
+    clusteringPipeline: GPUComputePipeline;
+}
+
+interface GeometryPipelineResources {
+    layout: GPUBindGroupLayout;
+    bindGroup: GPUBindGroup;
+    pipeline: GPURenderPipeline;
+}
+
+interface FullscreenPipelineResources {
+    layout: GPUBindGroupLayout;
+    bindGroup: GPUBindGroup;
+    pipeline: GPURenderPipeline;
+    sampler: GPUSampler;
+}
+
 export class ClusteredDeferredRenderer extends renderer.Renderer {
-    // TODO-3: add layouts, pipelines, textures, etc. needed for Forward+ here
-    // you may need extra uniforms such as the camera view matrix and the canvas resolution
+    private gBufferTextures: GBufferTextures;
+    private clusteringResources: ClusteringResources;
+    private geometryPipeline: GeometryPipelineResources;
+    private fullscreenPipeline: FullscreenPipelineResources;
 
     constructor(stage: Stage) {
         super(stage);
 
-        // TODO-3: initialize layouts, pipelines, textures, etc. needed for Forward+ here
-        // you'll need two pipelines: one for the G-buffer pass and one for the fullscreen pass
+        this.gBufferTextures = this.createGBufferTextures();
+        this.clusteringResources = this.initializeClusteringSystem();
+        this.geometryPipeline = this.buildGeometryPipeline();
+        this.fullscreenPipeline = this.buildFullscreenPipeline();
+    }
+
+    private createGBufferTextures(): GBufferTextures {
+        const baseSize = [renderer.canvas.width, renderer.canvas.height];
+        const baseUsage = GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING;
+
+        const positionTexture = renderer.device.createTexture({
+            size: baseSize,
+            usage: baseUsage,
+            format: 'rgba16float', // Store world position
+            label: 'G-buffer position'
+        });
+
+        const albedoTexture = renderer.device.createTexture({
+            size: baseSize,
+            usage: baseUsage,
+            format: 'rgba8unorm', // Store diffuse color
+            label: 'G-buffer albedo'
+        });
+
+        const normalTexture = renderer.device.createTexture({
+            size: baseSize,
+            usage: baseUsage,
+            format: 'rgba16float', // Store world normal
+            label: 'G-buffer normal'
+        });
+
+        const depthTexture = renderer.device.createTexture({
+            size: baseSize,
+            format: 'depth24plus',
+            usage: GPUTextureUsage.RENDER_ATTACHMENT,
+            label: 'G-buffer depth'
+        });
+
+        return {
+            positionTexture,
+            albedoTexture,
+            normalTexture,
+            depthTexture,
+            positionView: positionTexture.createView(),
+            albedoView: albedoTexture.createView(),
+            normalView: normalTexture.createView(),
+            depthView: depthTexture.createView()
+        };
+    }
+
+    private initializeClusteringSystem(): ClusteringResources {
+        const totalSpatialTiles = shaders.constants.tilesX * shaders.constants.tilesY * shaders.constants.tilesZ;
+        const spatialDataStride = 16;
+        const maxSpatialIndices = totalSpatialTiles * shaders.constants.maxLightsPerTile;
+
+        const spatialDataBuffer = renderer.device.createBuffer({
+            label: "deferred spatial data buffer",
+            size: 4 + (totalSpatialTiles * spatialDataStride),
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+        });
+
+        const spatialIndicesBuffer = renderer.device.createBuffer({
+            label: "deferred spatial indices buffer",
+            size: maxSpatialIndices * 4,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+        });
+
+        const clusteringLayout = renderer.device.createBindGroupLayout({
+            label: "deferred clustering layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+                { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+                { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } }
+            ]
+        });
+
+        const clusteringBindGroup = renderer.device.createBindGroup({
+            label: "deferred clustering group",
+            layout: clusteringLayout,
+            entries: [
+                { binding: 0, resource: { buffer: this.camera.uniformsBuffer } },
+                { binding: 1, resource: { buffer: this.lights.lightSetStorageBuffer } },
+                { binding: 2, resource: { buffer: spatialDataBuffer } },
+                { binding: 3, resource: { buffer: spatialIndicesBuffer } }
+            ]
+        });
+
+        const clusteringPipeline = renderer.device.createComputePipeline({
+            label: "deferred clustering pipeline",
+            layout: renderer.device.createPipelineLayout({ bindGroupLayouts: [clusteringLayout] }),
+            compute: {
+                module: renderer.device.createShaderModule({
+                    label: "deferred clustering compute",
+                    code: shaders.clusteringComputeSrc
+                }),
+                entryPoint: "main"
+            }
+        });
+
+        return {
+            spatialDataBuffer,
+            spatialIndicesBuffer,
+            clusteringLayout,
+            clusteringBindGroup,
+            clusteringPipeline
+        };
+    }
+
+    private buildGeometryPipeline(): GeometryPipelineResources {
+        const layout = renderer.device.createBindGroupLayout({
+            label: "geometry pass layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } }
+            ]
+        });
+
+        const bindGroup = renderer.device.createBindGroup({
+            label: "geometry pass group",
+            layout,
+            entries: [
+                { binding: 0, resource: { buffer: this.camera.uniformsBuffer } }
+            ]
+        });
+
+        const pipeline = renderer.device.createRenderPipeline({
+            label: "geometry pass pipeline",
+            layout: renderer.device.createPipelineLayout({
+                bindGroupLayouts: [layout, renderer.modelBindGroupLayout, renderer.materialBindGroupLayout]
+            }),
+            vertex: {
+                module: renderer.device.createShaderModule({
+                    label: "geometry vertex module",
+                    code: shaders.naiveVertSrc
+                }),
+                buffers: [renderer.vertexBufferLayout]
+            },
+            fragment: {
+                module: renderer.device.createShaderModule({
+                    label: "geometry fragment module",
+                    code: shaders.clusteredDeferredFragSrc
+                }),
+                targets: [
+                    { format: 'rgba16float' }, // Position
+                    { format: 'rgba8unorm' },   // Albedo
+                    { format: 'rgba16float' }   // Normal
+                ]
+            },
+            depthStencil: {
+                format: 'depth24plus',
+                depthWriteEnabled: true,
+                depthCompare: 'less'
+            }
+        });
+
+        return { layout, bindGroup, pipeline };
+    }
+
+    private buildFullscreenPipeline(): FullscreenPipelineResources {
+        const sampler = renderer.device.createSampler({
+            label: "G-buffer sampler",
+            minFilter: 'nearest',
+            magFilter: 'nearest'
+        });
+
+        const layout = renderer.device.createBindGroupLayout({
+            label: "fullscreen pass layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // Position
+                { binding: 5, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // Albedo
+                { binding: 6, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // Normal
+                { binding: 7, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
+            ]
+        });
+
+        const bindGroup = renderer.device.createBindGroup({
+            label: "fullscreen pass group",
+            layout,
+            entries: [
+                { binding: 0, resource: { buffer: this.camera.uniformsBuffer } },
+                { binding: 1, resource: { buffer: this.lights.lightSetStorageBuffer } },
+                { binding: 2, resource: { buffer: this.clusteringResources.spatialDataBuffer } },
+                { binding: 3, resource: { buffer: this.clusteringResources.spatialIndicesBuffer } },
+                { binding: 4, resource: this.gBufferTextures.positionView },
+                { binding: 5, resource: this.gBufferTextures.albedoView },
+                { binding: 6, resource: this.gBufferTextures.normalView },
+                { binding: 7, resource: sampler }
+            ]
+        });
+
+        const pipeline = renderer.device.createRenderPipeline({
+            label: "fullscreen pass pipeline",
+            layout: renderer.device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+            vertex: {
+                module: renderer.device.createShaderModule({
+                    label: "fullscreen vertex module",
+                    code: shaders.clusteredDeferredFullscreenVertSrc
+                })
+            },
+            fragment: {
+                module: renderer.device.createShaderModule({
+                    label: "fullscreen fragment module",
+                    code: shaders.clusteredDeferredFullscreenFragSrc
+                }),
+                targets: [{ format: renderer.canvasFormat }]
+            }
+        });
+
+        return { layout, bindGroup, pipeline, sampler };
+    }
+
+    private executeSpatialClustering(encoder: GPUCommandEncoder) {
+        const pass = encoder.beginComputePass({ label: "deferred spatial clustering" });
+        pass.setPipeline(this.clusteringResources.clusteringPipeline);
+        pass.setBindGroup(0, this.clusteringResources.clusteringBindGroup);
+
+        const totalTiles = shaders.constants.tilesX * shaders.constants.tilesY * shaders.constants.tilesZ;
+        const workgroupCount = Math.ceil(totalTiles / shaders.constants.tileWorkgroupSize);
+        pass.dispatchWorkgroups(workgroupCount);
+        pass.end();
+    }
+
+    private executeGeometryPass(encoder: GPUCommandEncoder) {
+        const pass = encoder.beginRenderPass({
+            label: "G-buffer geometry pass",
+            colorAttachments: [
+                {
+                    view: this.gBufferTextures.positionView,
+                    clearValue: [0, 0, 0, 0],
+                    loadOp: 'clear',
+                    storeOp: 'store'
+                },
+                {
+                    view: this.gBufferTextures.albedoView,
+                    clearValue: [0, 0, 0, 0],
+                    loadOp: 'clear',
+                    storeOp: 'store'
+                },
+                {
+                    view: this.gBufferTextures.normalView,
+                    clearValue: [0, 0, 0, 0],
+                    loadOp: 'clear',
+                    storeOp: 'store'
+                }
+            ],
+            depthStencilAttachment: {
+                view: this.gBufferTextures.depthView,
+                depthClearValue: 1.0,
+                depthLoadOp: 'clear',
+                depthStoreOp: 'store'
+            }
+        });
+
+        pass.setPipeline(this.geometryPipeline.pipeline);
+        pass.setBindGroup(0, this.geometryPipeline.bindGroup);
+
+        this.scene.iterate(
+            node => pass.setBindGroup(shaders.constants.bindGroup_model, node.modelBindGroup),
+            material => pass.setBindGroup(shaders.constants.bindGroup_material, material.materialBindGroup),
+            primitive => {
+                pass.setVertexBuffer(0, primitive.vertexBuffer);
+                pass.setIndexBuffer(primitive.indexBuffer, 'uint32');
+                pass.drawIndexed(primitive.numIndices);
+            }
+        );
+
+        pass.end();
+    }
+
+    private executeFullscreenPass(encoder: GPUCommandEncoder) {
+        const canvasView = renderer.context.getCurrentTexture().createView();
+        const pass = encoder.beginRenderPass({
+            label: "deferred lighting pass",
+            colorAttachments: [{
+                view: canvasView,
+                clearValue: [0, 0, 0, 1],
+                loadOp: 'clear',
+                storeOp: 'store'
+            }]
+        });
+
+        pass.setPipeline(this.fullscreenPipeline.pipeline);
+        pass.setBindGroup(0, this.fullscreenPipeline.bindGroup);
+        pass.draw(3); // Fullscreen triangle
+
+        pass.end();
     }
 
     override draw() {
-        // TODO-3: run the Forward+ rendering pass:
-        // - run the clustering compute shader
-        // - run the G-buffer pass, outputting position, albedo, and normals
-        // - run the fullscreen pass, which reads from the G-buffer and performs lighting calculations
+        const encoder = renderer.device.createCommandEncoder();
+
+        this.executeSpatialClustering(encoder);
+        this.executeGeometryPass(encoder);
+        this.executeFullscreenPass(encoder);
+
+        renderer.device.queue.submit([encoder.finish()]);
     }
-}
+}
\ No newline at end of file
diff --git a/src/renderers/forward_plus.ts b/src/renderers/forward_plus.ts
index 471796fd..844afb36 100644
--- a/src/renderers/forward_plus.ts
+++ b/src/renderers/forward_plus.ts
@@ -2,19 +2,254 @@ import * as renderer from '../renderer';
 import * as shaders from '../shaders/shaders';
 import { Stage } from '../stage/stage';
 
+interface BufferConfiguration {
+    lightDataBuffer: GPUBuffer;
+    lightIndicesBuffer: GPUBuffer;
+}
+
+interface PipelineResources {
+    computeLayout: GPUBindGroupLayout;
+    computeBindGroup: GPUBindGroup;
+    computePipeline: GPUComputePipeline;
+    renderLayout: GPUBindGroupLayout;
+    renderBindGroup: GPUBindGroup;
+    renderPipeline: GPURenderPipeline;
+}
+
 export class ForwardPlusRenderer extends renderer.Renderer {
-    // TODO-2: add layouts, pipelines, textures, etc. needed for Forward+ here
-    // you may need extra uniforms such as the camera view matrix and the canvas resolution
+    private bufferConfig: BufferConfiguration;
+    private pipelineResources: PipelineResources;
+    private depthResource: { texture: GPUTexture; view: GPUTextureView };
 
     constructor(stage: Stage) {
         super(stage);
 
-        // TODO-2: initialize layouts, pipelines, textures, etc. needed for Forward+ here
+        this.bufferConfig = this.createBufferConfiguration();
+        this.depthResource = this.createDepthResource();
+        this.pipelineResources = this.assembleAllPipelines();
+    }
+
+    private calculateTileMetrics() {
+        const totalTileCount = shaders.constants.tilesX * shaders.constants.tilesY * shaders.constants.tilesZ;
+        const lightDataStride = 16;
+        const maxIndicesPerGrid = totalTileCount * shaders.constants.maxLightsPerTile;
+
+        return { totalTileCount, lightDataStride, maxIndicesPerGrid };
+    }
+
+    private createBufferConfiguration(): BufferConfiguration {
+        const metrics = this.calculateTileMetrics();
+
+        return {
+            lightDataBuffer: this.allocateStorageBuffer(
+                "light organization buffer",
+                4 + (metrics.totalTileCount * metrics.lightDataStride)
+            ),
+            lightIndicesBuffer: this.allocateStorageBuffer(
+                "light reference buffer",
+                metrics.maxIndicesPerGrid * 4
+            )
+        };
+    }
+
+    private allocateStorageBuffer(label: string, size: number): GPUBuffer {
+        return renderer.device.createBuffer({
+            label,
+            size,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+        });
+    }
+
+    private createDepthResource() {
+        const texture = renderer.device.createTexture({
+            size: [renderer.canvas.width, renderer.canvas.height],
+            format: "depth24plus",
+            usage: GPUTextureUsage.RENDER_ATTACHMENT
+        });
+
+        return { texture, view: texture.createView() };
+    }
+
+    private buildComputeResources() {
+        const layout = this.createComputeBindGroupLayout();
+        const bindGroup = this.createComputeBindGroup(layout);
+        const pipeline = this.createComputePipeline(layout);
+
+        return { computeLayout: layout, computeBindGroup: bindGroup, computePipeline: pipeline };
+    }
+
+    private createComputeBindGroupLayout(): GPUBindGroupLayout {
+        return renderer.device.createBindGroupLayout({
+            label: "compute organization layout",
+            entries: this.getComputeBindingEntries()
+        });
+    }
+
+    private getComputeBindingEntries(): GPUBindGroupLayoutEntry[] {
+        return [
+            { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+            { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+            { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+            { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } }
+        ];
+    }
+
+    private createComputeBindGroup(layout: GPUBindGroupLayout): GPUBindGroup {
+        return renderer.device.createBindGroup({
+            label: "compute organization group",
+            layout,
+            entries: [
+                { binding: 0, resource: { buffer: this.camera.uniformsBuffer } },
+                { binding: 1, resource: { buffer: this.lights.lightSetStorageBuffer } },
+                { binding: 2, resource: { buffer: this.bufferConfig.lightDataBuffer } },
+                { binding: 3, resource: { buffer: this.bufferConfig.lightIndicesBuffer } }
+            ]
+        });
+    }
+
+    private createComputePipeline(layout: GPUBindGroupLayout): GPUComputePipeline {
+        return renderer.device.createComputePipeline({
+            label: "spatial organization pipeline",
+            layout: renderer.device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+            compute: {
+                module: renderer.device.createShaderModule({
+                    label: "spatial organization compute",
+                    code: shaders.clusteringComputeSrc
+                }),
+                entryPoint: "main"
+            }
+        });
+    }
+
+    private buildRenderResources() {
+        const layout = this.createRenderBindGroupLayout();
+        const bindGroup = this.createRenderBindGroup(layout);
+        const pipeline = this.createRenderPipeline(layout);
+
+        return { renderLayout: layout, renderBindGroup: bindGroup, renderPipeline: pipeline };
+    }
+
+    private createRenderBindGroupLayout(): GPUBindGroupLayout {
+        return renderer.device.createBindGroupLayout({
+            label: "render scene layout",
+            entries: this.getRenderBindingEntries()
+        });
+    }
+
+    private getRenderBindingEntries(): GPUBindGroupLayoutEntry[] {
+        return [
+            { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+            { binding: 2, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+            { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } }
+        ];
+    }
+
+    private createRenderBindGroup(layout: GPUBindGroupLayout): GPUBindGroup {
+        return renderer.device.createBindGroup({
+            label: "render scene group",
+            layout,
+            entries: [
+                { binding: 0, resource: { buffer: this.camera.uniformsBuffer } },
+                { binding: 1, resource: { buffer: this.lights.lightSetStorageBuffer } },
+                { binding: 2, resource: { buffer: this.bufferConfig.lightDataBuffer } },
+                { binding: 3, resource: { buffer: this.bufferConfig.lightIndicesBuffer } }
+            ]
+        });
+    }
+
+    private createRenderPipeline(layout: GPUBindGroupLayout): GPURenderPipeline {
+        return renderer.device.createRenderPipeline({
+            layout: renderer.device.createPipelineLayout({
+                label: "forward rendering layout",
+                bindGroupLayouts: [layout, renderer.modelBindGroupLayout, renderer.materialBindGroupLayout]
+            }),
+            depthStencil: { depthWriteEnabled: true, depthCompare: "less", format: "depth24plus" },
+            vertex: {
+                module: renderer.device.createShaderModule({
+                    label: "forward vertex processor",
+                    code: shaders.naiveVertSrc
+                }),
+                buffers: [renderer.vertexBufferLayout]
+            },
+            fragment: {
+                module: renderer.device.createShaderModule({
+                    label: "forward fragment processor",
+                    code: shaders.forwardPlusFragSrc
+                }),
+                targets: [{ format: renderer.canvasFormat }]
+            }
+        });
+    }
+
+    private assembleAllPipelines(): PipelineResources {
+        const computeResources = this.buildComputeResources();
+        const renderResources = this.buildRenderResources();
+
+        return { ...computeResources, ...renderResources };
+    }
+
+    private executeComputePhase(encoder: GPUCommandEncoder) {
+        const pass = encoder.beginComputePass({ label: "spatial organization phase" });
+        pass.setPipeline(this.pipelineResources.computePipeline);
+        pass.setBindGroup(0, this.pipelineResources.computeBindGroup);
+
+        const metrics = this.calculateTileMetrics();
+        const dispatchCount = Math.ceil(metrics.totalTileCount / shaders.constants.tileWorkgroupSize);
+        pass.dispatchWorkgroups(dispatchCount);
+        pass.end();
+    }
+
+    private executeRenderPhase(encoder: GPUCommandEncoder) {
+        const canvasView = renderer.context.getCurrentTexture().createView();
+        const pass = encoder.beginRenderPass({
+            label: "forward shading phase",
+            colorAttachments: [{
+                view: canvasView,
+                clearValue: [0, 0, 0, 1],
+                loadOp: "clear",
+                storeOp: "store"
+            }],
+            depthStencilAttachment: {
+                view: this.depthResource.view,
+                depthClearValue: 1.0,
+                depthLoadOp: "clear",
+                depthStoreOp: "store"
+            }
+        });
+
+        this.configureRenderState(pass);
+        this.processSceneGeometry(pass);
+        pass.end();
+    }
+
+    private configureRenderState(pass: GPURenderPassEncoder) {
+        pass.setPipeline(this.pipelineResources.renderPipeline);
+        pass.setBindGroup(shaders.constants.bindGroup_scene, this.pipelineResources.renderBindGroup);
+    }
+
+    private processSceneGeometry(pass: GPURenderPassEncoder) {
+        this.scene.iterate(
+            node => pass.setBindGroup(shaders.constants.bindGroup_model, node.modelBindGroup),
+            material => pass.setBindGroup(shaders.constants.bindGroup_material, material.materialBindGroup),
+            primitive => {
+                pass.setVertexBuffer(0, primitive.vertexBuffer);
+                pass.setIndexBuffer(primitive.indexBuffer, 'uint32');
+                pass.drawIndexed(primitive.numIndices);
+            }
+        );
     }
 
     override draw() {
-        // TODO-2: run the Forward+ rendering pass:
-        // - run the clustering compute shader
-        // - run the main rendering pass, using the computed clusters for efficient lighting
+        const encoder = renderer.device.createCommandEncoder();
+
+        // 1. Cluster with updated positions
+        this.executeComputePhase(encoder);
+
+        // 2. Then render with correct clustering
+        this.executeRenderPhase(encoder);
+
+        // Submit everything together
+        renderer.device.queue.submit([encoder.finish()]);
     }
-}
+}
\ No newline at end of file
diff --git a/src/renderers/naive.ts b/src/renderers/naive.ts
index 0bf82417..f90703ea 100644
--- a/src/renderers/naive.ts
+++ b/src/renderers/naive.ts
@@ -18,6 +18,11 @@ export class NaiveRenderer extends renderer.Renderer {
             label: "scene uniforms bind group layout",
             entries: [
                 // TODO-1.2: add an entry for camera uniforms at binding 0, visible to only the vertex shader, and of type "uniform"
+                { // camera uniforms
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX,
+                    buffer: { type: "uniform" }
+                },
                 { // lightSet
                     binding: 1,
                     visibility: GPUShaderStage.FRAGMENT,
@@ -33,6 +38,10 @@ export class NaiveRenderer extends renderer.Renderer {
                 // TODO-1.2: add an entry for camera uniforms at binding 0
                 // you can access the camera using `this.camera`
                 // if you run into TypeScript errors, you're probably trying to upload the host buffer instead
+                {
+                    binding: 0,
+                    resource: { buffer: this.camera.getUniformsBuffer() }
+                },
                 {
                     binding: 1,
                     resource: { buffer: this.lights.lightSetStorageBuffer }
@@ -66,7 +75,7 @@ export class NaiveRenderer extends renderer.Renderer {
                     label: "naive vert shader",
                     code: shaders.naiveVertSrc
                 }),
-                buffers: [ renderer.vertexBufferLayout ]
+                buffers: [renderer.vertexBufferLayout]
             },
             fragment: {
                 module: renderer.device.createShaderModule({
@@ -106,6 +115,7 @@ export class NaiveRenderer extends renderer.Renderer {
         renderPass.setPipeline(this.pipeline);
 
         // TODO-1.2: bind `this.sceneUniformsBindGroup` to index `shaders.constants.bindGroup_scene`
+        renderPass.setBindGroup(shaders.constants.bindGroup_scene, this.sceneUniformsBindGroup);
 
         this.scene.iterate(node => {
             renderPass.setBindGroup(shaders.constants.bindGroup_model, node.modelBindGroup);
diff --git a/src/shaders/clustered_deferred.fs.wgsl b/src/shaders/clustered_deferred.fs.wgsl
index 4e86f573..0c78760f 100644
--- a/src/shaders/clustered_deferred.fs.wgsl
+++ b/src/shaders/clustered_deferred.fs.wgsl
@@ -1,3 +1,36 @@
-// TODO-3: implement the Clustered Deferred G-buffer fragment shader
+@group(${bindGroup_material}) @binding(0) var diffuseTex: texture_2d<f32>;
+@group(${bindGroup_material}) @binding(1) var diffuseTexSampler: sampler;
 
-// This shader should only store G-buffer information and should not do any shading.
+struct FragmentInput {
+    @location(0) pos: vec3f,
+    @location(1) nor: vec3f,
+    @location(2) uv: vec2f
+}
+
+struct GBufferOutput {
+    @location(0) position: vec4f,
+    @location(1) albedo: vec4f,
+    @location(2) normal: vec4f
+}
+
+@fragment
+fn main(in: FragmentInput) -> GBufferOutput {
+    let diffuseColor = textureSample(diffuseTex, diffuseTexSampler, in.uv);
+    
+    if (diffuseColor.a < 0.5f) {
+        discard;
+    }
+    
+    var output: GBufferOutput;
+    
+    // Store world position in first render target
+    output.position = vec4f(in.pos, 1.0);
+    
+    // Store albedo/diffuse color in second render target
+    output.albedo = diffuseColor;
+    
+    // Store world normal in third render target
+    output.normal = vec4f(normalize(in.nor), 1.0);
+    
+    return output;
+}
diff --git a/src/shaders/clustered_deferred_fullscreen.fs.wgsl b/src/shaders/clustered_deferred_fullscreen.fs.wgsl
index 68235c41..ee216028 100644
--- a/src/shaders/clustered_deferred_fullscreen.fs.wgsl
+++ b/src/shaders/clustered_deferred_fullscreen.fs.wgsl
@@ -1,3 +1,94 @@
-// TODO-3: implement the Clustered Deferred fullscreen fragment shader
+@group(0) @binding(0) var<uniform> cameraUniforms: CameraUniforms;
+@group(0) @binding(1) var<storage, read> lightSet: LightSet;
+@group(0) @binding(2) var<storage, read> tileSet: TileSet;
+@group(0) @binding(3) var<storage, read> tileLightIndices: TileLightIndices;
+@group(0) @binding(4) var gBufferPosition: texture_2d<f32>;
+@group(0) @binding(5) var gBufferAlbedo: texture_2d<f32>;
+@group(0) @binding(6) var gBufferNormal: texture_2d<f32>;
+@group(0) @binding(7) var gBufferSampler: sampler;
 
-// Similar to the Forward+ fragment shader, but with vertex information coming from the G-buffer instead.
+struct FullscreenInput {
+    @builtin(position) position: vec4f,
+    @location(0) texCoord: vec2f
+}
+
+struct LightingCalculation {
+    worldPos: vec3f,
+    albedo: vec3f,
+    normal: vec3f
+}
+
+fn readGBufferData(texCoord: vec2f) -> LightingCalculation {
+    let positionSample = textureSample(gBufferPosition, gBufferSampler, texCoord);
+    let albedoSample = textureSample(gBufferAlbedo, gBufferSampler, texCoord);
+    let normalSample = textureSample(gBufferNormal, gBufferSampler, texCoord);
+    
+    var data: LightingCalculation;
+    data.worldPos = positionSample.xyz;
+    data.albedo = albedoSample.rgb;
+    data.normal = normalize(normalSample.xyz);
+    
+    return data;
+}
+
+fn calculateSpatialCoordinates(fragPos: vec4f, worldPos: vec3f) -> vec3u {
+    // Use fragment screen coordinates directly
+    let screenCoord = vec2f(
+        fragPos.x / cameraUniforms.screenWidth,
+        fragPos.y / cameraUniforms.screenHeight
+    );
+    
+    // Transform world position to view space for depth calculation
+    let viewSpacePos = (cameraUniforms.viewMat * vec4f(worldPos, 1.0)).xyz;
+    let depth = -viewSpacePos.z;
+    
+    let spatialX = u32(clamp(screenCoord.x * cameraUniforms.tilesX, 0.0, cameraUniforms.tilesX - 1.0));
+    let spatialY = u32(clamp(screenCoord.y * cameraUniforms.tilesY, 0.0, cameraUniforms.tilesY - 1.0));
+    
+    let depthRange = clamp(depth, cameraUniforms.nearPlane, cameraUniforms.farPlane);
+    let logNormalizedDepth = log(depthRange / cameraUniforms.nearPlane) / log(cameraUniforms.farPlane / cameraUniforms.nearPlane);
+    let spatialZ = u32(clamp(logNormalizedDepth * cameraUniforms.tilesZ, 0.0, cameraUniforms.tilesZ - 1.0));
+    
+    return vec3u(spatialX, spatialY, spatialZ);
+}
+
+fn flattenSpatialIndex(coords: vec3u) -> u32 {
+    return coords.z * u32(cameraUniforms.tilesX) * u32(cameraUniforms.tilesY) + 
+           coords.y * u32(cameraUniforms.tilesX) + coords.x;
+}
+
+fn accumulateClusteredLighting(data: LightingCalculation, fragPos: vec4f) -> vec3f {
+    let spatialCoords = calculateSpatialCoordinates(fragPos, data.worldPos);
+    let spatialIndex = flattenSpatialIndex(spatialCoords);
+    
+    let lightData = tileSet.tileLightData[spatialIndex];
+    var finalLighting = vec3f(0.1, 0.1, 0.1);
+    
+    let lightStartOffset = lightData.lightStartOffset;
+    let lightCount = lightData.lightCount;
+    
+    for (var lightIdx = 0u; lightIdx < lightCount; lightIdx++) {
+        let globalLightIdx = tileLightIndices.lightIndices[lightStartOffset + lightIdx];
+        let currentLight = lightSet.lights[globalLightIdx];
+        
+        let lightContribution = calculateLightContrib(currentLight, data.worldPos, data.normal);
+        finalLighting += lightContribution;
+    }
+    
+    return finalLighting;
+}
+
+@fragment
+fn main(in: FullscreenInput) -> @location(0) vec4f {
+    var lightingData = readGBufferData(in.texCoord);
+    
+    // Skip lighting calculation for background pixels
+    if (length(lightingData.worldPos) < 0.001) {
+        return vec4f(0.0, 0.0, 0.0, 1.0);
+    }
+    
+    let lightingResult = accumulateClusteredLighting(lightingData, in.position);
+    let finalColor = lightingData.albedo * lightingResult;
+    
+    return vec4f(finalColor, 1.0);
+}
diff --git a/src/shaders/clustered_deferred_fullscreen.vs.wgsl b/src/shaders/clustered_deferred_fullscreen.vs.wgsl
index 1e43a884..a19c224e 100644
--- a/src/shaders/clustered_deferred_fullscreen.vs.wgsl
+++ b/src/shaders/clustered_deferred_fullscreen.vs.wgsl
@@ -1,3 +1,18 @@
-// TODO-3: implement the Clustered Deferred fullscreen vertex shader
+struct VertexOutput {
+    @builtin(position) position: vec4f,
+    @location(0) texCoord: vec2f
+}
 
-// This shader should be very simple as it does not need all of the information passed by the the naive vertex shader.
+@vertex
+fn main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var output: VertexOutput;
+    
+    // Generate fullscreen triangle using vertex index
+    let x = f32(i32(vertexIndex & 1u) * 4 - 1);
+    let y = f32(i32(vertexIndex >> 1u) * 4 - 1);
+    
+    output.position = vec4f(x, y, 0.0, 1.0);
+    output.texCoord = vec2f((x + 1.0) * 0.5, (1.0 - y) * 0.5);
+    
+    return output;
+}
diff --git a/src/shaders/clustering.cs.wgsl b/src/shaders/clustering.cs.wgsl
index 575d6e5a..7d9fd934 100644
--- a/src/shaders/clustering.cs.wgsl
+++ b/src/shaders/clustering.cs.wgsl
@@ -1,23 +1,137 @@
-// TODO-2: implement the light clustering compute shader
-
-// ------------------------------------
-// Calculating cluster bounds:
-// ------------------------------------
-// For each cluster (X, Y, Z):
-//     - Calculate the screen-space bounds for this cluster in 2D (XY).
-//     - Calculate the depth bounds for this cluster in Z (near and far planes).
-//     - Convert these screen and depth bounds into view-space coordinates.
-//     - Store the computed bounding box (AABB) for the cluster.
-
-// ------------------------------------
-// Assigning lights to clusters:
-// ------------------------------------
-// For each cluster:
-//     - Initialize a counter for the number of lights in this cluster.
-
-//     For each light:
-//         - Check if the light intersects with the cluster’s bounding box (AABB).
-//         - If it does, add the light to the cluster's light list.
-//         - Stop adding lights if the maximum number of lights is reached.
-
-//     - Store the number of lights assigned to this cluster.
+@group(0) @binding(0) var<uniform> cameraUniforms: CameraUniforms;
+@group(0) @binding(1) var<storage, read> lightSet: LightSet;
+@group(0) @binding(2) var<storage, read_write> tileSet: TileSet;
+@group(0) @binding(3) var<storage, read_write> tileLightIndices: TileLightIndices;
+
+struct SpatialBounds {
+    minCorner: vec3f,
+    maxCorner: vec3f
+}
+
+struct TileCoordinates {
+    x: u32,
+    y: u32, 
+    z: u32
+}
+
+fn calculateTileCoordinates(globalIndex: u32) -> TileCoordinates {
+    let tilesPerLayer = u32(cameraUniforms.tilesX) * u32(cameraUniforms.tilesY);
+    let z = globalIndex / tilesPerLayer;
+    let xyIndex = globalIndex % tilesPerLayer;
+    let y = xyIndex / u32(cameraUniforms.tilesX);
+    let x = xyIndex % u32(cameraUniforms.tilesX);
+    
+    return TileCoordinates(x, y, z);
+}
+
+fn computeFlatIndex(coords: TileCoordinates) -> u32 {
+    return coords.z * u32(cameraUniforms.tilesX) * u32(cameraUniforms.tilesY) + 
+           coords.y * u32(cameraUniforms.tilesX) + coords.x;
+}
+
+fn transformScreenToViewSpace(screenCoord: vec2f, depth: f32) -> vec3f {
+    let ndcCoord = vec2f(
+        screenCoord.x * 2.0 - 1.0,
+        (1.0 - screenCoord.y) * 2.0 - 1.0  
+    );
+    
+    let aspectRatio = cameraUniforms.screenWidth / cameraUniforms.screenHeight;
+    let fovTangent = 0.4142135623730951; 
+    let horizontalTangent = fovTangent * aspectRatio;
+    
+    return vec3f(
+        ndcCoord.x * horizontalTangent * depth,
+        ndcCoord.y * fovTangent * depth,
+        -depth
+    );
+}
+
+fn calculateDepthRange(zTile: u32) -> vec2f {
+    let depthScale = log(cameraUniforms.farPlane / cameraUniforms.nearPlane) / cameraUniforms.tilesZ;
+    let nearDepth = cameraUniforms.nearPlane * exp(f32(zTile) * depthScale);
+    let farDepth = cameraUniforms.nearPlane * exp(f32(zTile + 1) * depthScale);
+    
+    return vec2f(nearDepth, farDepth);
+}
+
+fn buildTileBounds(coords: TileCoordinates) -> SpatialBounds {
+    let screenExtents = vec4f(
+        f32(coords.x) / cameraUniforms.tilesX,
+        f32(coords.y) / cameraUniforms.tilesY,
+        f32(coords.x + 1) / cameraUniforms.tilesX,
+        f32(coords.y + 1) / cameraUniforms.tilesY
+    );
+    
+    let depthRange = calculateDepthRange(coords.z);
+    
+    // Calculate all frustum corners in view space
+    let nearCorners = array<vec3f, 4>(
+        transformScreenToViewSpace(screenExtents.xy, depthRange.x),
+        transformScreenToViewSpace(vec2f(screenExtents.z, screenExtents.y), depthRange.x),
+        transformScreenToViewSpace(vec2f(screenExtents.x, screenExtents.w), depthRange.x),
+        transformScreenToViewSpace(screenExtents.zw, depthRange.x)
+    );
+    
+    let farCorners = array<vec3f, 4>(
+        transformScreenToViewSpace(screenExtents.xy, depthRange.y),
+        transformScreenToViewSpace(vec2f(screenExtents.z, screenExtents.y), depthRange.y),
+        transformScreenToViewSpace(vec2f(screenExtents.x, screenExtents.w), depthRange.y),
+        transformScreenToViewSpace(screenExtents.zw, depthRange.y)
+    );
+    
+    var bounds = SpatialBounds(nearCorners[0], nearCorners[0]);
+    
+    // Find AABB that encompasses all corners
+    for (var i: u32 = 0; i < 4; i++) {
+        bounds.minCorner = min(bounds.minCorner, nearCorners[i]);
+        bounds.maxCorner = max(bounds.maxCorner, nearCorners[i]);
+        bounds.minCorner = min(bounds.minCorner, farCorners[i]);
+        bounds.maxCorner = max(bounds.maxCorner, farCorners[i]);
+    }
+    
+    return bounds;
+}
+
+fn testSphereAABBIntersection(sphereCenter: vec3f, sphereRadius: f32, bounds: SpatialBounds) -> bool {
+    let closestPoint = clamp(sphereCenter, bounds.minCorner, bounds.maxCorner);
+    let distanceVector = sphereCenter - closestPoint;
+    let distanceSquared = dot(distanceVector, distanceVector);
+    
+    return distanceSquared <= (sphereRadius * sphereRadius);
+}
+
+fn processLightAssignment(coords: TileCoordinates, bounds: SpatialBounds) -> u32 {
+    let tileIndex = computeFlatIndex(coords);
+    let lightRadius = f32(${lightRadius});
+    var lightCount: u32 = 0;
+    let baseOffset = tileIndex * ${maxLightsPerTile};
+    
+    for (var lightIdx: u32 = 0; lightIdx < lightSet.numLights && lightCount < ${maxLightsPerTile}; lightIdx++) {
+        let worldLightPos = lightSet.lights[lightIdx].pos;
+        let viewLightPos = (cameraUniforms.viewMat * vec4f(worldLightPos, 1.0)).xyz;
+        
+        if (testSphereAABBIntersection(viewLightPos, lightRadius, bounds)) {
+            tileLightIndices.lightIndices[baseOffset + lightCount] = lightIdx;
+            lightCount++;
+        }
+    }
+    
+    return lightCount;
+}
+
+@compute @workgroup_size(${tileWorkgroupSize})
+fn main(@builtin(global_invocation_id) globalId: vec3u) {
+    let tileIndex = globalId.x;
+    let maxTiles = u32(cameraUniforms.tilesX) * u32(cameraUniforms.tilesY) * u32(cameraUniforms.tilesZ);
+    
+    if (tileIndex >= maxTiles) {
+        return;
+    }
+    
+    let tileCoords = calculateTileCoordinates(tileIndex);
+    let tileBounds = buildTileBounds(tileCoords);
+    let assignedLights = processLightAssignment(tileCoords, tileBounds);
+    
+    let lightOffset = tileIndex * ${maxLightsPerTile};
+    tileSet.tileLightData[tileIndex] = TileLightData(assignedLights, lightOffset, 0, 0);
+}
diff --git a/src/shaders/common.wgsl b/src/shaders/common.wgsl
index 738e9c4e..900217d8 100644
--- a/src/shaders/common.wgsl
+++ b/src/shaders/common.wgsl
@@ -10,10 +10,33 @@ struct LightSet {
     lights: array<Light>
 }
 
-// TODO-2: you may want to create a ClusterSet struct similar to LightSet
+struct TileLightData {
+    lightCount: u32,
+    lightStartOffset: u32,
+    _padding1: u32,
+    _padding2: u32
+}
+
+struct TileSet {
+    numTiles: u32,
+    tileLightData: array<TileLightData>
+}
+
+struct TileLightIndices {
+    lightIndices: array<u32>
+}
 
 struct CameraUniforms {
-    // TODO-1.3: add an entry for the view proj mat (of type mat4x4f)
+    viewProjMat: mat4x4f,
+    viewMat: mat4x4f,
+    screenWidth: f32,
+    screenHeight: f32,
+    nearPlane: f32,
+    farPlane: f32,
+    tilesX: f32,
+    tilesY: f32,
+    tilesZ: f32,
+    _padding1: f32
 }
 
 // CHECKITOUT: this special attenuation function ensures lights don't affect geometry outside the maximum light radius
@@ -24,7 +47,6 @@ fn rangeAttenuation(distance: f32) -> f32 {
 fn calculateLightContrib(light: Light, posWorld: vec3f, nor: vec3f) -> vec3f {
     let vecToLight = light.pos - posWorld;
     let distToLight = length(vecToLight);
-
     let lambert = max(dot(nor, normalize(vecToLight)), 0.f);
     return light.color * lambert * rangeAttenuation(distToLight);
 }
diff --git a/src/shaders/forward_plus.fs.wgsl b/src/shaders/forward_plus.fs.wgsl
index 0500e3df..753b7032 100644
--- a/src/shaders/forward_plus.fs.wgsl
+++ b/src/shaders/forward_plus.fs.wgsl
@@ -1,16 +1,115 @@
-// TODO-2: implement the Forward+ fragment shader
-
-// See naive.fs.wgsl for basic fragment shader setup; this shader should use light clusters instead of looping over all lights
-
-// ------------------------------------
-// Shading process:
-// ------------------------------------
-// Determine which cluster contains the current fragment.
-// Retrieve the number of lights that affect the current fragment from the cluster’s data.
-// Initialize a variable to accumulate the total light contribution for the fragment.
-// For each light in the cluster:
-//     Access the light's properties using its index.
-//     Calculate the contribution of the light based on its position, the fragment’s position, and the surface normal.
-//     Add the calculated contribution to the total light accumulation.
-// Multiply the fragment’s diffuse color by the accumulated light contribution.
-// Return the final color, ensuring that the alpha component is set appropriately (typically to 1).
+@group(${bindGroup_scene}) @binding(0) var<uniform> cameraUniforms: CameraUniforms;
+@group(${bindGroup_scene}) @binding(1) var<storage, read> lightSet: LightSet;
+@group(${bindGroup_scene}) @binding(2) var<storage, read> tileSet: TileSet;
+@group(${bindGroup_scene}) @binding(3) var<storage, read> tileLightIndices: TileLightIndices;
+
+@group(${bindGroup_material}) @binding(0) var diffuseTex: texture_2d<f32>;
+@group(${bindGroup_material}) @binding(1) var diffuseTexSampler: sampler;
+
+struct FragmentInput {
+    @location(0) pos: vec3f,
+    @location(1) nor: vec3f,
+    @location(2) uv: vec2f
+}
+
+struct ScreenSpaceInfo {
+    normalizedCoords: vec2f,
+    viewSpaceDepth: f32
+}
+
+struct SpatialIndex {
+    tileCoords: vec3u,
+    flatIndex: u32
+}
+
+fn extractScreenSpaceInfo(fragmentPos: vec4f, worldPos: vec3f) -> ScreenSpaceInfo {
+    let screenCoords = vec2f(
+        fragmentPos.x / cameraUniforms.screenWidth,
+        fragmentPos.y / cameraUniforms.screenHeight
+    );
+    
+    let viewSpacePos = (cameraUniforms.viewMat * vec4f(worldPos, 1.0)).xyz;
+    let depth = -viewSpacePos.z;
+    
+    return ScreenSpaceInfo(screenCoords, depth);
+}
+
+fn mapToSpatialGrid(screenInfo: ScreenSpaceInfo) -> vec3u {
+    let gridX = u32(clamp(screenInfo.normalizedCoords.x * cameraUniforms.tilesX, 0.0, cameraUniforms.tilesX - 1.0));
+    let gridY = u32(clamp(screenInfo.normalizedCoords.y * cameraUniforms.tilesY, 0.0, cameraUniforms.tilesY - 1.0));
+    
+    let depthRange = clamp(screenInfo.viewSpaceDepth, cameraUniforms.nearPlane, cameraUniforms.farPlane);
+    let logNormalizedDepth = log(depthRange / cameraUniforms.nearPlane) / log(cameraUniforms.farPlane / cameraUniforms.nearPlane);
+    let gridZ = u32(clamp(logNormalizedDepth * cameraUniforms.tilesZ, 0.0, cameraUniforms.tilesZ - 1.0));
+    
+    return vec3u(gridX, gridY, gridZ);
+}
+
+fn calculateSpatialIndex(gridCoords: vec3u) -> u32 {
+    return gridCoords.z * u32(cameraUniforms.tilesX) * u32(cameraUniforms.tilesY) + 
+           gridCoords.y * u32(cameraUniforms.tilesX) + gridCoords.x;
+}
+
+fn resolveSpatialIndex(screenInfo: ScreenSpaceInfo) -> SpatialIndex {
+    let gridCoords = mapToSpatialGrid(screenInfo);
+    let flatIndex = calculateSpatialIndex(gridCoords);
+    return SpatialIndex(gridCoords, flatIndex);
+}
+
+fn calculateLightingContribution(worldPos: vec3f, normal: vec3f, spatialIndex: SpatialIndex) -> vec3f {
+    let maxTiles = arrayLength(&tileSet.tileLightData);
+    if (spatialIndex.flatIndex >= maxTiles) {
+        return vec3f(0.1, 0.1, 0.1); // Return ambient only if tile index is invalid
+    }
+    
+    let lightData = tileSet.tileLightData[spatialIndex.flatIndex];
+    var accumulatedLighting = vec3f(0.1, 0.1, 0.1); // Ambient contribution
+    
+    let lightStartIndex = lightData.lightStartOffset;
+    let lightCount = min(lightData.lightCount, ${maxLightsPerTile});
+    if (lightCount == 0u) {
+        return accumulatedLighting;
+    }
+    let maxLightIndices = arrayLength(&tileLightIndices.lightIndices);
+    let maxLights = arrayLength(&lightSet.lights);
+    
+    for (var lightIdx = 0u; lightIdx < lightCount; lightIdx++) {
+        let globalIndexLocation = lightStartIndex + lightIdx;
+        
+        if (globalIndexLocation >= maxLightIndices) {
+            break; // Stop processing if we're beyond the array bounds
+        }
+        
+        let globalLightIndex = tileLightIndices.lightIndices[globalIndexLocation];
+        
+        if (globalLightIndex >= maxLights) {
+            continue; // Skip invalid light indices
+        }
+        
+        let currentLight = lightSet.lights[globalLightIndex];
+        let lightContribution = calculateLightContrib(currentLight, worldPos, normal);
+        accumulatedLighting += lightContribution;
+    }
+    
+    return accumulatedLighting;
+}
+
+fn combineColorAndLighting(baseColor: vec4f, lightingResult: vec3f) -> vec4f {
+    let finalColor = baseColor.rgb * lightingResult;
+    return vec4(finalColor, 1.0);
+}
+
+@fragment
+fn main(in: FragmentInput, @builtin(position) fragCoord: vec4f) -> @location(0) vec4f {
+    let materialColor = textureSample(diffuseTex, diffuseTexSampler, in.uv);
+    
+    if (materialColor.a < 0.5f) {
+        discard;
+    }
+    
+    let screenInfo = extractScreenSpaceInfo(fragCoord, in.pos);
+    let spatialIndex = resolveSpatialIndex(screenInfo);
+    let lightingResult = calculateLightingContribution(in.pos, normalize(in.nor), spatialIndex);
+    
+    return combineColorAndLighting(materialColor, lightingResult);
+}
diff --git a/src/shaders/naive.vs.wgsl b/src/shaders/naive.vs.wgsl
index 5a7ddd4b..f9c38c04 100644
--- a/src/shaders/naive.vs.wgsl
+++ b/src/shaders/naive.vs.wgsl
@@ -2,7 +2,7 @@
 
 // TODO-1.3: add a uniform variable here for camera uniforms (of type CameraUniforms)
 // make sure to use ${bindGroup_scene} for the group
-
+@group(${bindGroup_scene}) @binding(0) var<uniform> camera : CameraUniforms;
 @group(${bindGroup_model}) @binding(0) var<uniform> modelMat: mat4x4f;
 
 struct VertexInput
@@ -26,7 +26,7 @@ fn main(in: VertexInput) -> VertexOutput
     let modelPos = modelMat * vec4(in.pos, 1);
 
     var out: VertexOutput;
-    out.fragPos = ??? * modelPos; // TODO-1.3: replace ??? with the view proj mat from your CameraUniforms uniform variable
+    out.fragPos = camera.viewProjMat * modelPos; // TODO-1.3: replace ??? with the view proj mat from your CameraUniforms uniform variable
     out.pos = modelPos.xyz / modelPos.w;
     out.nor = in.nor;
     out.uv = in.uv;
diff --git a/src/shaders/shaders.ts b/src/shaders/shaders.ts
index 584c008f..fcfdd22d 100644
--- a/src/shaders/shaders.ts
+++ b/src/shaders/shaders.ts
@@ -1,5 +1,3 @@
-// CHECKITOUT: this file loads all the shaders and preprocesses them with some common code
-
 import { Camera } from '../stage/camera';
 
 import commonRaw from './common.wgsl?raw';
@@ -29,20 +27,29 @@ export const constants = {
     bindGroup_material: 2,
 
     moveLightsWorkgroupSize: 128,
+    tileWorkgroupSize: 128,
+
+    lightRadius: 2,
 
-    lightRadius: 2
+    tilesX: 16,
+    tilesY: 9,
+    tilesZ: 24,
+    maxLightsPerTile: 512,
 };
 
 // =================================
 
-function evalShaderRaw(raw: string) {
-    return eval('`' + raw.replaceAll('${', '${constants.') + '`');
+function replaceConstants(raw: string): string {
+    let code = raw;
+    for (const [key, value] of Object.entries(constants)) {
+        code = code.replaceAll(`\${${key}}`, value.toString());
+    }
+    return code;
 }
 
-const commonSrc: string = evalShaderRaw(commonRaw);
-
-function processShaderRaw(raw: string) {
-    return commonSrc + evalShaderRaw(raw);
+function processShaderRaw(raw: string): string {
+    const commonSrc = replaceConstants(commonRaw);
+    return commonSrc + replaceConstants(raw);
 }
 
 export const naiveVertSrc: string = processShaderRaw(naiveVertRaw);
@@ -55,4 +62,4 @@ export const clusteredDeferredFullscreenVertSrc: string = processShaderRaw(clust
 export const clusteredDeferredFullscreenFragSrc: string = processShaderRaw(clusteredDeferredFullscreenFragRaw);
 
 export const moveLightsComputeSrc: string = processShaderRaw(moveLightsComputeRaw);
-export const clusteringComputeSrc: string = processShaderRaw(clusteringComputeRaw);
+export const clusteringComputeSrc: string = processShaderRaw(clusteringComputeRaw);
\ No newline at end of file
diff --git a/src/stage/camera.ts b/src/stage/camera.ts
index 7d2a4a1e..5b915a1e 100644
--- a/src/stage/camera.ts
+++ b/src/stage/camera.ts
@@ -1,16 +1,36 @@
 import { Mat4, mat4, Vec3, vec3 } from "wgpu-matrix";
 import { toRadians } from "../math_util";
 import { device, canvas, fovYDegrees, aspectRatio } from "../renderer";
+import { constants } from "../shaders/shaders";
 
 class CameraUniforms {
-    readonly buffer = new ArrayBuffer(16 * 4);
+    readonly buffer = new ArrayBuffer(40 * 4);
     private readonly floatView = new Float32Array(this.buffer);
 
     set viewProjMat(mat: Float32Array) {
-        // TODO-1.1: set the first 16 elements of `this.floatView` to the input `mat`
+        this.floatView.set(mat, 0);
     }
 
-    // TODO-2: add extra functions to set values needed for light clustering here
+    set viewMat(mat: Float32Array) {
+        this.floatView.set(mat, 16);
+    }
+
+    setScreenDimensions(width: number, height: number) {
+        this.floatView[32] = width;
+        this.floatView[33] = height;
+    }
+
+    setDepthPlanes(near: number, far: number) {
+        this.floatView[34] = near;
+        this.floatView[35] = far;
+    }
+
+    setTileDimensions(tilesX: number, tilesY: number, tilesZ: number) {
+        this.floatView[36] = tilesX;
+        this.floatView[37] = tilesY;
+        this.floatView[38] = tilesZ;
+        this.floatView[39] = 0.0; // padding
+    }
 }
 
 export class Camera {
@@ -32,20 +52,20 @@ export class Camera {
 
     keys: { [key: string]: boolean } = {};
 
-    constructor () {
-        // TODO-1.1: set `this.uniformsBuffer` to a new buffer of size `this.uniforms.buffer.byteLength`
-        // ensure the usage is set to `GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST` since we will be copying to this buffer
-        // check `lights.ts` for examples of using `device.createBuffer()`
-        //
-        // note that you can add more variables (e.g. inverse proj matrix) to this buffer in later parts of the assignment
+    constructor() {
+        this.uniformsBuffer = device.createBuffer({
+            label: "camera uniforms",
+            size: this.uniforms.buffer.byteLength,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
 
         this.projMat = mat4.perspective(toRadians(fovYDegrees), aspectRatio, Camera.nearPlane, Camera.farPlane);
 
-        this.rotateCamera(0, 0); // set initial camera vectors
+        this.rotateCamera(0, 0);
 
         window.addEventListener('keydown', (event) => this.onKeyEvent(event, true));
         window.addEventListener('keyup', (event) => this.onKeyEvent(event, false));
-        window.onblur = () => this.keys = {}; // reset keys on page exit so they don't get stuck (e.g. on alt + tab)
+        window.onblur = () => this.keys = {};
 
         canvas.addEventListener('mousedown', () => canvas.requestPointerLock());
         canvas.addEventListener('mouseup', () => document.exitPointerLock());
@@ -54,7 +74,7 @@ export class Camera {
 
     private onKeyEvent(event: KeyboardEvent, down: boolean) {
         this.keys[event.key.toLowerCase()] = down;
-        if (this.keys['alt']) { // prevent issues from alt shortcuts
+        if (this.keys['alt']) {
             event.preventDefault();
         }
     }
@@ -128,11 +148,21 @@ export class Camera {
         const lookPos = vec3.add(this.cameraPos, vec3.scale(this.cameraFront, 1));
         const viewMat = mat4.lookAt(this.cameraPos, lookPos, [0, 1, 0]);
         const viewProjMat = mat4.mul(this.projMat, viewMat);
-        // TODO-1.1: set `this.uniforms.viewProjMat` to the newly calculated view proj mat
 
-        // TODO-2: write to extra buffers needed for light clustering here
+        this.uniforms.viewProjMat = viewProjMat;
+        this.uniforms.viewMat = viewMat;
+        this.uniforms.setScreenDimensions(canvas.width, canvas.height);
+        this.uniforms.setDepthPlanes(Camera.nearPlane, Camera.farPlane);
+        this.uniforms.setTileDimensions(
+            constants.tilesX,
+            constants.tilesY,
+            constants.tilesZ
+        );
+
+        device.queue.writeBuffer(this.uniformsBuffer, 0, this.uniforms.buffer);
+    }
 
-        // TODO-1.1: upload `this.uniforms.buffer` (host side) to `this.uniformsBuffer` (device side)
-        // check `lights.ts` for examples of using `device.queue.writeBuffer()`
+    getUniformsBuffer(): GPUBuffer {
+        return this.uniformsBuffer;
     }
-}
+}
\ No newline at end of file
diff --git a/src/stage/lights.ts b/src/stage/lights.ts
index a6eed919..020139f4 100644
--- a/src/stage/lights.ts
+++ b/src/stage/lights.ts
@@ -1,6 +1,5 @@
 import { vec3 } from "wgpu-matrix";
 import { device } from "../renderer";
-
 import * as shaders from '../shaders/shaders';
 import { Camera } from "./camera";
 
@@ -13,7 +12,7 @@ function hueToRgb(h: number) {
 export class Lights {
     private camera: Camera;
 
-    numLights = 500;
+    numLights = 1000;
     static readonly maxNumLights = 5000;
     static readonly numFloatsPerLight = 8; // vec3f is aligned at 16 byte boundaries
 
@@ -28,14 +27,19 @@ export class Lights {
     moveLightsComputeBindGroup: GPUBindGroup;
     moveLightsComputePipeline: GPUComputePipeline;
 
-    // TODO-2: add layouts, pipelines, textures, etc. needed for light clustering here
+    // Tile clustering infrastructure for Forward+ rendering
+    tileClusterBuffer!: GPUBuffer;
+    tileClusterIndicesBuffer!: GPUBuffer;
+    tileClusteringBindGroupLayout!: GPUBindGroupLayout;
+    tileClusteringBindGroup!: GPUBindGroup;
+    tileClusteringPipeline!: GPUComputePipeline;
 
     constructor(camera: Camera) {
         this.camera = camera;
 
         this.lightSetStorageBuffer = device.createBuffer({
             label: "lights",
-            size: 16 + this.lightsArray.byteLength, // 16 for numLights + padding
+            size: 16 + this.lightsArray.byteLength,
             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
         });
         this.populateLightsBuffer();
@@ -82,7 +86,7 @@ export class Lights {
             label: "move lights compute pipeline",
             layout: device.createPipelineLayout({
                 label: "move lights compute pipeline layout",
-                bindGroupLayouts: [ this.moveLightsComputeBindGroupLayout ]
+                bindGroupLayouts: [this.moveLightsComputeBindGroupLayout]
             }),
             compute: {
                 module: device.createShaderModule({
@@ -93,7 +97,88 @@ export class Lights {
             }
         });
 
-        // TODO-2: initialize layouts, pipelines, textures, etc. needed for light clustering here
+        this.initializeTileClustering();
+    }
+
+    private initializeTileClustering() {
+        const totalTiles = shaders.constants.tilesX * shaders.constants.tilesY * shaders.constants.tilesZ;
+        const tileDataSize = 16; // TileLightData struct size
+        const maxLightIndices = totalTiles * shaders.constants.maxLightsPerTile;
+
+        this.tileClusterBuffer = device.createBuffer({
+            label: "tile cluster data",
+            size: 4 + (totalTiles * tileDataSize), // 4 bytes for numTiles + tile data
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        });
+
+        this.tileClusterIndicesBuffer = device.createBuffer({
+            label: "tile cluster light indices",
+            size: maxLightIndices * 4,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        });
+
+        this.tileClusteringBindGroupLayout = device.createBindGroupLayout({
+            label: "tile clustering bind group layout",
+            entries: [
+                {
+                    binding: 0, // Camera uniforms
+                    visibility: GPUShaderStage.COMPUTE,
+                    buffer: { type: "uniform" },
+                },
+                {
+                    binding: 1, // Light set
+                    visibility: GPUShaderStage.COMPUTE,
+                    buffer: { type: "read-only-storage" },
+                },
+                {
+                    binding: 2, // Tile data output
+                    visibility: GPUShaderStage.COMPUTE,
+                    buffer: { type: "storage" },
+                },
+                {
+                    binding: 3, // Tile light indices output
+                    visibility: GPUShaderStage.COMPUTE,
+                    buffer: { type: "storage" },
+                }
+            ],
+        });
+
+        this.tileClusteringBindGroup = device.createBindGroup({
+            label: "tile clustering bind group",
+            layout: this.tileClusteringBindGroupLayout,
+            entries: [
+                {
+                    binding: 0,
+                    resource: { buffer: this.camera.getUniformsBuffer() },
+                },
+                {
+                    binding: 1,
+                    resource: { buffer: this.lightSetStorageBuffer },
+                },
+                {
+                    binding: 2,
+                    resource: { buffer: this.tileClusterBuffer },
+                },
+                {
+                    binding: 3,
+                    resource: { buffer: this.tileClusterIndicesBuffer },
+                }
+            ],
+        });
+
+        this.tileClusteringPipeline = device.createComputePipeline({
+            label: "tile clustering pipeline",
+            layout: device.createPipelineLayout({
+                bindGroupLayouts: [this.tileClusteringBindGroupLayout],
+            }),
+            compute: {
+                module: device.createShaderModule({
+                    label: "tile clustering shader",
+                    code: shaders.clusteringComputeSrc,
+                }),
+                entryPoint: "main",
+            },
+        });
     }
 
     private populateLightsBuffer() {
@@ -111,8 +196,14 @@ export class Lights {
     }
 
     doLightClustering(encoder: GPUCommandEncoder) {
-        // TODO-2: run the light clustering compute pass(es) here
-        // implementing clustering here allows for reusing the code in both Forward+ and Clustered Deferred
+        const computePass = encoder.beginComputePass({ label: "tile light clustering" });
+        computePass.setPipeline(this.tileClusteringPipeline);
+        computePass.setBindGroup(0, this.tileClusteringBindGroup);
+
+        const totalTiles = shaders.constants.tilesX * shaders.constants.tilesY * shaders.constants.tilesZ;
+        const workgroupCount = Math.ceil(totalTiles / shaders.constants.tileWorkgroupSize);
+        computePass.dispatchWorkgroups(workgroupCount);
+        computePass.end();
     }
 
     // CHECKITOUT: this is where the light movement compute shader is dispatched from the host
@@ -134,4 +225,4 @@ export class Lights {
 
         device.queue.submit([encoder.finish()]);
     }
-}
+}
\ No newline at end of file