Spatial computation and visualization with Metal

Having worked with OpenGL, WebGL, WebGL2 and some WebGPU, I wanted to try Metal for data processing and visualization. Thankfully, WebGPU, and WebGL2 additions like uniform buffer objects (UBO) were patterned after Apple's Metal API. To propagate value among UI elements such as sliders, Combine is used. It follows the reactive model, inspired by Functional Reactive Programming, which is a useful incremental computation model for interactive data analysis. As MTKView is a subclass of UIVuew on mobile, the resulting UIKit component is wrapped for use by SwiftUI. Non-Metal components are kept in SwiftUI.

The initial experiments use public raster data for the annual average of California's precipitation between 1981 and 2010.

These first results use SwiftUI, Combine, Metal, shader functions (including cross-section, binning, contours, grid), Core Graphics, 120FPS animation, XCode and Simulator.

The cross-section terminal circles are draggable via DragGesture. The user can drag both circles simultaneously due to multitouch:

Operations include loading a data file, discretizing precipitation levels, generating contours, mapping it to palettes such as those provided at ColorBrewer2.

Having used TypeScript for years, Swift and its UI libraries prove to be a productive environment, letting me transfer enough of the earlier skills to feel like one can hit the ground running with Swift.

Caveat: it's not a good example for information design, UI design or data visualization practices. It's only for catching up on Swift, SwiftUI and Metal.