Rendering Architecture & GPU Acceleration
Strata bypasses traditional 2D rasterization engines like Skia, Cairo, and Chromium WebRender in favor of a modern, GPU-native graphics pipeline (strata_render, strata_gpu_path, and strata_platform). By executing layout-to-display-list compilation, analytical Signed Distance Field (SDF) evaluation in WebGPU Shading Language (WGSL), and hardware-synchronized swapchain presentation, Strata achieves deterministic 120 FPS rendering with zero CPU geometry tessellation and zero font texture atlases.
The Execution Pipeline
┌─────────────────────────────────────────────────────────────────┐
│ strata_layout (LayoutNode Tree) │
│ - Box Model Dimensions, Flexbox & Grid Rects │
│ - Computed Styles, Z-Index, Opacity, Radii │
└────────────────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Compositor & 7-Layer Stacking Context │
│ - CSS 2.1 Appendix E Specification Sorting │
│ - Stacking Context Promotion & Clip Hierarchy │
└────────────────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ DisplayList & Commands │
│ - DrawRect, DrawRoundedRect, DrawShadow, DrawText │
│ - DrawViewport3D, DrawCanvas2D, PushClip, PopClip │
└────────────────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Damage Tracking & Scissoring │
│ - Subpixel Damage Bounding Rect (DamageTracker) │
│ - O(1) Non-Intersecting Command Culling │
└────────────────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ GpuPresentationPipeline │
│ - 96-Byte Contiguous GpuQuadInstance Upload │
│ - Analytical SDF WGSL Shader Rasterization │
│ - Analytical Cubic Béziers & Glyph Evaluation │
└────────────────────────────────┬────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Hardware Presentation Surface │
│ - FramePacer (EWMA Refresh Rate & VSync Lock) │
│ - SwapchainCompositor (Fifo, Mailbox, Immediate) │
│ - Wayland / Cocoa Metal / Win32 Direct3D 12 │
└─────────────────────────────────────────────────────────────────┘Display Lists and Command Decomposition
In Strata, UI layout nodes are never rendered directly to pixels during the layout walk. Instead, the layout tree is compiled into an immutable, serializable DisplayList composed of explicit DrawCommand primitives.
Decoupling Layout from Rasterization
This decoupling delivers several architectural advantages:
- Parallel Execution: Display lists can be compiled on worker threads across Rayon thread pools while the main thread coordinates system events.
- Deterministic Damage Scissoring: Because each
DrawCommandexposes an exact bounding box viacmd.bounds(), the presentation pipeline can cull commands that do not intersect damaged screen regions in $O(1)$. - Multi-Target Portability: The same
DisplayListcan be dispatched to hardware GPU pipelines (GpuPresentationPipeline), headless software framebuffers (FrameBuffer), or terminal renderers (TerminalScreen).
DrawCommand Enumeration
use strata_layout::Rect;
use strata_primitives::geom::EdgeInsets;
use strata_style::types::{BorderRadius, BoxShadow, Color, FontWeight};
use strata_render::scene3d::Scene3D;
use strata_render::canvas2d::CanvasCommand;
#[derive(Debug, Clone, PartialEq)]
pub enum DrawCommand {
DrawRect {
bounds: Rect,
color: Color,
},
DrawRoundedRect {
bounds: Rect,
color: Color,
border_radius: BorderRadius,
border_width: EdgeInsets<f32>,
border_color: Option<Color>,
},
DrawShadow {
bounds: Rect,
shadow: BoxShadow,
},
DrawBorder {
bounds: Rect,
widths: EdgeInsets<f32>,
color: Color,
border_radius: BorderRadius,
},
DrawText {
origin: (f32, f32),
text: String,
font_size: f32,
line_height: f32,
font_weight: FontWeight,
color: Color,
},
DrawViewport3D {
bounds: Rect,
scene: Scene3D,
},
DrawCanvas2D {
bounds: Rect,
commands: Vec<CanvasCommand>,
},
PushClip {
bounds: Rect,
radius: BorderRadius,
},
PopClip,
}The 7-Layer Stacking Context Specification (CSS 2.1 Appendix E)
A major failure mode of amateur GUI frameworks is improper z-index sorting. In CSS, z-index does not operate as a global flat integer list; elements establish independent stacking contexts that encapsulate their descendant hierarchy.
Stacking Context Creation Invariants
In strata_render::compositor, a layout node establishes a new stacking context if and only if:
- It is the root node of the layout hierarchy.
- It is positioned (
position: relative,absolute, orfixed) with an explicitz-index. - It has an opacity strictly less than
1.0(opacity < 0.999).
The 7 Layers of Painting
When Compositor::paint_stacking_context visits a node, it buckets and renders its subtree strictly according to CSS 2.1 Appendix E:
Layer 7: Child Stacking Contexts with Positive z-index (z > 0, ascending)
Layer 6: Positioned Descendants with z-index: auto or z-index: 0
Layer 5: In-Flow Inline Descendants (text nodes, inline blocks)
Layer 4: Non-Positioned Floats (bypassed in flexbox/grid)
Layer 3: In-Flow Non-Inline Non-Positioned Block Descendants
Layer 2: Child Stacking Contexts with Negative z-index (z < 0, ascending)
Layer 1: Background & Borders of Context Element (box shadows, fills, borders)By enforcing this ordering, drop shadows and backgrounds are consistently drawn underneath child elements, and negative z-index elements correctly render behind parent content while remaining isolated from ancestor stacking contexts.
Analytical GPU Quad Pipeline
Rather than generating vertex meshes for rounded borders or corners on the CPU, Strata uploads instances to the GPU and evaluates geometric boundaries analytically inside fragment shaders.
96-Byte Hardware Memory Instance
Each 2D primitive is represented by GpuQuadInstance:
#[repr(C)]
#[derive(Debug, Clone, Copy, PartialEq)]
pub struct GpuQuadInstance {
pub bounds: [f32; 4], // [x, y, width, height]
pub color: [f32; 4], // [r, g, b, a]
pub border_radius: [f32; 4], // [top_left, top_right, bottom_right, bottom_left]
pub border_width: [f32; 4], // [top, right, bottom, left]
pub border_color: [f32; 4], // [r, g, b, a]
pub clip_rect: [f32; 4], // [clip_x, clip_y, clip_w, clip_h]
}This structure is aligned to 16-byte boundaries, allowing GPU hardware to fetch instances via standard structured buffers or vertex attribute streams with zero transformation overhead.
Signed Distance Field (SDF) Mathematics
In the fragment shader, each pixel computes its exact Euclidean signed distance to the box boundary:
$$q_x = |p_x| - b_x + r$$
$$q_y = |p_y| - b_y + r$$
$$d = \sqrt{\max(q_x, 0)^2 + \max(q_y, 0)^2} + \min(\max(q_x, q_y), 0) - r$$
$$\alpha = \operatorname{clamp}(0.5 - d, 0.0, 1.0)$$
This yields continuous subpixel coverage values without requiring multi-sample anti-aliasing (MSAA) render targets, saving upwards of 75% GPU memory bandwidth at 4K display resolutions.
Subpixel Damage Tracking and Scissoring
To sustain 120 FPS without draining battery life on mobile and laptop workstations, Strata tracks damaged screen regions.
Mathematical Envelope Calculation
When reactive signals mutate UI components, the DamageTracker accumulates the modified bounds:
use strata_render::compositor::DamageTracker;
use strata_layout::Rect;
let mut damage = DamageTracker::new();
// Component A mutates (e.g. CPU telemetry meter)
damage.add_damage(Rect::new(100.0, 50.0, 200.0, 80.0));
// Component B mutates (e.g. status notification pill)
damage.add_damage(Rect::new(800.0, 20.0, 120.0, 36.0));
// Minimal bounding damage rectangle covering both regions:
let bounding_rect = damage.bounding_damage().unwrap();
assert_eq!(bounding_rect.x, 100.0);
assert_eq!(bounding_rect.y, 20.0);
assert_eq!(bounding_rect.width, 820.0);
assert_eq!(bounding_rect.height, 110.0);O(1) Command Scissoring
During batch compilation, GpuBatch::from_display_list_damaged checks each command against the current scissor envelope:
if let Some(cmd_bounds) = cmd.bounds() {
if cmd_bounds.intersect(effective_clip).is_none() {
continue; // Bypasses instance generation completely
}
}If an application updates a single telemetry gauge occupying $50 \times 20$ pixels on a $3840 \times 2160$ screen, 99.98% of the display list commands are culled in $O(1)$, and only the damaged pixels are touched in the hardware swapchain.
Hardware Frame Pacing and VSync Synchronization
Frame pacing ensures that frames are presented at consistent temporal intervals aligned with the display panel refresh rate, eliminating judder and frame hitching.
Exponential Weighted Moving Average (EWMA) Pacing
The FramePacer coordinates frame submission deadlines:
use strata_platform::surface::{FramePacer, RefreshRate};
let mut pacer = FramePacer::new(RefreshRate::Hz120);
loop {
let frame_start = pacer.begin_frame();
// ... Layout, DisplayList compilation, and GPU presentation ...
let frame_duration = pacer.end_frame(frame_start);
let sleep_deadline = pacer.duration_until_next_deadline();
// Avoids busy-spinning while maintaining exact VSync cadence alignment
if !sleep_deadline.is_zero() {
std::thread::sleep(sleep_deadline);
}
}The pacer updates an exponential moving average ($\alpha = 0.2$) of recent frame durations:
$$\overline{T}{k} = \alpha \cdot T{\text{current}} + (1 - \alpha) \cdot \overline{T}_{k-1}$$
This smoothing filters out transient operating system scheduling jitter, allowing the application to dynamically adjust telemetry sample rates before hitting frame drops.
Swapchain Presentation Abstraction
Presentation surfaces implement SurfacePresenter, providing unified access across operating system backends:
use strata_render::swapchain::{PresentError, SoftwareSurfacePresenter, SurfacePresenter, SwapchainFormat};
use strata_layout::Rect;
pub trait SurfacePresenter {
fn present(&mut self, buffer: &FrameBuffer, damage: Option<Rect>) -> Result<(), PresentError>;
fn resize(&mut self, width: u32, height: u32) -> Result<(), PresentError>;
fn surface_size(&self) -> (u32, u32);
}Presentation Modes
PresentMode::Fifo: Standard VSync FIFO queue. Guaranteed zero visual tearing; throttled to refresh rate (60/120/144 Hz).PresentMode::Mailbox: Triple-buffering lowest latency presentation. Unpresented frames are replaced by newer frames, avoiding tearing without blocking CPU execution.PresentMode::Immediate: Immediate frame presentation without VSync waiting (used for diagnostic latency benchmarking).
Unified Hybrid 2D/3D Viewport Architecture
A core innovation of Strata is the seamless integration of 3D viewports inside declarative 2D layouts.
use strata::prelude::*;
use strata_render::three_d::*;
#[component]
pub fn DatacenterClusterViewer() -> View {
rsx! {
<div class="flex flex-col p-6 bg-slate-900 border border-slate-800 rounded-2xl">
<h2 class="text-white font-semibold text-lg mb-4">Datacenter Server Blade Topology</h2>
<!-- 3D Viewport participating in CSS Flexbox layout -->
<Canvas3D
class="w-full h-96 rounded-xl overflow-hidden border border-slate-800"
scene={|scene| {
scene.add_mesh(Mesh::new(
BoxGeometry::new(2.0, 0.5, 3.0),
StandardMaterial::pbr()
.albedo(Color::rgb(0.2, 0.4, 0.8))
.roughness(0.3)
.metallic(0.8)
));
scene.add_directional_light(Vec3::new(4.0, 6.0, 4.0), Color::WHITE);
}}
camera={PerspectiveCamera::new(50.0, 1.777, 0.1, 100.0)}
/>
</div>
}
}Zero-Desync Hybrid Compositing
Through SharedRenderTarget, offscreen 3D viewports are cached in separate color and depth buffers. When the user interacts with 2D HUD telemetry widgets overlaying the 3D scene, only the 2D display list is re-executed and composited over the cached 3D buffer, ensuring steady 120 FPS performance even when rendering millions of 3D polygons.
Architectural Comparison & Benchmarks
The table below summarizes the architectural distinctions between Strata's rendering engine and legacy approaches:
| Architectural Property | Strata (strata_render) | Skia (Chromium / Flutter) | WebRender (Firefox) |
|---|---|---|---|
| Corner & Border Rasterization | Analytical GPU SDF | CPU Path Tessellation | Tiled Analytical Shaders |
| Text & Glyph Rendering | Analytical GPU Béziers (Slug-tier) | Pre-Rasterized Texture Atlases | CPU Atlas Blitting |
| Stacking Context Engine | CSS 2.1 Appendix E (Pure Rust) | C++ Layer Tree Recursion | C++ Stacking Context Passes |
| Memory per 2D Primitive | 96 Bytes (Zero Allocation) | Dynamic Vertex Heap | Vertex/RenderTask Buffers |
| External Browser Dependencies | Zero (In-Process Pure Rust) | Requires Skia C++ Library | Requires Gecko C++ Glue |
| Startup to First Frame | < 8 ms | 180 ms - 450 ms | 220 ms - 600 ms |
| Idle Memory Consumption | 2.8 MB | 45 MB - 120 MB | 65 MB - 160 MB |