High-Throughput WebGPU Compute Shaders for Real-Time 3D Mesh Deformation

1. Abstract & Problem Statement

Interactive 3D geometry manipulation in browser-based CAD and spatial sculpting environments has traditionally suffered from severe CPU-to-GPU memory transfer bottlenecks. In standard WebGL 2.0 implementations, performing dynamic vertex displacement on high-density meshes (100,000+ vertices) requires computing Euclidean distance metrics and falloff weight distributions on the main JavaScript thread or a dedicated Web Worker, followed by continuous buffer re-uploading via gl.bufferSubData().

At 60 frames per second, the frame budget is strictly bounded at 16.6 milliseconds. Iterating over 100,000 vertices in JavaScript consumes between 14ms and 28ms on commodity dual-core and quad-core CPUs, introducing severe frame drops, thermal throttling, and noticeable input lag between physical hand gestures and geometry response.

In this paper, we detail the GPU-native compute architecture implemented within HandForge (and distributed via the open-source handforge NPM library and GitHub repository). By delegating geometry deformation entirely to WebGPU Compute Shaders programmed in WGSL (WebGPU Shading Language), calculations execute directly within GPU video RAM (VRAM) with persistent buffer binding, eliminating host-device serialization overhead and unlocking sustained 60 FPS mesh deformation on consumer hardware.

2. Mathematical Formulation: Radial Falloff & Vector Projection

Spatial sculpting requires continuous real-time calculation of vertex displacements influenced by the 3D position of a virtual brush tool tip (derived from real-time MediaPipe hand landmarks). Let the brush center in world coordinates be denoted by vector P_brush ∈ ℝ³, with effective radius R and sculpt intensity scalar I.

For every vertex V_i in the geometry buffer with position P_i and surface normal vector N_i, the Euclidean distance is:

d_i = || P_i - P_brush ||

W(d_i) = 
  if d_i >= R : 0
  if d_i < R  : (1.0 - (d_i / R)^2 )^3   [Smooth Hermite Polynomial]

The displacement delta vector ΔP_i is then computed along the vertex normal:

ΔP_i = N_i * (I * W(d_i))
P_new_i = P_i + ΔP_i

3. WGSL Compute Shader Implementation

Below is the actual WGSL compute shader kernel deployed within the HandForge engine. It dispatches workgroups of size 64, allowing parallel SIMD execution across hundreds of streaming multiprocessors simultaneously:

struct SculptUniforms {
    brushPos: vec3<f32>,
    radius: f32,
    intensity: f32,
    mode: u32, // 0 = Push, 1 = Pull, 2 = Smooth, 3 = Pinch
    vertexCount: u32,
    padding: f32,
};

@group(0) @binding(0) var<uniform> uniforms: SculptUniforms;
@group(0) @binding(1) var<storage, read_write> positions: array<vec3<f32>>;
@group(0) @binding(2) var<storage, read> normals: array<vec3<f32>>;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
    let index = global_id.x;
    if (index >= uniforms.vertexCount) {
        return;
    }

    let pos = positions[index];
    let normal = normals[index];
    let dist = distance(pos, uniforms.brushPos);

    if (dist < uniforms.radius) {
        // Cubic Hermite smoothstep falloff curve
        let t = 1.0 - (dist / uniforms.radius);
        let factor = t * t * (3.0 - 2.0 * t);
        let displacement = normal * (uniforms.intensity * factor);

        if (uniforms.mode == 0u) {
            positions[index] = pos + displacement;
        } else if (uniforms.mode == 1u) {
            positions[index] = pos - displacement;
        }
    }
}

4. Benchmark & Performance Comparison

We evaluated the system on an Intel Core i5-1135G7 integrated GPU vs traditional WebGL JavaScript processing across variable vertex complexities:

5. Open-Source NPM Package Documentation: handforge

Developers can integrate the HandForge spatial sculpting pipeline into their own Next.js, Three.js, or WebGPU applications using the published NPM package:

npm install handforge

Quickstart TypeScript Example

The following snippet illustrates how to instantiate the WebGPU deformation pipeline and hook it directly to an existing Three.js BufferGeometry:

import { HandForgeSculptor } from "handforge";
import * as THREE from "three";

// 1. Initialize sculptor with WebGPU device
const sculptor = new HandForgeSculptor({
    radius: 0.15,
    intensity: 0.05,
    mode: "push"
});
await sculptor.init();

// 2. Bind existing Three.js mesh geometry
const mesh = new THREE.Mesh(
    new THREE.IcosahedronGeometry(2, 6),
    new THREE.MeshStandardMaterial({ wireframe: true })
);
sculptor.bindGeometry(mesh.geometry);

// 3. Dispatch GPU deformation from spatial hand coordinates
function onHandLandmarkUpdate(indexTipWorldPos: THREE.Vector3) {
    sculptor.applyDeformation(indexTipWorldPos);
}

6. Conclusion & Future Research

By removing the CPU from the mesh manipulation loop, WebGPU transforms web browsers into viable CAD modeling and real-time animation workstations. Future iterations of HandForge research will explore GPU-accelerated Laplacian surface smoothing, dynamic multi-resolution mesh subdividing (Tessellation shaders), and WebGPU-accelerated GLTF binary export.

Animatrous Engineering Lab

Dedicated to pioneering client-side AI, WebGPU graphics pipelines, and contactless spatial interaction. Published under the open-source @animatrous ecosystem.