Commonplace

High-Performance Graphics Rendering Approaches: Technical Comparison

Overview

This comparison evaluates different graphics rendering approaches for a Rust+WASM information management tool requiring 60fps performance with thousands of objects, LOD culling, and visual effects.

Rendering Approaches Comparison

1. WebGL (Direct)

What it is: Low-level 3D graphics API that compiles shaders to GPU Examples: Figma's canvas, Three.js applications

Pros:

  • Maximum performance - Direct GPU acceleration, can easily handle thousands of objects
  • Full control - Complete control over rendering pipeline, shaders, and optimizations
  • Visual effects - Native support for lighting, post-processing, particle systems
  • LOD/Culling - Built for viewport culling, level-of-detail, instancing
  • Rust+WASM ready - Excellent WebGL bindings available (web-sys, wgpu)
  • Mature ecosystem - Well-documented, stable APIs

Cons:

  • Development complexity - Requires graphics programming knowledge
  • Shader management - Need to write/maintain vertex and fragment shaders
  • Cross-platform quirks - Some driver inconsistencies between platforms
  • Learning curve - Steeper initial setup compared to 2D approaches

Performance: Excellent - designed for this use case

2. Canvas 2D

What it is: 2D drawing API with software/hardware acceleration Examples: Lucidchart, early Figma prototypes

Pros:

  • Simpler API - Familiar drawing commands (rect, arc, text)
  • Good performance - Can handle hundreds to low thousands of objects
  • Text rendering - Native high-quality text support
  • Immediate mode - Easy to reason about, no state management
  • Rust support - Good canvas bindings in web-sys

Cons:

  • Limited scalability - Performance degrades with thousands of objects
  • No GPU shaders - Limited visual effects (no custom lighting/materials)
  • Manual optimization - Need to implement your own spatial indexing, culling
  • 2D only - No native 3D transformations or depth testing

Performance: Good for medium complexity

3. SVG + DOM

What it is: Vector graphics as DOM elements, browser-rendered Examples: Early Penpot, many web-based diagram tools

Pros:

  • Declarative - Easy to build, modify, and reason about
  • Accessibility - Screen readers and DOM APIs work naturally
  • Standards-based - Built on web standards, good interoperability
  • CSS integration - Can style with CSS, use transforms, filters

Cons:

  • Poor scalability - Browser struggles with thousands of DOM elements
  • Limited control - Can't optimize rendering pipeline
  • Memory overhead - Each object creates DOM nodes
  • Performance ceiling - Fundamentally limited by DOM performance

Performance: Adequate for simple cases only

4. WebGPU

What it is: Next-generation graphics API, successor to WebGL Examples: New graphics applications, some game engines

Pros:

  • Future-proof - Modern API designed for current/future hardware
  • Compute shaders - Can do general-purpose GPU computing
  • Better performance - More efficient than WebGL in many cases
  • Lower overhead - Less driver overhead, better multi-threading

Cons:

  • Limited browser support - Still experimental in many browsers
  • Bleeding edge - API still evolving, less documentation
  • Rust ecosystem - wgpu is excellent but ecosystem is younger
  • Risk - Not ready for production use in all environments

Performance: Potentially excellent, but risky

Framework Considerations

Minimal WebGL Frameworks (Recommended)

  • wgpu (Rust) - Low-level but not too opinionated, excellent WASM support
  • glow (Rust) - Thin WebGL wrapper, maximum control
  • Three.js (JS) - Mature but potentially too high-level for your needs

Game Engines (Avoid for your use case)

  • Bevy - Too game-focused, opinionated ECS architecture
  • Godot - Overkill for information management tools
  • Unity WebGL - Heavy runtime, not ideal for web deployment

Possibility: WebGL with Minimal Framework

For Commonplace, WebGL is a strong option because:

  1. Performance Requirements Met - Can easily handle thousands of objects at 60fps with proper batching and culling
  2. Visual Effects Support - Native shader support for lighting, post-processing, particle effects
  3. Rust Ecosystem - Excellent WebGL support through wgpu or web-sys
  4. Control vs Complexity - Gives you the control you need without being overly complex
  5. Future-Proof - Stable, mature API that will be supported for years

Suggested Technical Stack:

// Core rendering
wgpu = "0.18"              // Modern graphics abstraction
web-sys = "0.3"            // WebGL bindings
wasm-bindgen = "0.2"       // WASM interop

// Math and utilities  
glam = "0.24"              // SIMD math library
bytemuck = "1.14"          // Safe transmutation for GPU data

Architecture Approach:

  • Batched rendering - Group similar objects to minimize draw calls
  • Spatial indexing - Use R-tree or similar for efficient culling
  • Instance rendering - Use instancing for repeated objects (icons, shapes)
  • LOD system - Multiple detail levels based on zoom/distance
  • Shader-based effects - Custom materials, lighting, post-processing

Why Not Canvas 2D:

While simpler, Canvas 2D will likely hit performance walls with thousands of objects and can't provide the visual effects we want.

Why Not SVG:

Fundamentally limited by DOM performance - browsers struggle with complex SVG scenes containing thousands of elements.

Implementation Priorities

  1. Start with basic WebGL setup - Get triangle rendering working
  2. Build batching system - Minimize draw calls early
  3. Implement spatial culling - Only render visible objects
  4. Add instancing - For repeated geometry
  5. Develop LOD system - Multiple detail levels
  6. Add visual effects - Lighting, materials, post-processing

This approach could give us a solid foundation that can scale to very complex scenes while maintaining the performance and visual quality we want.