Hey Joe, great question—let's break down how to efficiently figure out which points in your THREE.Points grid are visible to the camera, especially with that merged default mesh sitting on top. Your initial raycasting idea makes sense, but we can optimize it a ton to avoid performance hits when dealing with large point sets.

First: Ditch full raycasting for every point (it's too slow) #

If your point grid has thousands of points, casting a ray for each one every frame will kill performance. Instead, we'll split the problem into two faster steps: frustum culling (filtering points that are definitely outside the camera's view) followed by occlusion testing (checking if remaining points are blocked by your merged mesh).

Step 1: Frustum Culling (Quickly filter out off-screen points)

Three.js has a built-in THREE.Frustum class that lets you check if a point lies within the camera's field of view. This is a super fast check and will eliminate most points immediately.

// Get the camera's frustum
const frustum = new THREE.Frustum();
frustum.setFromProjectionMatrix(
  new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse)
);

// Grab your points geometry and position data
const pointsGeo = yourPointsMesh.geometry;
const positions = pointsGeo.attributes.position.array;
const candidatePoints = [];

// Loop through all points
for (let i = 0; i < positions.length; i += 3) {
  const point = new THREE.Vector3(
    positions[i],
    positions[i + 1],
    positions[i + 2]
  );
  
  // Only keep points inside the camera's view
  if (frustum.containsPoint(point)) {
    candidatePoints.push(point.clone());
  }
}

Step 2: Occlusion Testing (Check if remaining points are blocked)

Now we only need to test the points that are in the camera's view. We'll use raycasting here, but with a key optimization: set the ray's far distance to the exact distance between the camera and the point, so we only check for objects that lie between the camera and the point (i.e., your merged mesh).

const raycaster = new THREE.Raycaster();
const cameraPos = camera.position;
const occlusionMesh = yourMergedDefaultMesh; // Your merged model
const visiblePoints = [];

for (let i = 0; i < candidatePoints.length; i++) {
  const point = candidatePoints[i];
  
  // Set ray from camera to the point
  raycaster.set(cameraPos, point.clone().sub(cameraPos).normalize());
  // Limit ray distance to camera -> point (ignore objects behind the point)
  raycaster.far = cameraPos.distanceTo(point);
  
  // Check for intersection with the merged mesh
  const intersects = raycaster.intersectObject(occlusionMesh);
  
  // If no intersection, the point is visible!
  if (intersects.length === 0) {
    visiblePoints.push(point);
  } else {
    // Point is blocked by the mesh, skip it
    candidatePoints.splice(i, 1);
    i--; // Adjust index after removal
  }
}

Even Faster Alternative: Use the Depth Buffer (GPU-Accelerated) #

If you have a massive number of points (10k+), the above method might still be too slow. For these cases, we can leverage the GPU's depth buffer to check visibility in bulk:

1. Render your scene (including the merged mesh) to a depth texture.
2. Convert each point to screen coordinates, then compare its depth to the depth buffer value at that screen position. If the point's depth is less than or equal to the buffer's depth, it's visible (not blocked).

Here's a simplified example:

// Configure renderer to capture depth
renderer.autoClear = false;
const depthTexture = new THREE.DepthTexture();
depthTexture.type = THREE.UnsignedIntType;

const framebuffer = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
  depthTexture: depthTexture,
  depthBuffer: true
});

// Render scene to the depth framebuffer
renderer.setRenderTarget(framebuffer);
renderer.render(scene, camera);
renderer.setRenderTarget(null);

// Read depth data from the buffer
const depthData = new Uint32Array(window.innerWidth * window.innerHeight);
renderer.readRenderTargetPixels(framebuffer, 0, 0, window.innerWidth, window.innerHeight, depthData);

// Check each point against the depth buffer
const visiblePoints = [];
const tempVec = new THREE.Vector3();
const screenVec = new THREE.Vector2();

for (let i = 0; i < positions.length; i += 3) {
  tempVec.set(positions[i], positions[i+1], positions[i+2]);
  // Convert point to screen coordinates
  tempVec.project(camera);
  screenVec.x = (tempVec.x + 1) / 2 * window.innerWidth;
  screenVec.y = (1 - tempVec.y) / 2 * window.innerHeight;

  // Skip points outside the screen
  if (screenVec.x < 0 || screenVec.x >= window.innerWidth || screenVec.y < 0 || screenVec.y >= window.innerHeight) continue;

  // Get buffer depth (convert from uint32 to 0-1 range)
  const bufferIndex = Math.floor(screenVec.y) * window.innerWidth + Math.floor(screenVec.x);
  const bufferDepth = depthData[bufferIndex] / 0xffffffff;

  // Get point's depth (convert NDC z to 0-1 range)
  const pointDepth = (tempVec.z + 1) / 2;

  // Allow a tiny offset to handle depth precision issues
  if (pointDepth <= bufferDepth + 0.001) {
    visiblePoints.push(tempVec.clone());
  }
}

// Reset renderer settings
renderer.autoClear = true;

Quick Optimization Tips #

• Spatial Partitioning: Split your point grid into chunks (like an octree or grid-based groups) so you only test chunks that are near the camera's view.
• Static Points: If your point grid doesn't move, precompute spatial groups once instead of every frame.
• Raycaster Reuse: Don't create a new Raycaster every frame—reuse the same instance to avoid garbage collection.

内容的提问来源于stack exchange，提问作者Joe Morgan