← Back to all projects

RENDERING ENGINE ARCHITECTURE DEEP DIVE

In the early days of computing, we drew directly to framebuffers. Today, our UI is complex: overlapping shadows, translucent blurs, and thousands of animated widgets. Modern engines don't just draw; they manage a massive pipeline of transformations.

Learn Rendering Engine Architecture: From Pixels to Pipelines

Goal: Deeply understand the internal mechanics of a modern 2D rendering engine like Skia or Impeller. You will move beyond simply “using” a canvas API to building the systems that manage layout, paint command recording, layer compositing, and efficient GPU rasterization. By the end, you’ll understand why modern UI frameworks (Flutter, Chrome) are built the way they are and how to squeeze every frame of performance out of hardware.

Why Rendering Engine Architecture Matters

In the early days of computing, we drew directly to framebuffers. Today, our UI is complex: overlapping shadows, translucent blurs, and thousands of animated widgets. Modern engines don’t just “draw”; they manage a massive pipeline of transformations.

Performance (60/120 FPS): Every millisecond counts. If your layout takes 10ms, you’ve already lost the frame.
Battery Life: Efficiently identifying “dirty regions” so you don’t repaint the whole screen saves significant power.
Hardware Abstraction: Graphics APIs (OpenGL, Vulkan, Metal) are notoriously difficult. Rendering engines provide a high-level “Canvas” that translates intent into optimized GPU command buffers.
The “Impeller” Shift: Newer engines are moving away from CPU-bound “tessellation” toward GPU-friendly “primitive streams,” a fundamental shift in how we think about vector graphics.

Core Concept Analysis

The Rendering Pipeline

Modern UI frameworks follow a specific lifecycle to turn code into pixels.

[ Widget Tree ]  -->  [ Layout Engine ]  -->  [ Paint/Display List ]
       ↑                      |                        |
  State Changes          Sizes & Pos              Draw Commands
       |                      |                        |
[ Invalidation ] <--  [ Compositor ]    <--  [ Rasterizer (GPU/CPU) ]

1. The Layout Phase (Constraints and Geometry)

Layout is the process of calculating the size and position of every element.

Skia/Flutter Approach: Constraints go down (Min/Max Width/Height), Sizes go up.
Geometry: This results in a “Render Tree” where every node has a Rect (x, y, w, h).

2. The Painting Phase (Display Lists)

We don’t draw to pixels yet. We record intent.

Display List: A buffer of commands like DrawRect, DrawPath, SetColor.
Why?: This allows the engine to re-play the drawing on a different thread or skip drawing if a layer hasn’t changed.

3. Layering and Compositing

Complex UIs are split into “Layers.”

Top Layer (Overlay)    ┌────────────────┐
                       │   [ Button ]   │
Middle Layer           ├────────────────┤
                       │  [ ListView ]  │
Background Layer       ├────────────────┤
                       │  [ Background ]│
                       └────────────────┘

Compositing is the act of flattening these layers onto the screen, often using the GPU’s fixed-function blending hardware.

4. Dirty Regions (The “Golden” Optimization)

If only a button blinks, why repaint the background?

Invalidation: Marking a specific Rect as “dirty.”
Clipping: Forcing the rasterizer to only touch pixels inside that dirty rectangle.

Concept Summary Table

Concept Cluster	What You Need to Internalize
Display Lists	The difference between Immediate Mode (draw now) and Retained Mode (record for later).
Compositing	How splitting the UI into independent textures (Layers) allows for smooth scrolling and animations.
Rasterization	The process of turning vector math (math-based shapes) into a grid of color values (pixels).
Dirty Rects	The logic of spatial invalidation to minimize work per frame.
Matrix Transforms	How local coordinates in a widget become screen coordinates through a stack of 3x3 or 4x4 matrices.

Deep Dive Reading by Concept

Foundations of Graphics

Concept	Book & Chapter
Rasterization Basics	“Computer Graphics from Scratch” by Gabriel Gambetta — Ch. 1-3
The 2D Pipeline	“Foundations of Game Engine Development, Vol 2” by Eric Lengyel — Ch. 1: “Graphics Processor Architecture”

UI Engine Specifics

Concept	Book & Chapter
Layout Algorithms	“The Linux Programming Interface” (Context: Event Loops) / Flutter Docs on “The Rendering Pipeline”
Skia Internals	“Skia Documentation” — “Architecture” and “SkCanvas” sections
Text Rendering	“Real-Time Rendering” (4th Ed) by Akenine-Möller — Ch. 13: “Text and Font Rendering”

Project List

Projects are ordered to build the engine from the bottom up.

Software Scanline Rasterizer (The Pixel Foundation)
The Matrix Stack & Canvas API (Transformation Engine)
The Box-Model Layout Engine (Geometry)
Display List Recorder & Player (The Command Buffer)
Dirty Region Invalidator (Efficiency)
Layer Compositor (The Z-Engine)
Text shaping & Glyph Cache (Typography)
Vector Path Tessellator (Complex Shapes)
Image Decoder & Texture Atlas (Asset Management)
Impeller-style GPU Backend (Vulkan/Metal wrapper)

Project 4: Display List Recorder & Player (The Command Buffer)

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: C++
Alternative Programming Languages: Rust, Swift
Coolness Level: Level 3: Genuinely Clever
Business Potential: 1. The “Resume Gold”
Difficulty: Level 2: Intermediate
Knowledge Area: Serialization / Command Pattern
Software or Tool: Skia-like Op-codes
Main Book: “Design Patterns” (Command Pattern)

What you’ll build: A system that records drawing commands into a custom binary buffer (or list of objects) and “plays them back” later to a rasterizer.

Why it teaches Rendering Architecture: Real engines don’t draw as they traverse the tree. They record a “Display List” so that rasterization can happen on a separate thread or be cached. This is the heart of “Retained Mode” rendering.

Core challenges you’ll face:

Op-code Definition → Defining a byte-format for commands like DRAW_RECT, SET_COLOR.
Memory Buffer Management → Efficiently storing variable-length commands in a contiguous block.
Serialization → Turning method calls into data.

Key Concepts:

The Command Pattern: Gof Design Patterns.
Immediate vs Retained Mode: Tooling/UI theory.
Thread Safety: Why recording on UI thread and playing on GPU thread is beneficial.

Real World Outcome

A program that captures a drawing sequence and can “re-draw” it multiple times without running the layout logic again.

Example Capture:

0x01 (SET_COLOR) [255, 0, 0]
0x02 (DRAW_RECT) [10, 10, 50, 50]
0x03 (TRANSLATE) [20, 20]
0x02 (DRAW_RECT) [0, 0, 30, 30]

The Core Question You’re Answering

“How can I draw the same UI 60 times a second without re-calculating the layout 60 times?”

Concepts You Must Understand First

Byte Alignment
- How to pack data into a buffer safely.
Function Pointers / Dispatch Tables
- How to map an Op-code (0x01) to a function call (drawRect).

Thinking Exercise

The Instant Replay

If you record a DrawCircle command, what information do you need to save to perfectly recreate it later?

Position?
Radius?
Current Paint state (Color, Stroke width)?
Current Transformation Matrix?

The Interview Questions They’ll Ask

“What is a Display List and why do modern browsers use them?”
“How would you implement a ‘Diffing’ algorithm for two display lists?”
“Explain how thread-safe rendering works with a recording/playback architecture.”

Hints in Layers

Hint 1: The Op-code Enum Start with an enum: enum Op { DrawRect, DrawCircle, Translate, ... };

Hint 2: The Command Structs Create a union or base class for commands. DrawRectCmd needs x, y, w, h.

Hint 3: The Recorder The Canvas API from Project 2 should now just append these structs to a std::vector<char>.

Project 5: Dirty Region Invalidator (Efficiency)

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: C or C++
Alternative Programming Languages: Rust, Zig
Coolness Level: Level 3: Genuinely Clever
Business Potential: 3. The “Service & Support” Model
Difficulty: Level 3: Advanced
Knowledge Area: Computational Geometry / Optimization
Software or Tool: Quadtrees or Region Lists
Main Book: “Real-Time Rendering” (Ch. 19: Acceleration Algorithms)

What you’ll build: A system that tracks which parts of the screen have changed (“Dirty Rects”) and merges them into a minimal set of rectangles to repaint.

Why it teaches Rendering Architecture: This is the difference between a toy engine and a professional one. You’ll learn how to minimize CPU/GPU work by only touching the pixels that actually moved.

Core challenges you’ll face:

Rectangle Merging → If two rectangles overlap, should they be one big rectangle?
Invalidation Propagation → Marking a child as dirty and ensuring all affected parents are also considered.
Clipping Logic → Passing the dirty rect to your rasterizer to restrict its write loop.

Key Concepts:

Spatial Indexing: Quadtrees or AABB (Axis-Aligned Bounding Boxes).
Region Arithmetic: Union, Intersection, Subtraction of Rects.

Real World Outcome

A visualization of your engine where you can see red borders around the regions being repainted. If you click a button, only that button’s area flashes red.

Example Visualization:

[ Screen ]
+------------------------+
| [Button] <- Dirty      |
|         [Image]        |
+------------------------+
Only pixels in Button area are updated.

The Core Question You’re Answering

“How do I save battery life while keeping the UI responsive?”

Concepts You Must Understand First

Bounding Boxes
- How to calculate the smallest rectangle that contains a shape?
Transformed Bounding Boxes
- If I rotate a square 45 degrees, what is its new Axis-Aligned Bounding Box?

Thinking Exercise

The Merge Dilemma

Rectangle A is at (0,0, 10x10). Rectangle B is at (100,100, 10x10).

If you merge them into one “Bounding Box”, how much area is wasted?
Is it better to have two small draw calls or one giant one?

The Interview Questions They’ll Ask

“What is ‘Overdraw’ and how do dirty regions help prevent it?”
“How would you handle a dirty region that spans multiple layers?”
“Explain the algorithm to merge two overlapping rectangles.”

Hints in Layers

Hint 1: The Invalidate Function Add a method node.invalidate() that calculates its global bounding box and adds it to a global DirtyRegion list.

Hint 2: Rect Merging A simple approach: Loop through all dirty rects. If A.intersects(B), replace both with A.union(B). Repeat until no changes occur.

Hint 3: Rasterizer Integration Modify your draw_horizontal_line from Project 1. if (y < dirty_top || y > dirty_bottom) return; x_start = max(x_start, dirty_left); x_end = min(x_end, dirty_right);

Project 6: Layer Compositor (The Z-Engine)

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: C++ or Rust
Alternative Programming Languages: Metal/Vulkan (for shaders)
Coolness Level: Level 4: Hardcore Tech Flex
Business Potential: 4. The “Open Core” Infrastructure
Difficulty: Level 4: Expert
Knowledge Area: GPU Architecture / Composition
Software or Tool: Textures and Alpha Blending
Main Book: “Real-Time Rendering” (Ch. 5: Shading Basics)

What you’ll build: A system that separates the UI into multiple “Surfaces” (Bitmaps) and blends them together using the GPU (or a fast CPU loop).

Why it teaches Rendering Architecture: This is how modern scrolling works. Browsers rasterize the long page once into a big layer, then just “slide” that layer on the screen.

Core challenges you’ll face:

Layer Allocation → Deciding when a widget deserves its own layer (e.g., video, complex animation).
Alpha Blending → Implementing the “Over” operator: Result = Src * Alpha + Dst * (1 - Alpha).
Z-Order → Correctly ordering layers so they don’t flicker.

Real World Outcome

An engine that can scroll a 10,000-pixel long list at 60FPS because it only rasterizes the items once and re-composites them every frame.

The Core Question You’re Answering

“Why is scrolling in a browser so much smoother than drawing the whole page every frame?”

Thinking Exercise

The Transparency Stack

Layer 1 (Bottom): Red (Alpha 1.0) Layer 2 (Middle): Blue (Alpha 0.5) Layer 3 (Top): Green (Alpha 0.5)

What color is the final pixel?
Does the order of Layer 2 and 3 matter? (Mathematically trace it).

Hints in Layers

Hint 1: The Surface Object A layer is just a Project 1 Rasterizer buffer with a Transform.

Hint 2: The Scene Graph Store a list of Layer objects. Each has an opacity, a transform, and a buffer.

Hint 3: The Blend Loop For the final output, loop through layers from bottom to top. For every pixel, apply the alpha blending formula.

Implementation Hints

In real world, we use “Pre-multiplied Alpha”. color.r = color.r * color.a; This makes blending math much faster! Search for “Why pre-multiplied alpha?”

Project 7: Text Shaping & Glyph Cache (Typography)

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: C or C++
Alternative Programming Languages: Rust, Go
Coolness Level: Level 4: Hardcore Tech Flex
Business Potential: 3. The “Service & Support” Model
Difficulty: Level 4: Expert
Knowledge Area: Typography / Caching
Software or Tool: FreeType / HarfBuzz
Main Book: “Real-Time Rendering” (Ch. 13: Text and Font Rendering)

What you’ll build: A system that loads a TrueType font, rasterizes individual characters (glyphs) into a cache, and shapes text into a sequence of positioned glyphs.

Why it teaches Rendering Architecture: Text is the most complex part of rendering. It involves sub-pixel positioning, hinting, and massive caching strategies.

Core challenges you’ll face:

Glyph Atlas Management → Fitting many small character bitmaps into one large texture.
Kerning & Shaping → Calculating the distance between ‘A’ and ‘V’ (which is less than ‘A’ and ‘B’).
Caching → Avoiding re-rasterizing ‘e’ every time it appears in a paragraph.

Key Concepts:

Font Hinting: Adjusting glyph outlines to align with the pixel grid.
SDF (Signed Distance Fields): A modern way to render sharp text at any scale.
HarfBuzz: The industry standard for text shaping.

Real World Outcome

A program that can render paragraphs of text with correct spacing, line breaks, and different font weights at high speed.

The Core Question You’re Answering

“Why is text the hardest thing to render in a UI engine?”

Concepts You Must Understand First

TrueType Outlines
- How are fonts stored? (Bézier curves).
The Baseline
- Where do characters sit relative to each other?

Thinking Exercise

The Cache Miss

You are rendering the word “Rendering”.

Which characters are already in the cache?
If you change the font size from 12pt to 13pt, can you reuse the old cache? Why or why not?

The Interview Questions They’ll Ask

“What is a Glyph Atlas and how does it improve performance?”
“Explain the difference between Kerning and Tracking.”
“How would you implement sub-pixel anti-aliasing for text?”

Hints in Layers

Hint 1: Use FreeType Don’t write your own font parser. Use FreeType to get the bitmap for a single character.

Hint 2: The Atlas Create a 512x512 buffer. As you load characters, pack them into rows. Store the (u, v) coordinates for each character.

Hint 3: Shaping Start with “Simple Shaping”: the next character starts at current_x + advance_width.

Project 8: Vector Path Tessellator (Complex Shapes)

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: C++ or Rust
Alternative Programming Languages: GLSL (Shaders)
Coolness Level: Level 5: Pure Magic
Business Potential: 5. The “Industry Disruptor”
Difficulty: Level 5: Master
Knowledge Area: Computational Geometry / GPU Shaders
Software or Tool: Bézier Curves
Main Book: “Game Boy Coding Adventure” (for low-level path logic) / Skia Source Code

What you’ll build: A system that takes arbitrary paths (circles, stars, complex SVG shapes) and turns them into a set of triangles (tessellation) that a GPU can draw.

Why it teaches Rendering Architecture: This is the bridge between high-level design (SVG) and low-level hardware (Triangles). You’ll learn how to approximate curves with line segments.

Core challenges you’ll face:

Bézier Subdivision → Turning a smooth curve into many small straight lines.
The Winding Rule → Deciding if a point is “inside” or “outside” a complex overlapping path (Even-Odd vs Non-Zero).
Anti-Aliasing → Making the edges of the shape look smooth rather than jagged.

Key Concepts:

De Casteljau’s Algorithm: For evaluating Bézier curves.
Ear Clipping / Constrained Delaunay: Algorithms for turning a polygon into triangles.

Real World Outcome

A Path object in your engine that can draw any shape, no matter how complex, by outputting a stream of triangles to your Project 1 or Project 10 rasterizer.

The Core Question You’re Answering

“How do we turn a mathematical curve into a series of triangles?”

Thinking Exercise

The Curve Approximation

If you represent a circle as a polygon with 4 sides, it’s a square. With 8 sides, it’s an octagon.

How many sides do you need before the human eye can’t see the edges?
How does the “radius” of the circle affect this decision?

Hints in Layers

Hint 1: Linearization Write a function that turns a Bézier curve into a list of points by sampling it at t = 0.0, 0.1, 0.2 ... 1.0.

Hint 2: Simple Polygons Start by tessellating convex polygons. You can just pick one vertex and create a “fan” of triangles.

Hint 3: Complex Polygons Research the “Tess2” library or the “Ear Clipping” algorithm to handle concave shapes and holes.

Project 9: Image Decoder & Texture Atlas (Asset Management)

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: C or C++
Alternative Programming Languages: Rust, Go
Coolness Level: Level 2: Practical but Forgettable
Business Potential: 2. The “Micro-SaaS / Pro Tool”
Difficulty: Level 2: Intermediate
Knowledge Area: Image Formats / Memory
Software or Tool: stb_image / libpng
Main Book: “The Secret Life of Programs” by Jonathan Steinhart

What you’ll build: A loader that reads PNG/JPG files and uploads them into a managed “Texture Atlas” to minimize GPU state changes.

Why it teaches Rendering Architecture: In a real engine, swapping textures is expensive. You’ll learn how to “batch” many images into one large texture so the GPU can draw everything in one pass.

Core challenges you’ll face:

2D Bin Packing → The algorithm for fitting various sized rectangles into a square.
Color Space Conversion → Dealing with sRGB vs Linear color spaces.
Mipmapping → Creating smaller versions of the image for when it’s drawn small.

Real World Outcome

A “Sprite Sheet” generator and loader that allows your engine to draw hundreds of unique icons using only one GPU texture.

The Core Question You’re Answering

“Why is it faster to draw 100 images from one texture than 100 images from 100 textures?”

Hints in Layers

Hint 1: Use stb_image Don’t write a PNG decoder. Use the stb_image.h single-header library.

Hint 2: Simple Bin Packing The easiest algorithm: Sort images by height. Place them in rows. If a row is full, start a new one.

Hint 3: UV Coordinates

When you draw an image from the atlas, you must map the (0,0) - (1,1) coordinates to the specific sub-rectangle in the atlas.

Project 10: Impeller-style GPU Backend (Vulkan/Metal wrapper)

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: C++ or Rust
Alternative Programming Languages: Zig, Swift
Coolness Level: Level 5: Pure Magic
Business Potential: 5. The “Industry Disruptor”
Difficulty: Level 5: Master
Knowledge Area: GPU Architecture / Vulkan / Metal
Software or Tool: Vulkan SDK or Metal API
Main Book: “Foundations of Game Engine Development, Vol 2: Rendering” by Eric Lengyel

What you’ll build: A thin abstraction layer that takes your Display List from Project 4 and converts it into GPU command buffers, using modern “bindless” techniques similar to Flutter’s Impeller.

Why it teaches Rendering Architecture: You’ll learn the difference between “Old School” OpenGL (state-heavy) and “Modern” GPU APIs (explicit, command-buffer based). This is the cutting edge of rendering tech.

Core challenges you’ll face:

GPU Synchronization → Managing Semaphores and Fences so the GPU doesn’t read a buffer while the CPU is still writing to it.
Uniform Buffer management → Uploading transformation matrices for thousands of objects efficiently.
Pipeline State Objects (PSOs) → Pre-compiling shaders for every combination of blend mode and shape type.

Key Concepts:

Command Buffers: Explicitly recording instructions for the GPU.
Memory Heaps: Manually managing GPU memory.
Impeller’s Design: Moving from “tessellation” to “Vulkan pipelines.”

Real World Outcome

An engine that can draw millions of triangles per second with zero CPU overhead, fully utilizing the power of a modern GPU.

The Core Question You’re Answering

“How do we remove the CPU bottleneck in the rendering pipeline?”

Thinking Exercise

The Pipeline State

If you want to draw a Red Square (Alpha 0.5) and then a Blue Circle (Alpha 1.0):

How many GPU “Pipelines” do you need?
Can you reuse the same pipeline for both? Why or why not?

Hints in Layers

Hint 1: Use a Wrapper

Don’t start with raw Vulkan if you’re a beginner. Use a library like wgpu or VulkanMemoryAllocator to simplify the boilerplate.

Hint 2: The Command Encoder

Your Canvas playback loop should now call encoder.drawIndexed(...) instead of writing to a CPU buffer.

Hint 3: Bindless Design

Instead of switching textures for every draw call, put all your textures into one giant array and pass an index to the shader.

Project 11: Virtualized Scrolling Engine

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: TypeScript or C++
Alternative Programming Languages: Rust, Go
Coolness Level: Level 3: Genuinely Clever
Business Potential: 2. The “Micro-SaaS / Pro Tool”
Difficulty: Level 3: Advanced
Knowledge Area: Systems Design / UI Optimization
Software or Tool: ListView Architecture
Main Book: “Programming: Principles and Practice Using C++” by Bjarne Stroustrup

What you’ll build: A system that manages a list of 1 million items but only creates/renders the ~10 items that are actually visible on screen.

Why it teaches Rendering Architecture: You’ll learn about “Viewport Clipping” and “Node Recycling,” which are critical for smooth mobile app performance.

Project 12: Shader-based UI Effects (Blur/Shadows)

File: RENDERING_ENGINE_ARCHITECTURE_DEEP_DIVE.md
Main Programming Language: GLSL / HLSL
Alternative Programming Languages: Metal Shading Language
Coolness Level: Level 5: Pure Magic
Business Potential: 3. The “Service & Support” Model
Difficulty: Level 4: Expert
Knowledge Area: Mathematics / GPU Programming
Software or Tool: Fragment Shaders
Main Book: “The Book of Shaders” by Patricio Gonzalez Vivo

What you’ll build: A set of post-processing shaders that implement Gaussian Blur and Drop Shadows by sampling neighboring pixels in a layer.

Why it teaches Rendering Architecture: You’ll understand why “Blurs” are expensive (multiple passes) and how to optimize them using “Separable Kernels.”

Project Comparison Table

Project

Difficulty

Time

Depth of Understanding

Fun Factor

|———|————|——|————————|————|

1. Software Rasterizer

Level 3

1 Week

Maximum (Foundational)

⭐⭐⭐

2. Matrix Stack

Level 2

3 Days

High (Geometry)

⭐⭐⭐⭐

3. Layout Engine

Level 2

1 Week

High (Systems)

⭐⭐⭐

4. Display List

Level 2

3 Days

High (Architecture)

⭐⭐⭐

5. Dirty Regions

Level 3

1 Week

Maximum (Optimization)

⭐⭐⭐⭐

6. Layer Compositor

Level 4

2 Weeks

Maximum (GPU)

⭐⭐⭐⭐⭐

7. Text Shaping

Level 4

2 Weeks

Maximum (Complexity)

⭐⭐⭐

8. Path Tessellator

Level 5

1 Month

Infinite (Math)

⭐⭐⭐⭐⭐

10. GPU Backend

Level 5

1 Month+

Infinite (Hardware)

⭐⭐⭐⭐⭐

Recommendation

Start with Project 1 (Software Rasterizer).

If you don’t understand how pixels are set in memory, the rest of the engine will always feel like magic. Once you can draw a triangle byte-by-byte, move to Project 2 (Matrix Stack) to understand how objects move in space.

Final Overall Project: The “Mini-Impeller” UI Framework

Goal: Combine all previous projects into a single, cohesive library.

What you’ll build:

A UI framework where a user can define a tree of widgets in JSON/Code, and your engine:

Calculates Layout (Project 3)
Records a Display List (Project 4)
Identifies Dirty Regions (Project 5)
Shapes and Caches Text (Project 7)
Composites Layers using the GPU (Project 6 & 10)

Real World Outcome:

A window running at 120FPS, rendering a complex dashboard with scrolling lists, sharp text, and blurred glass effects, all built by you from the first pixel up.

Summary

This learning path covers Rendering Engine Architecture through 12 hands-on projects. Here’s the complete list:

Project Name

Main Language

Difficulty

Time Estimate

|—|————–|—————|————|—————|

Software Scanline Rasterizer

Level 3

1 Week

Matrix Stack & Canvas API

C++

Level 2

3 Days

Box-Model Layout Engine

TS / C++

Level 2

1 Week

Display List Recorder

C++

Level 2

3 Days

Dirty Region Invalidator

C++

Level 3

1 Week

Layer Compositor

C++ / Rust

Level 4

2 Weeks

Text Shaping & Cache

C++

Level 4

2 Weeks

Vector Path Tessellator

C++ / Rust

Level 5

1 Month

Image Decoder & Atlas

Level 2

4 Days

GPU Backend (Vulkan)

C++ / Rust

Level 5

1 Month+

Virtualized Scroller

TS / C++

Level 3

1 Week

Shader UI Effects

GLSL

Level 4

1 Week

Recommended Learning Path

For beginners: Start with projects #1, #2, #3, and #9.

For intermediate: Focus on #4, #5, #11, and #12.

For advanced: Master #6, #7, #8, and #10.

Expected Outcomes

After completing these projects, you will:

Understand the mathematical foundation of 2D and 3D graphics.
Be able to build a custom UI framework from scratch.
Master low-level memory management and GPU synchronization.
Understand how browsers (Chrome/Firefox) and UI kits (Flutter/Qt) optimize for performance.
Be prepared for “Senior Graphics Engineer” interviews at top-tier tech companies.

You’ll have built 12 working projects that demonstrate deep understanding of Rendering Architecture from first principles.