angular-three-soba 4.1.1 → 4.2.1

package/fesm2022/angular-three-soba-misc.mjs

@@ -767,17 +767,26 @@ function objectScale(el, camera) {
  * @param el - The object to calculate z-index for
  * @param camera - The camera reference (must be Perspective or Orthographic)
  * @param zIndexRange - `[max, min]` range to map distance to
+ * @param logarithmicDepth - Computes the z-index logarithmicly to enable a wider camera range
  * @returns Calculated z-index, or `undefined` for unsupported camera types
  */
-function objectZIndex(el, camera, zIndexRange) {
+function objectZIndex(el, camera, zIndexRange, logarithmicDepth = false) {
     if (is.three(camera, 'isPerspectiveCamera') ||
         is.three(camera, 'isOrthographicCamera')) {
         const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
         const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
         const dist = objectPos.distanceTo(cameraPos);
-        const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
-        const B = zIndexRange[1] - A * camera.far;
-        return Math.round(A * dist + B);
+        if (logarithmicDepth) {
+            const safeNear = Math.max(camera.near, 1e-6);
+            const safeDist = Math.max(dist, 1e-6);
+            const depth = Math.log(safeDist / safeNear) / Math.log(camera.far / safeNear);
+            return Math.round(zIndexRange[0] + depth * (zIndexRange[1] - zIndexRange[0]));
+        }
+        else {
+            const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
+            const B = zIndexRange[1] - A * camera.far;
+            return Math.round(A * dist + B);
+        }
     }
     return undefined;
 }
@@ -987,7 +996,7 @@ class NgtsHTMLContent extends NgtHTML {
         let oldZoom = 0;
         let oldPosition = [0, 0];
         beforeRender(({ camera: rootCamera }) => {
-            const [hostEl, transformOuterEl, transformInnerEl, group, occlusionMesh, occlusionGeometry, isRaycastOcclusion, { camera, size, viewport, raycaster, scene }, { calculatePosition, eps, zIndexRange, sprite, distanceFactor }, { transform, occlude, scale },] = [
+            const [hostEl, transformOuterEl, transformInnerEl, group, occlusionMesh, occlusionGeometry, isRaycastOcclusion, { camera, size, viewport, raycaster, scene }, { calculatePosition, eps, zIndexRange, logarithmicDepth, sprite, distanceFactor }, { transform, occlude, scale },] = [
                 this.host.nativeElement,
                 this.transformOuterRef()?.nativeElement,
                 this.transformInnerRef()?.nativeElement,
@@ -1058,7 +1067,7 @@ class NgtsHTMLContent extends NgtHTML {
                             ? [zIndexRange[0], halfRange]
                             : [halfRange - 1, 0]
                         : zIndexRange;
-                    renderer.setStyle(hostEl, 'z-index', `${objectZIndex(group, camera, zRange)}`);
+                    renderer.setStyle(hostEl, 'z-index', `${objectZIndex(group, camera, zRange, logarithmicDepth)}`);
                     if (transform) {
                         const [widthHalf, heightHalf] = [size.width / 2, size.height / 2];
                         const fov = camera.projectionMatrix.elements[5] * heightHalf;