Three.js Blocks

Home
Documentation
Examples
Tools

ComputePointsSDFGenerator

@three-blocks/coreWebGPUPointCloud
new ComputePointsSDFGenerator(options : Object)

GPU-accelerated SDF (Signed Distance Field) generator for point clouds using PointsBVH.

Overview Generates a 3D texture containing distances from a point cloud surface. Uses PointsBVH (from three-mesh-bvh) for O(log N) nearest-point queries. The "surface" is defined by a shell radius around each point.

Features

  • Fast Generation: Uses compute shaders to generate SDFs in parallel.
  • PointsBVH Acceleration: Leverages three-mesh-bvh PointsBVH for efficient queries.
  • Shell Radius: Defines surface thickness around points (auto-computed or user-specified).
  • Auto Shell Radius: Estimates optimal radius from point cloud density.

Usage The generated 3D texture can be used for:

  • Volume Rendering: Raymarching point cloud isosurfaces.
  • Collision Detection: GPU-based particle collisions.
  • VFX: Distance-based effects around point cloud surfaces.
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 point cloud bounds to capture the field.
    Default is 0.2.
  • thresholdoptionalnumber
    Distance threshold (bias) applied to the SDF.
    Default is 0.0.
  • shellRadiusoptionalnumber | 'auto'
    Surface thickness around points. 'auto' estimates from point density.
    Default is 'auto'.
  • 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 { PointsBVH } from 'three-mesh-bvh';
import { ComputePointsSDFGenerator } from '@three-blocks/core';

// 1. Build PointsBVH
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.computeBoundsTree({ type: PointsBVH });

// 2. Create SDF Generator
const sdfGen = new ComputePointsSDFGenerator({
  resolution: 64,
  margin: 0.2,
  shellRadius: 'auto' // or specific value like 0.05
});

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

Properties

.resolution : number

.margin : number

.threshold : number

.shellRadiusOption : number|'auto'

.customBounds : THREE.Box3|null

.workgroupSize : THREE.Vector3

.sdfTexture :

Gets the generated SDF texture.

.shellRadius :

Gets the computed shell radius.

.shellRadius :

Sets the shell radius (triggers regeneration on next generate call).

.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).

Methods

generate#

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

Generates SDF texture from point cloud geometry and PointsBVH.

Parameters
geometryTHREE.BufferGeometry
Source geometry with position attribute
bvhPointsBVH
PointsBVH from three-mesh-bvh
rendererTHREE.WebGPURenderer
WebGPU renderer
Returns
Promise<THREE.Storage3DTexture> — Generated SDF texture

update#

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

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

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

dispose#

dispose()

Disposes GPU resources.