itowns 2.45.1-next.0 → 2.45.1-next.1

package/lib/Core/Label.js

@@ -0,0 +1,222 @@
+import * as THREE from 'three';
+import DEMUtils from "../Utils/DEMUtils.js";
+import { Coordinates } from '@itowns/geographic';
+const coord = new Coordinates('EPSG:4326');
+let rect;
+
+// set it once
+let STYLE_TRANSFORM = '';
+if (document.documentElement.style.transform !== undefined) {
+  STYLE_TRANSFORM = 'transform';
+} else if (document.documentElement.style.webkitTransform !== undefined) {
+  STYLE_TRANSFORM = 'webkitTransform';
+} else if (document.documentElement.style.mozTransform !== undefined) {
+  STYLE_TRANSFORM = 'mozTransform';
+} else if (document.documentElement.style.oTransform !== undefined) {
+  STYLE_TRANSFORM = 'oTransform';
+} else {
+  STYLE_TRANSFORM = 'transform';
+}
+
+/**
+ * An object that handles the display of a text and/or an icon, linked to a 3D
+ * position. The content of the `Label` is managed through a DOM object, in a
+ * `<div>` handled by the `Label2DRenderer`.
+ *
+ * @property {boolean} isLabel - Used to checkout whether this object is a
+ * Label. Default is true. You should not change this, as it is used internally
+ * for optimisation.
+ * @property {Element} content - The DOM object that contains the content of the
+ * label. The style and the position are applied on this object. All labels
+ * contain the `itowns-label` class, as well as a specific class related to the
+ * layer linked to it: `itowns-label-[layer-id]` (replace `[layer-id]` by the
+ * correct string).
+ * @property {THREE.Vector3} position - The position in the 3D world of the
+ * label.
+ * @property {number} padding - sets the padding area on all four sides of an element at once.
+ * @property {Coordinates} coordinates - The coordinates of the label.
+ * @property {number} order - Order of the label that will be read from the
+ * style. It helps sorting and prioritizing a Label during render.
+ */
+class Label extends THREE.Object3D {
+  /**
+   * @param {Element|string} content - The content; can be a
+   * string, with or without HTML tags in it, or it can be an Element.
+   * @param {Coordinates} coordinates - The world coordinates, where to place
+   * the Label.
+   * @param {Style} style - The style to apply to the content. Once the style
+   * is applied, it cannot be changed directly. However, if it really needed,
+   * it can be accessed through `label.content.style`, but it is highly
+   * discouraged to do so.
+   */
+  constructor() {
+    let content = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let coordinates = arguments.length > 1 ? arguments[1] : undefined;
+    let style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (coordinates == undefined) {
+      throw new Error('coordinates are mandatory to add a Label');
+    }
+    if (arguments.length > 3) {
+      console.warn('Deprecated argument sprites in Label constructor. Sprites must be configured in style argument.');
+    }
+    super();
+    let _visible = this.visible;
+    // can't do an ES6 setter/getter here
+    Object.defineProperty(this, 'visible', {
+      set(v) {
+        if (v != _visible) {
+          // avoid changing the style
+          _visible = v;
+          this.content.style.display = v ? 'block' : 'none';
+          // TODO: add smooth transition for fade in/out
+        }
+      },
+      get() {
+        return _visible;
+      }
+    });
+    this.isLabel = true;
+    this.coordinates = coordinates;
+    this.projectedPosition = {
+      x: 0,
+      y: 0
+    };
+    this.boundaries = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    };
+    if (typeof content === 'string') {
+      this.content = document.createElement('div');
+      this.content.textContent = style.text.field;
+    } else {
+      this.content = content.cloneNode(true);
+    }
+    this.content.classList.add('itowns-label');
+    this.content.style.userSelect = 'none';
+    this.content.style.position = 'absolute';
+    if (style.isStyle) {
+      this.anchor = style.getTextAnchorPosition();
+      this.styleOffset = style.text.offset;
+      if (typeof content === 'string') {
+        if (style.text.haloWidth > 0) {
+          this.content.classList.add('itowns-stroke-single');
+        }
+        style.applyToHTML(this.content).then(icon => {
+          if (icon) {
+            // Not sure if that test is needed...
+            this.icon = icon;
+          }
+        });
+      }
+    } else {
+      this.anchor = [0, 0];
+      this.styleOffset = [0, 0];
+    }
+    this.iconOffset = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    };
+    this.zoom = {
+      min: style.zoom && style.zoom.min != undefined ? style.zoom.min : 2,
+      max: style.zoom && style.zoom.max != undefined ? style.zoom.max : 24
+    };
+    this.order = style.order || 0;
+    // Padding value, to avoid labels being too close to each other.
+    this.padding = 2;
+  }
+
+  /**
+   * Moves a label on the screen, using screen coordinates. It updates the
+   * boundaries as it moves it.
+   *
+   * @param {number} x - X coordinates in pixels, from left.
+   * @param {number} y - Y coordinates in pixels, from top.
+   */
+  updateProjectedPosition(x, y) {
+    const X = Math.round(x);
+    const Y = Math.round(y);
+    if (X != this.projectedPosition.x || Y != this.projectedPosition.y) {
+      this.projectedPosition.x = X;
+      this.projectedPosition.y = Y;
+      this.boundaries.left = x + this.offset.left - this.padding;
+      this.boundaries.right = x + this.offset.right + this.padding;
+      this.boundaries.top = y + this.offset.top - this.padding;
+      this.boundaries.bottom = y + this.offset.bottom + this.padding;
+
+      // The boundaries of the label are the union of the boundaries of the text
+      // and the boundaries of the icon, if it exists.
+      // Checking if this.icon is not only zeros is mandatory, to prevent case
+      // when a boundary is set to x or y coordinate
+      if (this.iconOffset.left !== 0 || this.iconOffset.right !== 0 || this.iconOffset.top !== 0 || this.iconOffset.bottom !== 0) {
+        this.boundaries.left = Math.min(this.boundaries.left, x + this.iconOffset.left);
+        this.boundaries.right = Math.max(this.boundaries.right, x + this.iconOffset.right);
+        this.boundaries.top = Math.min(this.boundaries.top, y + this.iconOffset.top);
+        this.boundaries.bottom = Math.max(this.boundaries.bottom, y + this.iconOffset.bottom);
+      }
+    }
+  }
+  updateCSSPosition() {
+    // translate all content according to its given anchor
+    this.content.style[STYLE_TRANSFORM] = `translate(${this.projectedPosition.x + this.offset.left}px, ${this.projectedPosition.y + this.offset.top}px)`;
+
+    // translate possible icon inside content to cancel anchoring on it, so that it can later be positioned
+    // according to its own anchor
+    if (this.icon) {
+      this.icon.style[STYLE_TRANSFORM] = `translate(${-this.offset.left}px, ${-this.offset.top}px)`;
+    }
+  }
+
+  /**
+   * Updates the screen dimensions of the label, using
+   * `getBoundingClientRect`.  It updates `width` and `height` property of the
+   * label, and the boundaries.
+   */
+  initDimensions() {
+    if (!this.offset) {
+      rect = this.content.getBoundingClientRect();
+      const width = Math.round(rect.width);
+      const height = Math.round(rect.height);
+      this.offset = {
+        left: width * this.anchor[0] + this.styleOffset[0],
+        top: height * this.anchor[1] + this.styleOffset[1]
+      };
+      this.offset.right = this.offset.left + width;
+      this.offset.bottom = this.offset.top + height;
+      if (this.icon) {
+        rect = this.icon.getBoundingClientRect();
+        this.iconOffset = {
+          left: Math.floor(rect.x),
+          top: Math.floor(rect.y),
+          right: Math.ceil(rect.x + rect.width),
+          bottom: Math.ceil(rect.y + rect.height)
+        };
+      }
+    }
+  }
+  update3dPosition(crs) {
+    this.coordinates.as(crs, coord).toVector3(this.position);
+    this.updateMatrixWorld();
+  }
+  updateElevationFromLayer(layer, nodes) {
+    if (layer.attachedLayers.filter(l => l.isElevationLayer).length == 0) {
+      return;
+    }
+    let elevation = Math.max(0, DEMUtils.getElevationValueAt(layer, this.coordinates, DEMUtils.FAST_READ_Z, nodes));
+    if (isNaN(elevation)) {
+      elevation = Math.max(0, DEMUtils.getElevationValueAt(layer, this.coordinates, DEMUtils.FAST_READ_Z));
+    }
+    if (!isNaN(elevation) && elevation != this.coordinates.z) {
+      this.coordinates.z = elevation;
+    }
+  }
+  updateHorizonCullingPoint() {
+    if (this.horizonCullingPoint) {
+      this.getWorldPosition(this.horizonCullingPoint);
+    }
+  }
+}
+export default Label;

package/lib/Core/MainLoop.js

@@ -0,0 +1,209 @@
+import { EventDispatcher } from 'three';
+export const RENDERING_PAUSED = 0;
+export const RENDERING_SCHEDULED = 1;
+
+/**
+ * MainLoop's update events list that are fired using
+ * {@link View#execFrameRequesters}.
+ *
+ * @property UPDATE_START {string} fired at the start of the update
+ * @property BEFORE_CAMERA_UPDATE {string} fired before the camera update
+ * @property AFTER_CAMERA_UPDATE {string} fired after the camera update
+ * @property BEFORE_LAYER_UPDATE {string} fired before the layer update
+ * @property AFTER_LAYER_UPDATE {string} fired after the layer update
+ * @property BEFORE_RENDER {string} fired before the render
+ * @property AFTER_RENDER {string} fired after the render
+ * @property UPDATE_END {string} fired at the end of the update
+ */
+
+export const MAIN_LOOP_EVENTS = {
+  UPDATE_START: 'update_start',
+  BEFORE_CAMERA_UPDATE: 'before_camera_update',
+  AFTER_CAMERA_UPDATE: 'after_camera_update',
+  BEFORE_LAYER_UPDATE: 'before_layer_update',
+  AFTER_LAYER_UPDATE: 'after_layer_update',
+  BEFORE_RENDER: 'before_render',
+  AFTER_RENDER: 'after_render',
+  UPDATE_END: 'update_end'
+};
+function updateElements(context, geometryLayer, elements) {
+  if (!elements) {
+    return;
+  }
+  for (const element of elements) {
+    // update element
+    // TODO find a way to notify attachedLayers when geometryLayer deletes some elements
+    // and then update Debug.js:addGeometryLayerDebugFeatures
+    const newElementsToUpdate = geometryLayer.update(context, geometryLayer, element);
+    const sub = geometryLayer.getObjectToUpdateForAttachedLayers(element);
+    if (sub) {
+      if (sub.element) {
+        // update attached layers
+        for (const attachedLayer of geometryLayer.attachedLayers) {
+          if (attachedLayer.ready) {
+            attachedLayer.update(context, attachedLayer, sub.element, sub.parent);
+          }
+        }
+      } else if (sub.elements) {
+        for (let i = 0; i < sub.elements.length; i++) {
+          if (!sub.elements[i].isObject3D) {
+            throw new Error(`
+                            Invalid object for attached layer to update.
+                            Must be a THREE.Object and have a THREE.Material`);
+          }
+          // update attached layers
+          for (const attachedLayer of geometryLayer.attachedLayers) {
+            if (attachedLayer.ready) {
+              attachedLayer.update(context, attachedLayer, sub.elements[i], sub.parent);
+            }
+          }
+        }
+      }
+    }
+    updateElements(context, geometryLayer, newElementsToUpdate);
+  }
+}
+function filterChangeSources(updateSources, geometryLayer) {
+  let fullUpdate = false;
+  const filtered = new Set();
+  updateSources.forEach(src => {
+    if (src === geometryLayer || src.isCamera) {
+      geometryLayer.info.clear();
+      fullUpdate = true;
+    } else if (src.layer === geometryLayer) {
+      filtered.add(src);
+    }
+  });
+  return fullUpdate ? new Set([geometryLayer]) : filtered;
+}
+class MainLoop extends EventDispatcher {
+  #needsRedraw = false;
+  #updateLoopRestarted = true;
+  #lastTimestamp = 0;
+  constructor(scheduler, engine) {
+    super();
+    this.renderingState = RENDERING_PAUSED;
+    this.scheduler = scheduler;
+    this.gfxEngine = engine; // TODO: remove me
+  }
+  scheduleViewUpdate(view, forceRedraw) {
+    this.#needsRedraw |= forceRedraw;
+    if (this.renderingState !== RENDERING_SCHEDULED) {
+      this.renderingState = RENDERING_SCHEDULED;
+      // TODO Fix asynchronization between xr and MainLoop render loops.
+      // WebGLRenderer#setAnimationLoop must be used for WebXR projects.
+      // (see WebXR#initializeWebXR).
+      if (!this.gfxEngine.renderer.xr.isPresenting) {
+        requestAnimationFrame(timestamp => {
+          this.step(view, timestamp);
+        });
+      }
+    }
+  }
+  #update(view, updateSources, dt) {
+    const context = {
+      camera: view.camera,
+      engine: this.gfxEngine,
+      scheduler: this.scheduler,
+      view
+    };
+
+    // replace layer with their parent where needed
+    updateSources.forEach(src => {
+      const layer = src.layer || src;
+      if (layer.isLayer && layer.parent) {
+        updateSources.add(layer.parent);
+      }
+    });
+    for (const geometryLayer of view.getLayers((x, y) => !y)) {
+      context.geometryLayer = geometryLayer;
+      if (geometryLayer.ready && geometryLayer.visible && !geometryLayer.frozen) {
+        view.execFrameRequesters(MAIN_LOOP_EVENTS.BEFORE_LAYER_UPDATE, dt, this.#updateLoopRestarted, geometryLayer);
+
+        // Filter updateSources that are relevant for the geometryLayer
+        const srcs = filterChangeSources(updateSources, geometryLayer);
+        if (srcs.size > 0) {
+          // pre update attached layer
+          for (const attachedLayer of geometryLayer.attachedLayers) {
+            if (attachedLayer.ready && attachedLayer.preUpdate) {
+              attachedLayer.preUpdate(context, srcs);
+            }
+          }
+          // `preUpdate` returns an array of elements to update
+          const elementsToUpdate = geometryLayer.preUpdate(context, srcs);
+          // `update` is called in `updateElements`.
+          updateElements(context, geometryLayer, elementsToUpdate);
+          // `postUpdate` is called when this geom layer update process is finished
+          geometryLayer.postUpdate(context, geometryLayer, updateSources);
+        }
+
+        // Clear the cache of expired resources
+
+        view.execFrameRequesters(MAIN_LOOP_EVENTS.AFTER_LAYER_UPDATE, dt, this.#updateLoopRestarted, geometryLayer);
+      }
+    }
+  }
+  step(view, timestamp) {
+    const dt = timestamp - this.#lastTimestamp;
+    view._executeFrameRequestersRemovals();
+    view.execFrameRequesters(MAIN_LOOP_EVENTS.UPDATE_START, dt, this.#updateLoopRestarted);
+    const willRedraw = this.#needsRedraw;
+    this.#lastTimestamp = timestamp;
+
+    // Reset internal state before calling _update (so future calls to View.notifyChange()
+    // can properly change it)
+    this.#needsRedraw = false;
+    this.renderingState = RENDERING_PAUSED;
+    const updateSources = new Set(view._changeSources);
+    view._changeSources.clear();
+
+    // update camera
+    const dim = this.gfxEngine.getWindowSize();
+    view.execFrameRequesters(MAIN_LOOP_EVENTS.BEFORE_CAMERA_UPDATE, dt, this.#updateLoopRestarted);
+    view.camera.update(dim.x, dim.y);
+    view.execFrameRequesters(MAIN_LOOP_EVENTS.AFTER_CAMERA_UPDATE, dt, this.#updateLoopRestarted);
+
+    // Disable camera's matrix auto update to make sure the camera's
+    // world matrix is never updated mid-update.
+    // Otherwise inconsistencies can appear because object visibility
+    // testing and object drawing could be performed using different
+    // camera matrixWorld.
+    // Note: this is required at least because WEBGLRenderer calls
+    // camera.updateMatrixWorld()
+    const oldAutoUpdate = view.camera3D.matrixAutoUpdate;
+    view.camera3D.matrixAutoUpdate = false;
+
+    // update data-structure
+    this.#update(view, updateSources, dt);
+    if (this.scheduler.commandsWaitingExecutionCount() == 0) {
+      this.dispatchEvent({
+        type: 'command-queue-empty'
+      });
+    }
+
+    // Redraw *only* if needed.
+    // (redraws only happen when this.#needsRedraw is true, which in turn only happens when
+    // view.notifyChange() is called with redraw=true)
+    // As such there's no continuous update-loop, instead we use a ad-hoc update/render
+    // mechanism.
+    if (willRedraw) {
+      this.#renderView(view, dt);
+    }
+
+    // next time, we'll consider that we've just started the loop if we are still PAUSED now
+    this.#updateLoopRestarted = this.renderingState === RENDERING_PAUSED;
+    view.camera3D.matrixAutoUpdate = oldAutoUpdate;
+    view.execFrameRequesters(MAIN_LOOP_EVENTS.UPDATE_END, dt, this.#updateLoopRestarted);
+  }
+  #renderView(view, dt) {
+    view.execFrameRequesters(MAIN_LOOP_EVENTS.BEFORE_RENDER, dt, this.#updateLoopRestarted);
+    if (view.render) {
+      view.render();
+    } else {
+      // use default rendering method
+      this.gfxEngine.renderView(view);
+    }
+    view.execFrameRequesters(MAIN_LOOP_EVENTS.AFTER_RENDER, dt, this.#updateLoopRestarted);
+  }
+}
+export default MainLoop;

package/lib/Core/Picking.js

@@ -0,0 +1,255 @@
+import * as THREE from 'three';
+import RenderMode from "../Renderer/RenderMode.js";
+import { unpack1K } from "../Renderer/LayeredMaterial.js";
+import { Coordinates } from '@itowns/geographic';
+const depthRGBA = new THREE.Vector4();
+// TileMesh picking support function
+function screenCoordsToNodeId(view, tileLayer, viewCoords) {
+  let radius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  const dim = view.mainLoop.gfxEngine.getWindowSize();
+  viewCoords = viewCoords || new THREE.Vector2(Math.floor(dim.x / 2), Math.floor(dim.y / 2));
+  const restore = tileLayer.level0Nodes.map(n => RenderMode.push(n, RenderMode.MODES.ID));
+  const buffer = view.mainLoop.gfxEngine.renderViewToBuffer({
+    camera: view.camera,
+    scene: tileLayer.object3d
+  }, {
+    x: viewCoords.x - radius,
+    y: viewCoords.y - radius,
+    width: 1 + radius * 2,
+    height: 1 + radius * 2
+  });
+  restore.forEach(r => r());
+  const ids = [];
+  traversePickingCircle(radius, (x, y) => {
+    const idx = (y * 2 * radius + x) * 4;
+    const data = buffer.slice(idx, idx + 4 || undefined);
+    depthRGBA.fromArray(data).divideScalar(255.0);
+    const unpack = unpack1K(depthRGBA, 256 ** 3);
+    const _id = Math.round(unpack);
+    if (!ids.includes(_id)) {
+      ids.push(_id);
+    }
+  });
+  return ids;
+}
+function traversePickingCircle(radius, callback) {
+  // iterate on radius so we get closer to the mouse
+  // results first.
+  // Result traversal order for radius=2
+  // --3--
+  // -323-
+  // 32123
+  // -323
+  // --3--
+  let prevSq;
+  for (let r = 0; r <= radius; r++) {
+    const sq = r * r;
+    for (let x = -r; x <= r; x++) {
+      const sqx = x * x;
+      for (let y = -r; y <= r; y++) {
+        const dist = sqx + y * y;
+        // skip if too far
+        if (dist > sq) {
+          continue;
+        }
+        // skip if belongs to previous
+        if (dist <= prevSq) {
+          continue;
+        }
+        if (callback(x, y) === false) {
+          return;
+        }
+      }
+    }
+    prevSq = sq;
+  }
+}
+function findLayerInParent(obj) {
+  if (obj.layer) {
+    return obj.layer;
+  }
+  if (obj.parent) {
+    return findLayerInParent(obj.parent);
+  }
+}
+const raycaster = new THREE.Raycaster();
+const normalized = new THREE.Vector2();
+const pointPos = new THREE.Vector3();
+const pointPosCoord = new Coordinates('EPSG:4978'); // default crs, will be set to view crs when used
+const cameraPos = new THREE.Vector3();
+const cameraPosCoord = new Coordinates('EPSG:4978'); // default crs, will be set to view crs when used
+
+/**
+ * @module Picking
+ *
+ * Implement various picking methods for geometry layers.
+ * These methods are not meant to be used directly, see View.pickObjectsAt
+ * instead.
+ *
+ * All the methods here takes the same parameters:
+ *   - the View instance
+ *   - view coordinates (in pixels) where picking should be done
+ *   - radius (in pixels) of the picking circle
+ *   - layer: the geometry layer used for picking
+ */
+export default {
+  pickTilesAt(view, viewCoords, radius, layer) {
+    let results = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+    const _ids = screenCoordsToNodeId(view, layer, viewCoords, radius);
+    const extractResult = node => {
+      if (_ids.includes(node.id) && node.isTileMesh) {
+        results.push({
+          object: node,
+          layer
+        });
+      }
+    };
+    for (const n of layer.level0Nodes) {
+      n.traverse(extractResult);
+    }
+    return results;
+  },
+  pickPointsAt(view, viewCoords, radius, layer) {
+    let result = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+    if (!layer.root) {
+      return;
+    }
+
+    // enable picking mode for points material
+    layer.object3d.traverse(o => {
+      if (o.isPoints && o.baseId) {
+        o.material.enablePicking(true);
+      }
+    });
+
+    // render 1 pixel
+    // TODO: support more than 1 pixel selection
+    const buffer = view.mainLoop.gfxEngine.renderViewToBuffer({
+      camera: view.camera,
+      scene: layer.object3d
+    }, {
+      x: viewCoords.x - radius,
+      y: viewCoords.y - radius,
+      width: 1 + radius * 2,
+      height: 1 + radius * 2
+    });
+    const candidates = [];
+    traversePickingCircle(radius, (x, y) => {
+      const idx = (y * 2 * radius + x) * 4;
+      const data = buffer.slice(idx, idx + 4);
+
+      // see PotreeProvider and the construction of unique_id
+      const objId = data[0] << 8 | data[1];
+      const index = data[2] << 8 | data[3];
+      const r = {
+        objId,
+        index
+      };
+      for (let i = 0; i < candidates.length; i++) {
+        if (candidates[i].objId == r.objId && candidates[i].index == r.index) {
+          return;
+        }
+      }
+      candidates.push(r);
+    });
+    layer.object3d.traverse(o => {
+      if (o.isPoints && o.baseId) {
+        // disable picking mode
+        o.material.enablePicking(false);
+
+        // if baseId matches objId, the clicked point belongs to `o`
+        for (let i = 0; i < candidates.length; i++) {
+          if (candidates[i].objId == o.baseId) {
+            // Get point position: get the picked point from the buffer geometry and apply local to world
+            // transform of the picked object
+            pointPos.fromBufferAttribute(o.geometry.attributes.position, candidates[i].index);
+            o.localToWorld(pointPos);
+            // Compute distance to the camera
+            pointPosCoord.setCrs(view.referenceCrs);
+            pointPosCoord.setFromVector3(pointPos);
+            view.camera3D.getWorldPosition(cameraPos);
+            cameraPosCoord.setCrs(view.referenceCrs);
+            cameraPosCoord.setFromVector3(cameraPos);
+            const dist = pointPosCoord.spatialEuclideanDistanceTo(cameraPosCoord);
+            result.push({
+              object: o,
+              point: pointPos.clone(),
+              // the position of the point in the 3D view. Same name and value than what's returned by pickObjectsAt
+              index: candidates[i].index,
+              distance: dist,
+              layer
+            });
+          }
+        }
+      }
+    });
+    return result;
+  },
+  /*
+   * Default picking method. Uses THREE.Raycaster
+   */
+  pickObjectsAt(view, viewCoords, radius, object) {
+    let target = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+    // Raycaster use NDC coordinate
+    view.viewToNormalizedCoords(viewCoords, normalized);
+    if (radius < 0) {
+      raycaster.setFromCamera(normalized, view.camera3D);
+      const intersects = raycaster.intersectObject(object, true);
+      for (const inter of intersects) {
+        inter.layer = findLayerInParent(inter.object);
+        target.push(inter);
+      }
+      return target;
+    }
+    // Instead of doing N raycast (1 per x,y returned by traversePickingCircle),
+    // we force render the zone of interest.
+    // Then we'll only do raycasting for the pixels where something was drawn.
+    const zone = {
+      x: viewCoords.x - radius,
+      y: viewCoords.y - radius,
+      width: 1 + radius * 2,
+      height: 1 + radius * 2
+    };
+    const pixels = view.mainLoop.gfxEngine.renderViewToBuffer({
+      scene: object,
+      camera: view.camera
+    }, zone);
+    const clearColor = new THREE.Color();
+    view.mainLoop.gfxEngine.renderer.getClearColor(clearColor);
+    const clearR = Math.round(255 * clearColor.r);
+    const clearG = Math.round(255 * clearColor.g);
+    const clearB = Math.round(255 * clearColor.b);
+
+    // Raycaster use NDC coordinate
+    const tmp = normalized.clone();
+    traversePickingCircle(radius, (x, y) => {
+      // x, y are offset from the center of the picking circle,
+      // and pixels is a square where 0, 0 is the top-left corner.
+      // So we need to shift x,y by radius.
+
+      const offset = ((y + radius) * (radius * 2 + 1) + (x + radius)) * 4;
+      const r = pixels[offset];
+      const g = pixels[offset + 1];
+      const b = pixels[offset + 2];
+      // Use approx. test to avoid rounding error or to behave
+      // differently depending on hardware rounding mode.
+      if (Math.abs(clearR - r) <= 1 && Math.abs(clearG - g) <= 1 && Math.abs(clearB - b) <= 1) {
+        // skip because nothing has been rendered here
+        return;
+      }
+
+      // Perform raycasting
+      tmp.setX(normalized.x + x / view.camera.width).setY(normalized.y + y / view.camera.height);
+      raycaster.setFromCamera(tmp, view.camera3D);
+      const intersects = raycaster.intersectObject(object, true);
+      for (const inter of intersects) {
+        inter.layer = findLayerInParent(inter.object);
+        target.push(inter);
+      }
+
+      // Stop at first hit
+      return target.length == 0;
+    });
+    return target;
+  }
+};