New option to compute the z-index of HTML objects logarithmicly (#79)

* Implement logarithmic depth for z-index calculation

* Add the logarithmicDepth option to HtmlContent

Author: ericleib

libs/soba/misc/src/lib/html/html-content.ts

@@ -123,6 +123,12 @@ export interface NgtsHTMLContentOptions {
 	 * Defaults to the canvas container or `events.connected` element.
 	 */
 	parent?: HTMLElement | ElementRef<HTMLElement>;
+	/**
+	 * Computes z-index with a logarithmic scale, which prevents
+     * near objects from all having the same z-index when
+     * camera.far is very large.
+	 */
+	logarithmicDepth?: boolean;
 }
 
 const defaultHtmlContentOptions: NgtsHTMLContentOptions = {
@@ -354,7 +360,7 @@ export class NgtsHTMLContent extends NgtHTML {
 				occlusionGeometry,
 				isRaycastOcclusion,
 				{ camera, size, viewport, raycaster, scene },
-				{ calculatePosition, eps, zIndexRange, sprite, distanceFactor },
+				{ calculatePosition, eps, zIndexRange, logarithmicDepth, sprite, distanceFactor },
 				{ transform, occlude, scale },
 			] = [
 				this.host.nativeElement,
@@ -432,7 +438,7 @@ export class NgtsHTMLContent extends NgtHTML {
 							: [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];

libs/soba/misc/src/lib/html/utils.ts

@@ -119,19 +119,27 @@ export function objectScale(el: THREE.Object3D, camera: THREE.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
  */
-export function objectZIndex(el: THREE.Object3D, camera: THREE.Camera, zIndexRange: Array<number>) {
+export function objectZIndex(el: THREE.Object3D, camera: THREE.Camera, zIndexRange: Array<number>, logarithmicDepth = false) {
 	if (
 		is.three<THREE.PerspectiveCamera>(camera, 'isPerspectiveCamera') ||
 		is.three<THREE.OrthographicCamera>(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;
 }