Stippling of 2D Scalar Fields - Simon Hagendorfer & Michelle Kornherr

Source Code

The full source code is available on our GitLab repository: https://gitlab.tuwien.ac.at/e193-02-visvu-students/visvu-2025-goertler-2019-hagendorfer-kornherr

Project Goal and Visualization Technique

This project implements a stippling-based visualization technique for 2D scalar fields, following the paper Stippling of 2D Scalar Fields by Görtler et al. Scalar values are encoded through stipple density, optionally combined with stipple size variation and contour-enhancing techniques.

Algorithm Summary

The core of the project is a generalized Linde–Buzo–Gray (LBG) stippling algorithm for raster-based 2D scalar data. Stipples are redistributed iteratively to match the scalar field density.

• Restricted stippling at border regions
• Mach-banding–inspired contour enhancement

Technologies

• Vue.js for the user interface with Typescript
• WebGPU for GPU-accelerated computation (with optional CPU fallback)

Installation and Setup

Requirements:

• Node.js / npm v22 or newer
• A modern browser with WebGPU support

Install and Run:

npm install
npm run dev
    

User Guide

The application provides an interactive interface for image-based stippling. Users can select the input mode:

• Upload an image
• Load a random image from picsum.photos
• Generate a color gradient

For random images and color gradients, the image resolution (width and height) can be specified.

Controls are divided into live (non-expensive) settings and expensive (algorithm) settings.

Live (Non-Expensive) Visual Settings

• Stipple Size
  Uniformly scales the size of all stipples.
• Stipple Size Bias
  Controls how the cell size values influences individual stipple sizes.
• Background Visibility
  Adjusts the opacity of the input image behind the stipples.
• Stipple Shape
  Selects the geometric shape used to draw stipples.
• Debug Visualization
  Displays the underlying tile representation that is used to generate and weight the stipple particles. Also displays the values of the grayscale buffer.

Expensive Algorithm Settings (Require Re-run)

• CPU / GPU Execution Mode
  Selects whether computation runs on the CPU or GPU.
• Total Stipple Count
  Defines how many stipples are used.
• GPU Iteration Count
  Number of relaxation steps performed during GPU execution.
• Initialization Layout
  Determines how stipples are initially distributed before optimization (e.g., random or grid-based).
• Area Normalization Mode
  Mostly CPU algorithm: Influences how the normalization for the stipple size bias happens.
• Uniform vs. Perceptual Weighting
  Enables perceptual weighting based on human visual sensitivity when generating the grayscale image.
• Contour Mode
  Bins grayscale values and can activate contour-aware stippling to emphasize grayscale bin boundaries.
• Contour Bin Count
  Number of discrete intensity levels used for grayscale binning.
• Boundary Split and Merge Factors
  CPU only: Control how aggressively regions are subdivided or merged during optimization.

A dedicated “Re-run Algorithm” button recomputes the stippling for the same input image, enabling comparison between parameter configurations.

Gallery

The following examples demonstrate different stippling modes and enhancements implemented in our system.

References

Görtler, J., Spicker, M., Schulz, C., Weiskopf, D., & Deussen, O. (2019).
Stippling of 2D Scalar Fields. IEEE Transactions on Visualization and Computer Graphics, 25(6), 2193–2204.
https://doi.org/10.1109/TVCG.2019.2903945