Three.js Blocks

Home
Documentation
Examples
Tools

ComputeSDFGenerator

@three-blocks/coreWebGPU
new ComputeSDFGenerator(options : Object)

GPU-accelerated SDF (Signed Distance Field) generator using mesh BVH.

Overview Generates a 3D texture containing signed distances from a mesh surface. It uses a BVH (Bounding Volume Hierarchy) acceleration structure to efficiently query the closest point on the mesh for each voxel.

Features

  • Fast Generation: Uses compute shaders to generate SDFs in parallel.
  • BVH Acceleration: Leverages three-mesh-bvh for O(log N) distance queries.
  • Dynamic Updates: Can update the SDF if the mesh deforms (provided the BVH is updated).

Usage The generated 3D texture can be used for:

  • Volume Rendering: Raymarching clouds, smoke, or fluids.
  • Collision Detection: GPU-based particle collisions.
  • VFX: Attracting/repelling particles from a surface.
Constructor Parameters
optionsoptionalObject
Configuration options.
  • resolutionoptionalnumber
    SDF grid resolution (resolution^3 voxels). Higher is more detailed but slower.
    Default is 64.
  • marginoptionalnumber
    Extra margin around mesh bounds to capture the field.
    Default is 0.2.
  • thresholdoptionalnumber
    Distance threshold (bias) applied to the SDF.
    Default is 0.0.
  • boundsoptionalTHREE.Box3
    Custom bounds for the SDF volume. Auto-computed from geometry if not provided.
  • workgroupSizeoptionalTHREE.Vector3
    Compute shader workgroup size. Tweak for performance.
    Default is Vector3(4,4,4).
Example
import { GenerateMeshBVHWorker } from 'three-mesh-bvh/worker';
import { ComputeSDFGenerator } from '@three-blocks/core';

// 1. Generate BVH (async worker recommended)
const worker = new GenerateMeshBVHWorker();
const bvh = await worker.generate(geometry, { maxLeafTris: 1 });

// 2. Create SDF Generator
const sdfGen = new ComputeSDFGenerator({
  resolution: 64,
  margin: 0.2
});

// 3. Generate SDF Texture
await sdfGen.generate(mesh, bvh, renderer);
const sdfTexture = sdfGen.sdfTexture;

Properties

.resolution : number

.margin : number

.threshold : number

.customBounds : THREE.Box3|null

.workgroupSize : THREE.Vector3

.sdfTexture :

Gets the generated SDF texture.

.boundsMatrix :

Gets the bounds transformation matrix (local to world).

.inverseBoundsMatrix :

Gets the inverse bounds matrix (world to local).

.bounds :

Gets the computed bounding box (includes margin).

.geometryBounds :

Gets the tight geometry bounding box (without margin). Useful for focused sampling in ComputeBVHSampler.

Methods

generate#

generate(geometry : THREE.BufferGeometry, bvh : *, renderer : THREE.WebGPURenderer) : Promise<THREE.Storage3DTexture>

Generates SDF texture from mesh and BVH.

Parameters
geometryTHREE.BufferGeometry
Source geometry
bvh*
BVH from three-mesh-bvh (with _roots array)
rendererTHREE.WebGPURenderer
WebGPU renderer
Returns
Promise<THREE.Storage3DTexture> — Generated SDF texture

update#

update(geometry : THREE.BufferGeometry, bvh : *, renderer : THREE.WebGPURenderer) : Promise<THREE.Storage3DTexture>

Updates SDF texture with potentially modified mesh/BVH. More efficient than full regeneration if structure hasn't changed.

Parameters
geometryTHREE.BufferGeometry
Source geometry
bvh*
BVH from three-mesh-bvh
rendererTHREE.WebGPURenderer
WebGPU renderer
Returns
Promise<THREE.Storage3DTexture> — Updated SDF texture

dispose#

dispose()

Disposes GPU resources.