PointsMaterial

• sizeAttenuation false fixes point size in screen pixels regardless of depth.
• A radial-gradient map turns square points into soft round dots.
• alphaTest above 0 discards transparent texels and can remove sorting artifacts.

function makeDotTexture(size) {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;

  const ctx = canvas.getContext('2d');
  const r = size / 2;
  const gradient = ctx.createRadialGradient(r, r, 0, r, r, r);
  gradient.addColorStop(0, 'rgba(255,255,255,1)');
  gradient.addColorStop(0.6, 'rgba(255,255,255,0.9)');
  gradient.addColorStop(1, 'rgba(255,255,255,0)');

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, size, size);

  const texture = new THREE.CanvasTexture(canvas);
  texture.colorSpace = THREE.SRGBColorSpace;
  return texture;
}

const material = new THREE.PointsMaterial({
  size: 6,
  sizeAttenuation: false,
  map: makeDotTexture(64),
  vertexColors: true,
  transparent: true,
  depthWrite: false,
  alphaTest: 0.02
});

const cloud = new THREE.Points(geometry, material);

• AdditiveBlending saturates to white where many points overlap, destroying density cues.
• Transparent points with depthWrite true hide points behind them unpredictably.