Jay Chung

Welcome to my world, a space to record the chronicles of my projects and share my interests in tech.

Introduction

Visualizing complex mathematics interactively in the browser? It’s more complicated than it sounds.

As a math enthusiast and a software developer, I wanted to build something that combines both worlds—a way to visualize complex mathematical concepts, like conformal mappings, in an interactive way. But there was a catch: rendering these concepts required heavy computations, and traditional JavaScript just wouldn’t cut it. This led me to the powerful combination of Rust, WebAssembly (Wasm), and WebGL. In this post, I’ll take you through why I chose these technologies, the challenges I faced, and how this project has grown from visualizing conformal mappings to a scalable framework for math visualizations.

Project Overview

Initial Objective

Initially, my goal was to bring complex analysis to life in the browser. If you’ve ever studied this area of math, you know how beautiful, intricate, and at times overwhelming it can be. So, I set out to make these concepts more accessible by visualizing them interactively.

Scope and Extensibility

This was just the start—I soon realized that what I was building could be part of a larger, extensible framework. Beyond complex analysis, the same framework could visualize fractals, differential equations, or even 3D geometric transformations. So, I built this with extensibility in mind from day one.

Key Features

  • Real-time interaction: Drag, zoom, and manipulate parameters to see how different mathematical transformations evolve live.
  • High-Quality Visualizations: Think colorful, fluid shapes that change seamlessly as you interact.
  • High-Performance Rendering: With heavy computations at its core, WebGL and WebAssembly were essential to make sure the app runs smoothly without hogging all of the browser’s resources.

Why Rust, WebAssembly, and WebGL?

When it came to choosing the tech stack, there were a few considerations—speed, safety, and flexibility. Here’s why I ended up with Rust, WebAssembly, and WebGL.

Rust: Performance with Safety

The main reason I chose Rust was its focus on performance and memory safety. I needed a language that would allow me to perform heavy computations (like applying a conformal mapping to thousands of points) without running into memory issues or bugs that traditional languages might have. Rust’s borrow checker makes sure you never access memory you shouldn’t, which gave me peace of mind while working with complex calculations.

WebAssembly: Near-Native Speed for Web Apps

Running all this computation in the browser could easily slow everything to a crawl. This is where WebAssembly came in—it lets you compile Rust into a binary format that runs at near-native speed in the browser. For computationally heavy visualizations, it’s an absolute game-changer compared to just JavaScript.

WebGL: High-Quality Rendering for Real-Time Graphics

For rendering, I chose WebGL. It’s the de-facto way to draw 2D and 3D graphics in the browser at high performance, leveraging the GPU. WebGL and Rust communicate via WebAssembly, and with a little shader programming, you can create some beautiful effects in real-time.

Technical Challenges

Every technology choice comes with its hurdles, and here’s what I ran into:

  1. Real-time Performance Rendering and transforming visualizations interactively is no small feat. Each change in parameters triggers recalculations of thousands of points, and it all needs to happen seamlessly. Finding the right balance between accuracy and speed required careful optimization.

  2. Debugging in WebAssembly Although WebAssembly performs beautifully, debugging it can be tough. Browsers’ support for Wasm debugging isn’t as mature as it is for JavaScript, so tracking down performance issues or crashes sometimes felt like solving a mystery.

  3. GPU Programming with WebGL Writing shaders to offload computation to the GPU is powerful but challenging. It’s a different paradigm from CPU programming, and integrating WebGL shaders within Rust code meant learning how to manage data efficiently between WebAssembly and the WebGL context.

  4. Efficient Memory Management Memory matters, especially when handling large datasets or complex visualizations. Rust helps prevent leaks and data races, but managing the memory layout between WebAssembly and WebGL required careful handling to maintain efficiency.

  5. Interactive UI Handling interactions like zooming, panning, and parameter tweaking had to feel smooth, even with intensive calculations going on. Balancing user input and rendering updates was a fun challenge to get right without making the UI feel laggy.

Scalability and Extensibility

Since my goal was to make the visualization framework extensible, I designed the project in a modular way from the start.

Scalable Visualizations

While the initial focus was on complex analysis, the framework can support additional mathematical topics like fractals, 3D geometry, or even physics simulations. Each visualization type has its own module, and scaling is as simple as adding a new module following the same interface.

Optimizations for Scaling

As I continue to scale the project, some strategies I consider include:

  • Offloading more calculations to WebGL shaders to take advantage of GPU parallelism.
  • Improving memory efficiency by using efficient data structures and minimizing data transfers between WebAssembly and JavaScript.
  • Multi-threading in WebAssembly: Using Rust’s concurrency model to parallelize heavy computations.

Project Architecture

Here’s a peek at how everything fits together:

Modular Components

The architecture is divided into:

  • Visualization Modules: Each math concept has its own module, which encapsulates the logic for calculations and rendering.
  • Rendering Engine: Handles WebGL context, shader programs, and drawing pipelines.
  • UI Layer: Manages user interactions (e.g., sliders, buttons) and provides a flexible interface for each visualization.

Visualization Pipeline

The data flow in the project goes as follows:

  1. Math Engine: Handles all the mathematical logic in Rust.
  2. WebAssembly: Compiles Rust code and exposes an API to JavaScript for real-time data access.
  3. WebGL Renderer: Uses the data from the math engine to render the visualization in the browser.

Handling User Interactions

User interactions are processed in the UI layer, which sends signals to the WebAssembly layer to update visualizations accordingly. This approach keeps the UI responsive, while the math computations and rendering are handled asynchronously.

Potential Bottlenecks

Some bottlenecks I’ve faced include:

  • Data transfer overhead between WebAssembly and WebGL, which sometimes requires optimizing serialization.
  • Shader compilation time, which can slow down initial load times if not handled efficiently.

Conclusion

Building this math visualization framework has been an exciting journey. It’s more than just drawing shapes; it’s about bringing abstract math concepts to life in an interactive and visually rich way. The combination of Rust, WebAssembly, and WebGL makes this possible, pushing the boundaries of what’s feasible in the browser.