Web Toys

This page highlights the WebGPU, WebGL, WebAssembly based visualization and rendering toys I’ve written with a goal of exploring how scivis tools can become as readily available and easily deployable on the web as infovis ones. Although the browser still imposes restrictions on the visualization system’s ability to render and work with large data sets or perform expensive computations, WebGPU provides access to a modern native API, and the widely available WebGL2 and WebAssembly help push the browser’s abilities beyond what was previously possible. WebGL2 enables the browser to support the core rendering features needed for scivis (3D textures, floating point images, fixed function fragment operations, etc.). WebGPU goes even further and enables support for compute shaders, storage buffers, and lower CPU overhead rendering. WebAssembly allows for recompiling existing scivis libraries to fast, portable byte-code, or compiling new code for the browser without sacrificing performance. Furthermore, WebAssembly can also be executed outside of the browser, or JIT’d to native code, enabling users to easily transition from the browser to a native tool when working with larger data sets or computations which need native code performance or multithreading. Proposed future technologies for the browser can enable even more powerful algorithms, WebGPU could enable data-parallel computation through compute shaders, while shared memory multi-threading would enable multi-threaded CPU execution of both Javascript and WebAssembly. Both technologies would allow tools to tap much of the compute available across a range of platforms.

The toys listed below explore various aspects of these technologies. The WebGL Volume Raycaster implements a standard volume raycaster using 3D textures in WebGL2. The EWA Surface Splatter implements a splat-based renderer for visualizing point cloud data. The WebGL Marching Cubes example compares the performance of marching cubes implemented in pure Javascript vs. Rust compiled to WebAssembly, the WebAssembly version is 10-50x faster! The WebGL Neuron Visualizer uses libtiff compiled to WebAssembly to allow loading microscopy data into the browser to be rendered with WebGL.

WebGPU Volume Path Tracer

A volume path tracer implemented in WebGPU. The renderer uses Woodcock sampling to traverse and sample the volume and scientific visualization-style coloring to provide interactive physically-based visualization of 3D grid volumes. Try it out online!

WebGPU glTF Renderer

A glTF WebGPU renderer and loader written from scratch. Supports uploading glTF binary files to render them with a basic material color model. GLTF primitives are rendered as WebGPU render bundles, with shaders generated for materials/attributes and cached using a shader caching system. Try it out online!

WebGPU Block-Compressed Marching Cubes

WebGPU Block-Compressed Marching Cubes is an algorithm for interactive isosurface extraction on massive compressed data sets that runs entirely on the GPU in the browser using WebGPU. The technique works on block-compressed volumes using ZFP’s fixed-rate compression algorithm. To compute an isosurface the required blocks of the data are decompressed and cached on the fly using a GPU-driven LRU cache. This enables interactive visualization of large volumes entirely in the browser. This work was published at LDAV in 2020, you can learn more in the paper, get the code on Github, or try it out online!

WebGPU Marching Cubes

A GPU parallel implementation of the classic Marching Cubes algorithm using WebGPU. Work is parallelized over the dual grid to find active voxels, active voxel IDs are compacted down via exclusive scans and compactions, vertices are output to a single buffer for rendering by computing vertex offsets via an exclusive scan and then writing vertices to the offsets for each voxel in parallel. Try it out online!

WebGL Volume Raycaster

A scientific visualization style volume raycaster written using WebGL2 and Javascript. The renderer uses an arcball camera which supports mouse or touch input, and dynamically adjusts the sampling rate to maintain a smooth framerate, even on mobile devices. The volumes are downloaded via XMLHttpRequest from Dropbox when selected. I’ve also written a post about volume rendering for scientific visualization, and how I’ve implemented in WebGL to write this renderer. Try it out online!

WebGL EWA Surface Splatter

An elliptical weighted average (EWA) surface splatter renderer, implemented in WebGL, which also supports painting on the surfaces. Try it out online! This implements the papers: Object Space EWA Surface Splatting: A Hardware Accelerated Approach to High Quality Point Rendering by Ren, Pfister and Zwicker, and High-Quality Point-Based Rendering on Modern GPUs by Botsch and Kobbelt, with a few shortcuts. It also uses the deferred shading for splatting approach described in High-quality surface splatting on today’s GPUs by Botsch, Hornung, Zwicker and Kobbelt.

The renderer uses an arcball camera which supports mouse or touch input, and downloads datasets via XMLHttpRequest from Dropbox when selected.

Built on top of webgl-util for some WebGL utilities, glMatrix for matrix/vector operations, and FileSaver.js for saving models.

WebGPU Implicit Isosurface Raycaster

An implicit isosurface raycaster using WebGPU. Ray-isosurface intersections are computed using the technique described by Marmitt et al. ‘Fast and Accurate Ray-Voxel Intersection Techniques for Iso-Surface Ray Tracing’, 2004. Try it out online!

WebGL Marching Cubes

A WebGL + WebASM implementation of the classic Marching Cubes algorithm for extracting isosurfaces from 3D volume data. An isosurface is a surface which represents points in the 3D data which all have the same value (e.g., pressure, temperature). The isosurface extraction code is implemented in Rust and compiled to WebAssembly to accelerate extraction of the surface. Depending on your browser, the WebASM version is 10-50x faster than the pure Javascript one! The surface is rendered as a triangle mesh and combined with the volume during the volume raycasting step, in a manner roughly similar to shadow mapping. Try it out online!.

WebGPU Experiments

A series of examples written while learning about WebGPU: a glTF viewer, a web-based LiDAR viewer, and a data-parallel Marching Cubes implementation using compute shaders. The glTF viewer uses a custom glb importer to load data efficiently into WebGPU and supports the basic glTF features. The LiDAR viewer uses LAStools.js, a version of libLAS compiled to Web Assembly, to load las and laz files directly in the browser. The Marching Cubes example is a data-parallel implementation of marching cubes written using compute shaders to leverage GPU compute for interactive isosurface extraction.

WebGL Neuron Visualizer

A neuron visualization system using WebGL2. The renderer uses my WebGL2 volume renderer to display the RAW volume or imported TIFF stack and renders the imported neuron traces as lines within the volume. It can import single-channel 8bit and 16bit TIFF image stacks, and can import neuron traces in the SWC file format. TIFF files are loaded using a build of libtiff compiled to WebAssembly. The neurons are composited within the volume by rendering out the depth buffer and using this to terminate rays early in the volume when they hit the geometry, roughly similar to shadow mapping. A default demo dataset is included which renders a stitched version of the DIADEM NC Layer 1 Axons from the DIADEM Challenge. Try it out online!