Part 2: Blazing-Fast GPU Acceleration via WGPU & Hybrid Typography
Building directly upon the foundations laid in Part 1 (where we created an animated SVG chart driven by the CPU), this chapter upgrades our rendering engine into a high-performance, native GPU pipeline.
When dealing with massive datasets—such as real-time financial tickers, high-frequency bioinformatic sequences, or dense sensor streams—the CPU-driven SVG approach hits an immediate bottleneck. Every frame requires generating megabytes of XML text strings, causing the browser DOM to choke at just a few hundred points.
To break through this wall, we will rewrite our application to leverage WGPU (WebGPU/WebGL2) inside WebAssembly. We will push our dataset from a modest 200 points to 50,000+ points, rendering them smoothly at a locked 60 FPS. Furthermore, we will implement your engine's signature feature: the Zero-Allocation Deferred Ledger Architecture, which offloads text rendering back to the browser's native Canvas 2D subsystem for perfect subpixel anti-aliasing.
Every frame is fully rendered via hardware acceleration directly on your graphics card.
0) Prerequisites
- You must complete Part 1 and ensure your Rust WASM toolchain (
wasm-pack, stable Rust) is fully operational. - A WebGPU-capable browser (Chromium-based browsers like Chrome/Edge v113+, or Firefox/Safari with experimental flags enabled). If WebGPU is unavailable,
wgpuwill automatically and seamlessly fall back to hardware-accelerated WebGL2.
1) Project Layout
We will modify the project layout from Part 1 to target an HTML <canvas> surface instead of an injected SVG <div>:
wave
├── Cargo.toml
├── index.html
├── pkg
└── src
└── lib.rs
2) Cargo.toml
We need to enable the wgpu feature flag for charton and include the mandatory browser dependencies (web-sys and wasm-bindgen-futures for handling async GPU device requests).
Update your wave/Cargo.toml to match the following configuration:
[package]
name = "wave"
version = "0.2.0"
edition = "2024"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4" # Required for awaiting asynchronous GPU adapters
charton = { version = "0.5", features = ["wgpu"] } # Enable WGPU feature
# Required for web-native target handling and canvas contexts
web-sys = { version = "0.3", features = [
"Window",
"Document",
"HtmlCanvasElement",
"OffscreenCanvas",
"CanvasRenderingContext2d"
] }
getrandom = { version = "0.3", features = ["wasm_js"] }
[profile.release]
opt-level = "s"
lto = true
codegen-units = 1
panic = "abort"
3) src/lib.rs - The GPU Hardware Architecture
In this module, we expose an asynchronous render_chart_gpu function.
Instead of generating and serializing heavy string data back to JavaScript, the Rust engine directly acquires a handle to your browser's canvas, spawns an isolated OffscreenCanvas for the WGPU render pipeline, flushes pure geometric primitives directly into VRAM, and hands a lightweight text ledger back to the browser's native typography engine.
Replace the contents of src/lib.rs with the following implementation:
#![allow(unused)] fn main() { //! Charton WASM WGPU Demo: Extreme high-performance scatter plot rendering. //! //! This module binds directly to a browser-side HTML canvas, bypassing the DOM //! completely to perform high-throughput GPU instanced drawing. use wasm_bindgen::prelude::*; use charton::prelude::*; /// Render a massive dataset straight to a canvas using WGPU hardware acceleration. /// /// # Arguments /// * `canvas_id` - The DOM ID of the target HTML `<canvas>` element. /// * `xs` - X-axis data buffer /// * `ys` - Y-axis data buffer /// * `colors` - Continuous scale data mapped to colors #[wasm_bindgen] pub async fn render_chart_gpu( canvas_id: String, xs: Vec<f64>, ys: Vec<f64>, colors: Vec<f64>, ) -> Result<(), JsValue> { // 1. Build a high-capacity Charton Dataset from inputs let ds = Dataset::new() .with_column("x", xs) .map_err(|e| JsValue::from_str(&e.to_string()))? .with_column("y", ys) .map_err(|e| JsValue::from_str(&e.to_string()))? .with_column("color", colors) .map_err(|e| JsValue::from_str(&e.to_string()))?; // 2. Formulate the declarative chart specifications let chart = Chart::build(ds) .map_err(|e| JsValue::from_str(&e.to_string()))? .mark_point() // Leverages pure GPU Instancing under the hood .map_err(|e| JsValue::from_str(&e.to_string()))? .configure_point(|p| p.with_size(1.0)) .encode(( alt::x("x"), alt::y("y"), alt::color("color"), )) .map_err(|e| JsValue::from_str(&e.to_string()))? .with_size(800, 400) .configure_theme(|t| { t.with_left_margin(0.01) .with_top_margin(0.12) .with_bottom_margin(0.05) }); // 3. Drive the hybrid orchestration pipeline (WGPU Geometry + Canvas 2D Text) // This executes the safe OffscreenCanvas blit and deferred ledger rendering natively. chart .render_to_canvas(&canvas_id) .await .map_err(|e| JsValue::from_str(&e.to_string()))?; Ok(()) } }
4) Build with wasm-pack
Recompile the project to re-generate your WebAssembly target and JavaScript glue bindings:
wasm-pack build --release --target web --out-dir pkg
5) index.html - The Million-Point Stress Test
Now let's construct the interactive frontend wrapper. To demonstrate the crushing performance advantage of the GPU, we will configure the simulation loop to initialize and render 50,000 points simultaneously right from the start, update a sliding window at 60 frames per second, and benchmark the frame timing.
Create or update index.html in your project root:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charton WASM — GPU WGPU Pipeline</title>
<style>
body {
font-family: system-ui, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding-top: 2rem;
background: #0d1117;
color: #c9d1d9;
}
#canvas-container {
position: relative;
width: 800px;
height: 400px;
border-radius: 12px;
background: #161b22;
border: 1px solid #30363d;
box-shadow: 0 4px 16px rgba(0,0,0,0.6);
overflow: hidden;
}
/* High-performance hardware canvas surface */
#chart-canvas {
width: 800px;
height: 400px;
display: block;
}
.tag {
margin-top: 1rem;
font-size: 0.9rem;
color: #8b949e;
}
#fps-counter {
font-weight: bold;
color: #58a6ff;
}
</style>
</head>
<body>
<h2>⚡ Charton + WGPU — GPU Hardware Multi-Point Stress Test</h2>
<div id="canvas-container">
<canvas id="chart-canvas"></canvas>
</div>
<div class="tag">
Active GPU Primitives: <span id="point-count">0</span> points |
Performance: <span id="fps-counter">Calculating...</span>
</div>
<script type="module">
import init, { render_chart_gpu } from './pkg/wave.js';
async function run() {
// Boot the compiled WebAssembly package
await init();
const pointCountElement = document.getElementById('point-count');
const fpsCounterElement = document.getElementById('fps-counter');
// --- STRESS TEST CONFIGURATION ---
const TOTAL_POINTS = 50_000;
let xs = new Float64Array(TOTAL_POINTS);
let ys = new Float64Array(TOTAL_POINTS);
let colors = new Float64Array(TOTAL_POINTS);
// Populate initial massive data buffers (Complex overlapping waves)
for (let i = 0; i < TOTAL_POINTS; i++) {
xs[i] = i * 0.01;
ys[i] = Math.sin(i * 0.05) * Math.cos(i * 0.002);
colors[i] = ys[i];
}
pointCountElement.textContent = TOTAL_POINTS.toLocaleString();
let lastCalledTime;
let fps;
let offset = 0;
// Locked 60 FPS requestAnimationFrame simulation loop
async function frameLoop() {
// Calculate real-time FPS metrics
if (!lastCalledTime) {
lastCalledTime = performance.now();
fps = 0;
} else {
let delta = (performance.now() - lastCalledTime) / 1000;
lastCalledTime = performance.now();
fps = Math.round(1 / delta);
fpsCounterElement.textContent = `${fps} FPS`;
}
// Dynamic simulation shift: mutate data values slightly over time
offset += 0.02;
for (let i = 0; i < TOTAL_POINTS; i++) {
// Update y and color buffers dynamically per frame
ys[i] = Math.sin(i * 0.05 + offset) * Math.cos(i * 0.002 + offset * 0.5);
colors[i] = ys[i];
}
try {
// Direct zero-copy data streaming from JS to WGPU vertex pipelines
await render_chart_gpu("chart-canvas", xs, ys, colors);
} catch (e) {
console.error("GPU Rendering Error:", e);
}
requestAnimationFrame(frameLoop);
}
// Fire up the GPU engine
requestAnimationFrame(frameLoop);
}
run();
</script>
</body>
</html>
6) Run and Compare
Start your local static HTTP server:
python -m http.server 8080
What you are witnessing:
- Look closely at the data points and lines. You will notice 50,000 independent data points floating and flowing simultaneously across the screen.
- Look at the performance metrics indicator. Despite rendering 500 times more data than the SVG example in Part 1, the framerate remains pinned at a rock-solid, buttery-smooth 60 FPS.
- Look at the chart labels and axes tick marks. Thanks to the Deferred Ledger Design, text anti-aliasing remains flawlessly sharp, crisp, and beautifully proportioned regardless of your monitor's DPI scaling, without embedding a massive 5MB
.ttffont compiler inside your WASM package.
7) Conclusion: The Power of Hybrid Architecture
By splitting the rendering pipeline into a Pure GPU Instancing Layer for Primitives and a Deferred Subsystem for Typography, charton delivers the best of both worlds.
You have just successfully designed and executed an industrial-grade visualization engine structure engineered to effortlessly handle real-time Big Data visualizations directly inside native web architectures.
This example serves as a fundamental demonstration of Charton’s core usage within WebAssembly; advanced high-performance patterns are covered in the Case Studies chapter.