Vertex Shader Domain Warping with Automatic Differentiation
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.
- J.A. Baerentzen and H. Aanaes. Signed distance computation using the angle weighted pseudonormal. IEEE Transactions on Visualization and Computer Graphics, 11(3):243–253, 2005. doi:10.1109/TVCG.2005.49.
- James F. Blinn. Simulation of wrinkled surfaces. SIGGRAPH Comput. Graph., 12(3):286–292, aug 1978. doi:10.1145/965139.507101.
- Dynamic kelvinlets: Secondary motions based on fundamental solutions of elastodynamics. ACM Trans. Graph., 37(4), jul 2018. doi:10.1145/3197517.3201280.
- Matt DesLauriers. This is created with dense vertical polylines warped by a noise function. Here is a close-up of the final renders, as well as three generations using lower line counts to visualize the algorithm., October 2018. URL: https://twitter.com/mattdesl/status/1047094498562625536.
- Benjamin Jotham Fry. Computational Information Design. PhD thesis, Massachusetts Institute of Technology, 4 2004. URL: https://benfry.com/phd/dissertation-110323c.pdf.
- Andreas Griewank et al. On automatic differentiation. Mathematical Programming: recent developments and applications, 6(6):83–107, 1989.
- Ray tracing deterministic 3-d fractals. In Proceedings of the 16th Annual Conference on Computer Graphics and Interactive Techniques, SIGGRAPH ’89, page 289–296, New York, NY, USA, 1989. Association for Computing Machinery. doi:10.1145/74333.74363.
- Shadertoy: Learn to create everything in a fragment shader. In SIGGRAPH Asia 2014 Courses, SA ’14, New York, NY, USA, 2014. Association for Computing Machinery. doi:10.1145/2659467.2659474.
- Ben Kovach. Art Blocks gave me the opportunity to stretch this system to its limits. Edifice plays extensively with color, layout, texture, perspective, and domain warping to produce images that still consistently surprise me after generating tens of thousands of outputs. Here’s Ropsten #41, November 2021. URL: https://twitter.com/bendotk/status/1455232555561754626.
- Morten S. Mikkelsen. Bump mapping unparametrized surfaces on the gpu. Journal of Graphics, GPU, and Game Tools, 15:49 – 61, 2010. URL: https://mmikk.github.io/papers3d/mm_sfgrad_bump.pdf.
- Processing Foundation. Processing, 2001. URL: https://processing.org.
- Processing Foundation. p5.js, 2014. URL: https://p5js.org.
- Inigo Quilez. Domain Warping, 2002. URL: https://iquilezles.org/articles/warp/.
- Inigo Quilez. Normals for an SDF, 2015. URL: https://iquilezles.org/articles/normalsSDF/.
- Gaëtan Renaudeau. Cirque de lumières, 2021. URL: https://gen.art/drops/lumieres.
- Stanford University. The Stanford 3D Scanning Repository, 1994. URL: https://graphics.stanford.edu/data/3Dscanrep/.
Paper Prompts
Sign up for free to create and run prompts on this paper using GPT-5.
Top Community Prompts
Collections
Sign up for free to add this paper to one or more collections.