how to find rectangles of empty space on screen

[torn mango]

im looking to do somthing like this https://cs.stackexchange.com/questions/123464/what-is-an-algorithm-to-find-the-largest-rectangle-of-white-space-in-an-image
with the picking scene that i am using for GPU picking like at the end of the page here (mine in comment too long)https://mediawing.jp/js/three.js/manual/en/picking.html
do you know any similar examples ? can you read a section of screen with https://threejs.org/docs/#api/en/renderers/WebGLRenderer.readRenderTargetPixels
the background color i am searching for squares of can be emissive: new THREE.Color(0),// id = 0
this is how other objects are added:

    let PickerMesh =  child.clone() // create cloan for invisable picking scene
    PickerMesh.material = new THREE.MeshPhongMaterial({  //give it a special mesh that works as an ID not a real colour
      emissive: new THREE.Color(4), color: new THREE.Color(0, 0, 0), specular: new THREE.Color(0, 0, 0),
      side: THREE.DoubleSide, alphaTest: 0.5, blending: THREE.NoBlending,
    });
    this._pickingScene.add(PickerMesh); ```

class GPUPickHelper {

  constructor() {    // create a 1x1 pixel render target
    this.pickingTexture = new THREE.WebGLRenderTarget(1, 1);
    this.pixelBuffer = new Uint8Array(4);
    this.pickedObject = null;
    this.pickedObjectSavedColor = 0;
  }

  pick(renderer, idToObject, point, scene, camera, time) {

    const {pickingTexture, pixelBuffer} = this;

    // set the view offset to represent just a single pixel under the mouse
    const pixelRatio = renderer.getPixelRatio();
    camera.setViewOffset(
        renderer.getContext().drawingBufferWidth,   // full width
        renderer.getContext().drawingBufferHeight,  // full top
        point.x * pixelRatio | 0,             // rect x
        point.y * pixelRatio | 0,             // rect y
        1,                            // rect width   
        1,                           // rect height 
    );

    // render the scene
    renderer.setRenderTarget(pickingTexture)
    renderer.render(scene, camera);
    renderer.setRenderTarget(null);

    camera.clearViewOffset(); // clear the view offset so rendering returns to normal
    renderer.readRenderTargetPixels(pickingTexture, 0, 0, 1, 1, pixelBuffer); //read the pixel

    const id =
        (pixelBuffer[0] << 16) |
        (pixelBuffer[1] <<  8) |
        (pixelBuffer[2]      );

    this._intersectedObject = idToObject[id];

  }
}

[frozen anvil]

is there a particular reason why you need picking in the first place? it's imo a bad practice and complicates matters infinitely.

people used to do it for performance reasons, if you had to deal with thousands of complicated meshes, where cpu raycast would go down, but ever since https://github.com/gkjohnson/three-mesh-bvh this isn't an issue no longer.