Rigging for fun and profit

Written by Andre Molnar 2026-03-20

This is an experiment in simple rigging of triangulated meshes with constraints between control points. The constraints between control points are independents from the constraints within each mesh.

In the scene we procedurally generated meshes with a simple checkerboard shader for visual feedback on deformation. There are 3 control points. The range of motion between point 0 and 1 is larger than the range of motion between points 1 and 2.

This is a proof of concept using vanilla JS and WebGL to achieve the results building on learnings from an earlier experiment in GPU constraint solving.

Shader passes and techniques

This scene uses two shader programs (four shader stages total), each handling a different rendering problem: Internal mesh constraints now run through a multipass WebGPU compute solver by default, with no CPU fallback safety net.

1) Constraint compute pass (WebGPU)

• Compute shader (mesh-constraint-compute-solver.js)
  • Technique: iterative position-based dynamics style projection over edge-length and triangle-area constraints.
  • Problem solved: pushes and pulls propagate through the whole mesh while reducing local collapse and fold-over during rapid motion.
  • Includes signed-area inversion guards (minimum area ratio) so triangles stay on the same orientation side as their rest pose.
  • Implemented as a generic solver module so any mesh can reuse it by supplying vertices, edges, triangles, pinned masks, and pin targets.

2) Textured mesh pass

• Vertex shader (MESH_VERTEX_SHADER)

  • Technique: per-vertex transform from pixel/world space into clip space.
  • Problem solved: maps solver-updated deformed vertex positions into the GPU rasterization pipeline.
  • Also passes UVs through to the fragment stage so texture coordinates stay consistent as the mesh deforms.

• Fragment shader (MESH_FRAGMENT_SHADER)

  • Technique: texture sampling from the checkerboard atlas.
  • Problem solved: gives immediate visual feedback for stretch/compression and shear by showing texel distortion.
  • Uses a straightforward color output so deformation artifacts are easy to spot.

3) Wireframe overlay pass

• Vertex shader (WIREFRAME_VERTEX_SHADER)

  • Technique: same positional transform to clip space, but for line-indexed edge geometry.
  • Problem solved: ensures the wireframe aligns exactly with the textured triangles.

• Fragment shader (WIREFRAME_FRAGMENT_SHADER)

  • Technique: flat constant-color output with alpha blending.
  • Problem solved: renders topology legibly over the textured surface for debugging constraints, triangle quality, and fold risk.