Code Demos — RR Graphics Lab

5-Day Demo Roadmap — All Concepts at a Glance

Day 1 — OpenGL Foundations

Introduction, Environment Setup, Data Flow

7 demos · Modules 1, 2, 3 · From "what is a GPU" to drawing coloured geometry with VBO/VAO/EBO

⚡ Open Day 1 Demos →

Demo 1 · Module 1

The Rendering Pipeline Walkthrough

Visual explanation of vertex → rasterize → fragment → screen. Which stages you write vs GPU auto-handles.

PipelineGPU ArchitectureTheory

🎯 Step-by-step pipeline diagram. No code — pure concept.

⚡ Open Demo 📖 Notes~15 min

Demo 2 · Module 2

First OpenGL Window

Complete GLFW + GLEW setup. Every line of the window program explained — CMakeLists.txt, context creation, render loop.

GLFWGLEWCMakeContext

🎯 Dark navy window. GPU name in terminal. Change background in 1 line.

⚡ Open Demo 📖 Notes~20 min

Demo 3 · Module 3

VBO — Uploading Vertex Data to GPU

glGenBuffers, glBindBuffer, glBufferData decoded. Watch data move from C++ array into GPU VRAM.

VBOGPU MemoryglBufferData

🎯 The VBO three-step recipe every OpenGL program uses.

⚡ Open Demo 📖 Notes~20 min

Demo 4 · Module 3

VAO + glVertexAttribPointer Decoded

The most confusing call in OpenGL — decoded parameter by parameter. Stride, offset, type, normalized explained.

VAOglVertexAttribPointerStride

🎯 Memory layout diagram + VAO recording. Change layout to see corruption.

⚡ Open Demo 📖 Notes~25 min

Demo 5 · Module 3

First Triangle + Shaders

The most significant milestone in graphics programming. Complete vertex + fragment shader from scratch. Every GLSL keyword explained.

TriangleGLSLVertex ShaderFragment Shader

🎯 Orange triangle on screen. Colour it differently per vertex.

⚡ Open Demo 📖 Notes~30 min

Demo 6 · Module 3

EBO — Rectangle from 4 Vertices

Draw a rectangle using 4 vertices + index data instead of 6 duplicated vertices. glDrawElements call explained.

EBOIndex BufferglDrawElements

🎯 Coloured rectangle + wireframe toggle to see both triangles.

⚡ Open Demo 📖 Notes~20 min

Demo 7 · Module 3

Uniforms + Animation with Time

Pass a time value from CPU to GPU every frame using glUniform1f. Watch colour or position animate in real time.

UniformsAnimationglfwGetTime

🎯 Pulsing colour triangle cycling through colours using sin(time).

⚡ Open Demo 📖 Notes~20 min

Day 2 — 3D World, Lighting & Textures

Model Matrix, MVP Pipeline, Phong Lighting, Textures

4 demos · Modules 4, 5, 6 · From a spinning 2D triangle to a fully lit, textured 3D cube with fly camera

Open Day 2 Demos →

Demo 7 · Module 4

The Model Matrix — First Moving Geometry

Send a glm::mat4 to the vertex shader every frame. Translate, rotate, and scale the triangle in real time.

GLMglm::rotateglUniformMatrix4fv

🎯 Orange triangle spinning. T=translate, S=scale toggles.

⚡ Open Demo 📖 Notes~25 min

Demo 8 · Module 4

Full MVP + Fly Camera — WASD + Mouse Look

Complete Model × View × Projection pipeline. Depth testing. Fly camera with WASD, mouse look, scroll to zoom.

glm::lookAtglm::perspectiveGL_DEPTH_TESTCamera

🎯 3D rotating coloured cube. Full fly camera. Scroll to change FOV.

⚡ Open Demo 📖 Notes~40 min

Demo 9 · Module 5

Phong Lighting — Ambient + Diffuse + Specular

Normals as a vertex attribute. Normal matrix. Per-fragment lighting. Orbiting light source. 1/2/3 keys isolate each component.

Normalsdot()reflect()Normal Matrix

🎯 Grey lit cube + orbiting white light. 1=ambient, 2=+diffuse, 3=full Phong.

⚡ Open Demo 📖 Notes~40 min

Demo 10 · Module 6

Textures — UV Coords, stb_image, Textured Lit Cube

UV coordinates. stb_image loads PNG. glTexImage2D uploads to GPU. sampler2D in fragment shader. Phong × texture.

stb_imageUV Mappingsampler2DMipmaps

🎯 Textured lit cube. T=texture on/off, L=lighting on/off. Four combinations.

⚡ Open Demo 📖 Notes~40 min

Day 3 — Advanced OpenGL

GLSL Deep Dive, Instancing, FBO Post-Processing, Stencil + Blending

4 demos · Modules 7, 8, 9 · From procedural shaders to rendering scenes into textures

Open Day 3 Demos →

Demo 11 · Module 7

Procedural Radar Shader — GLSL Deep Dive

Entire radar display computed in the fragment shader: rings via fract(), sweep via atan()+mod(), soft edges via smoothstep().

fract()smoothstep()atan()Fullscreen Quad

🎯 Green radar display. +/- = ring count. S = sweep. H = hard vs soft edges.

⚡ Open Demo 📖 Notes~30 min

Demo 12 · Module 7

Instancing — 1,000 Contacts, One Draw Call

Per-instance VBO + glVertexAttribDivisor(1,1). glDrawArraysInstanced draws all 1,000 in one GPU command.

glDrawArraysInstancedglVertexAttribDivisorgl_InstanceID

🎯 1,000 coloured contacts. I=toggle instanced/non-instanced. Watch frame time change.

⚡ Open Demo 📖 Notes~30 min

Demo 13 · Module 8

FBO Post-Processing — Render Scene to Texture

Two-pass rendering: Pass 1 renders 3D scene into FBO. Pass 2 draws fullscreen quad with post-process effect. Five effects via F1–F5.

FBORender-to-TexturePost-ProcessingFullscreen Quad

🎯 F1=normal F2=greyscale F3=night vision F4=edge detect F5=vignette.

⚡ Open Demo 📖 Notes~40 min

Demo 14 · Module 8

Stencil Outline + Transparent Radar Sweep

All three fragment tests active: depth, stencil (selection outline), blending (transparent sweep). Two-pass stencil outline technique.

Stencil BufferGL_NOTEQUALglBlendFuncglDepthMask

🎯 Gold outline + green transparent sweep. F1=sweep. F2=outline.

⚡ Open Demo 📖 Notes~40 min

Day 4 — Introduction to Vulkan

Vulkan Instance, Devices, Swapchain, Pipeline, First Triangle

4 demos · Modules 10, 11, 12 · From environment probe to drawing a triangle with full frame synchronisation

⚡ Open Day 4 Demos →

Demo 15 · Module 10

Vulkan Environment — Instance, Layers, Physical Devices

Creates VkInstance with validation layers. Lists all GPUs with type, driver version, queue families, VRAM heaps. Proves surface extension support.

VkInstanceVkPhysicalDeviceValidation layersVkSurfaceKHR

🎯 All GPUs listed in terminal. Window opens. No logical device yet.

⚡ Open Demo 📖 Notes~35 min

Demo 16 · Module 11

Logical Device, Queues, Command Pool, Command Buffer

Selects best GPU, finds queue families, creates VkDevice with VK_KHR_swapchain. Allocates VkCommandPool and records an empty command buffer.

VkDeviceVkQueueVkCommandPoolVkCommandBuffer

🎯 GPU selected, queues printed, device created. Window open. No swapchain yet.

⚡ Open Demo 📖 Notes~35 min

Demo 17 · Module 11

Swapchain, Render Pass, Framebuffers — First Pixels

Creates VkSwapchainKHR, VkImageViews, VkRenderPass, VkFramebuffers. Full acquire → clear → present loop with semaphores and fence.

VkSwapchainKHRVkRenderPassVkFramebufferPresent modes

🎯 Navy window clearing at vsync. Chosen format and present mode shown. No pipeline yet.

⚡ Open Demo 📖 Notes~35 min

Demo 18 · Module 12

Full Pipeline + vkCmdDraw — First Triangle

Loads SPIR-V from glslc-compiled shaders. Builds full VkGraphicsPipelineCreateInfo. Calls vkCmdDraw(3,1,0,0). Positions hardcoded via gl_VertexIndex.

VkPipelineVkShaderModulevkCmdDrawglslc

🎯 White triangle on navy background. Requires glslc to compile shaders first.

⚡ Open Demo 📖 Notes~45 min

Day 5 — Advanced Vulkan & Integration

Descriptor Sets, UBO, Compute Shaders, Compute→Display

3 demos · Modules 13, 14 · From glUniform replacement to GPU compute pipelines and displaying GPU results in a window

⚡ Open Day 5 Demos →

Demo 19 · Module 13

UBO + Descriptor Sets — Replacing glUniform*()

Builds the complete Vulkan descriptor system: VkDescriptorSetLayout (binding 0 = uniform buffer), VkDescriptorPool, one VkDescriptorSet per swapchain image. Each frame: updates the UBO (MVP matrices) via persistent mapped memory, binds the descriptor set, draws an animated rotating orange triangle.

VkDescriptorSetLayoutVkDescriptorPoolUBOvkUpdateDescriptorSets

🎯 Orange triangle rotating at 45°/sec driven by MVP matrix in UBO. Terminal prints frame count. Validation: 0 errors.

⚡ Open Demo 📖 Notes ~40 min

Demo 20 · Module 13

Vulkan Compute Shader — GPU Parallel Image Processing

Creates a Vulkan compute pipeline (no graphics pipeline, no window). Dispatches a compute shader across 256×256 pixels — 65,536 threads each invert one pixel. Storage buffers (SSBO) for input/output. Push constants pass image dimensions. Pipeline barrier before CPU readback. Terminal reports timing and throughput.

VkComputePipelineSSBOvkCmdDispatchPush constantsPipeline barriers

🎯 Terminal only. Input/output pixel verified (PASS). Dispatch time in μs + pixels/sec throughput. ~78M pixels/sec on Iris Xe.

⚡ Open Demo 📖 Notes ~40 min

Demo 21 · Module 14

Compute → Display — GPU-Processed Image in a Window

Bridges compute and graphics pipelines in one application. A compute pass inverts the gradient image into a storage buffer; a graphics pass reads that same buffer in the fragment shader and renders it fullscreen. Pipeline barrier between the two stages. Fullscreen triangle trick (3 vertices, no VkBuffer). Two descriptor sets sharing the compute output buffer.

Compute→Graphics barrierShared SSBOFullscreen triangleDual descriptor sets

🎯 Window: inverted gradient image displayed fullscreen — pink/magenta tones. Top-left pixel R=255 G=255 B=127. ESC to quit. Validation: 0 errors.

⚡ Open Demo 📖 Notes ~45 min