Vertex Shader Domain Warping with Automatic Differentiation

TL;DR

Problem: 3D domain warping in WebGL is hindered by baked vertex normals that cease to align after warping, and normal updates via finite differences require tuning. Approach: derive an exact normal-update using the warp Jacobian $J$ and a local tangent frame to obtain $n' = \text{normalize}((u+Ju) \times (v+Jv))$, with $f$ differentiable, and generate GLSL that computes $f$ and $J$ at compile time via forward-mode AD. Contributions: a shader-generation pipeline (p5.warp) that outputs $f$ and $J$ in GLSL without requiring GLSL coding from artists, and validation on multiple meshes with correct lighting. Significance: enables robust, parameter-free 3D domain warping in web environments and sets the stage for WebGPU-based pipelines and future enhancements like adaptive subdivision and more intuitive warp-function control.

Abstract

Domain warping is a technique commonly used in creative coding to distort graphics and add visual interest to a work. The approach has the potential to be used in 3D art as mesh vertices can be efficiently warped using a vertex shader in a WebGL pipeline. However, 3D models packaged for the web typically come with baked-in normal vectors, and these need to be updated when vertex positions change for lighting calculations to work. This is typically done via finite differences, which requires parameter tuning to achieve optimal visual fidelity. We present a method for 3D domain warping that works with automatic differentiation, allowing exact normals to be used without any tuning while still benefiting from hardware acceleration.

Figures (7)

• Figure 1: An airplane model undergoing an animated twist warp. Its vertex positions and normals are updated in the vertex shader, with the fragment shader visualizing the absolute normal direction as a color. After applying the warp, the output normals are accurate.
• Figure 2: When applying a sine wave warp to the vertices of a sphere (a), the baked normals will be incorrect (b) unless they are updated to account for the warp. Relying on screen-space derivatives of position yields faceted normals (c), while computing normals in the vertex shader allows for smooth normals (d).
• Figure 3: A cube (a) passed through a warp made with sine waves in each axis (b).
• Figure 4: A bunny (a) retaining correct normals when passed through warps that twist about the X axis (b) and even after being flattened into the YZ plane (c).
• Figure 5: Frames of an animated warp inspired by the "genie" animation while minimizing a window introduced in Mac OS X.