THREE.JS / FOUNDATIONS 278

Make every point earn its pixels.

One Sprite carries a field of camera-facing points. WebGPU computes each instance’s width in a storage buffer, while the direct WebGL2 path keeps the same visual contract in a labeled vertex-shader reference.

Initializing-

Creating the instanced position, color, and width buffers.

backend: -
material: -
compute: -
storage: -

Shape the point fieldinstanceIndex -> width -> sprite

renderer target point count minimum width 6 px maximum width 20 px pulse speed 6.0

alpha-to-coverage pause pulse

Instance datawaiting

positions: -
colors: -
indices: -
active: -
min/max: -
coverage: -

Position and color attributes stay per-instance; the width lane is the writable compute result.

Material contractwaiting

object: -
material: -
position: -
size: -
opacity: -
alpha: -

WebGPU uses a PointsNodeMaterial on Sprite; WebGL2 draws the same field with a direct shader.

Backend boundarywaiting

WebGPU: -
WebGL2: -
fallback: -
compute: -
draw calls: -
resources: -

WebGPU supports wide points through instanced sprites; the fallback intentionally exposes CPU/shader ownership instead of claiming compute parity.

IndexinstanceIndex

One compute invocation owns one instance slot.

Writestorage

The computed width lands in a storage-instanced attribute.

ReadsizeNode

The sprite material reads the width without CPU expansion.

ShapeshapeCircle

Sprite fragments become round points with alpha coverage.

CompareGLSL fallback

The direct path keeps compatibility and ownership visible.

Point-field timingwaiting

rebuild ms: -
CPU avg: -
CPU p95: -
frames: -
updates: -
draw calls: -

Change the point count or pulse policy, then measure the active submission path over thirty frames.

position/colorinstanceIndexstorage widthsizeNodesprite

This is a deterministic adaptation of the official instanced-points example: a generated Hilbert-like curve replaces the external scene, while PointsNodeMaterial, Sprite.count, per-instance attributes, storage-buffer compute, and the direct fallback remain executable.

Sources: official instanced-points example · PointsNodeMaterial · StorageBufferNode · Sprite