@combeenation/3d-viewer 18.0.0 → 18.1.0-beta2

package/src/manager/camera-manager.ts

@@ -12,6 +12,7 @@ import {
   ViewerEvent,
 } from '../index';
 import { isNodeExcluded } from '../internal/geometry-helper';
+import { createScreenshotCanvas, trimCanvas } from '../internal/screenshot-helper';
 
 export type CameraPosition = {
   alpha: number;
@@ -68,6 +69,11 @@ export type ScreenshotSettings = {
    * Excludes ALL html anchor groups if set to `true`.
    */
   excludeHtmlAnchorGroups?: string[] | true;
+  /**
+   * Removes all bounding transparent pixels, so that final image size exactly fits the scene content.\
+   * As a result the final image size might be smaller than the values defined on the `width` and `height` input.
+   */
+  cropTransparentArea?: boolean;
   /**
    * "MIME type" of the returned screenshot image, defaults to `image/png`
    *
@@ -79,7 +85,10 @@ export type ScreenshotSettings = {
   mimeType?: string;
   /** If file name is given, the screenshot image will be downloaded and the base64 string will NOT be returned! */
   fileName?: string;
-  /** Expert settings to tweak the screenshot image, see [Babylon.js](https://doc.babylonjs.com/typedoc/functions/BABYLON.CreateScreenshotUsingRenderTarget) docs for further information */
+  /**
+   * Expert settings to tweak the screenshot image, see [Babylon.js](https://doc.babylonjs.com/typedoc/functions/BABYLON.CreateScreenshotUsingRenderTarget) docs for further information.\
+   * Defaults to `8` for improved screenshot quality.
+   */
   samples?: number;
   /** Expert settings to tweak the screenshot image, see [Babylon.js](https://doc.babylonjs.com/typedoc/functions/BABYLON.CreateScreenshotUsingRenderTarget) docs for further information */
   antialiasing?: boolean;
@@ -299,6 +308,7 @@ export class CameraManager {
       autofocusScene,
       exclude,
       excludeHtmlAnchorGroups,
+      cropTransparentArea,
       fileName,
       samples,
       antialiasing,
@@ -344,7 +354,8 @@ export class CameraManager {
       screenshotCam,
       { width: screenshotSize.imageWidth, height: screenshotSize.imageHeight },
       mimeType,
-      samples,
+      // default to "8", since Babylon.js default "1" is really ugly
+      samples ?? 8,
       antialiasing,
       undefined,
       renderSprites,
@@ -365,32 +376,22 @@ export class CameraManager {
       excludeHtmlAnchorGroups === true
         ? []
         : this.viewer.htmlAnchorManager.getHtmlAnchorKeys(undefined, excludeHtmlAnchorGroups, true);
-    if (htmlAnchorKeys.length) {
+    if (htmlAnchorKeys.length || cropTransparentArea) {
       // html anchors are not included in the main screenshot, as the html elements are located outside of the canvas
       // the idea is to create a dedicated canvas for these elements and merge the result with the main screenshot into
       // a combined canvas
-      const screenshotHtmlCanvas = await this.viewer.htmlAnchorManager.createScreenshotCanvas(
-        screenshotSize,
-        screenshotCam,
-        htmlAnchorKeys
-      );
-
-      // convert the main screenshot into an image, so that it can be drawn onto a canvas as well
-      const screenshot3dImg = new Image();
-      screenshot3dImg.src = imageStr3d;
-      await new Promise(resolve => {
-        screenshot3dImg.onload = resolve;
-      });
-
-      const screenshotCombinedCanvas = document.createElement('canvas');
-      screenshotCombinedCanvas.width = screenshotSize.imageWidth;
-      screenshotCombinedCanvas.height = screenshotSize.imageHeight;
-
-      // draw main and html screenshot on a new canvas and get the base64 string from it
-      const context = screenshotCombinedCanvas.getContext('2d')!;
-      context.drawImage(screenshot3dImg, 0, 0, screenshotSize.imageWidth, screenshotSize.imageHeight);
-      context.drawImage(screenshotHtmlCanvas, 0, 0, screenshotSize.imageWidth, screenshotSize.imageHeight);
-      imageStr = screenshotCombinedCanvas.toDataURL(mimeType);
+      const screenshotHtmlCanvas = htmlAnchorKeys.length
+        ? await this.viewer.htmlAnchorManager.createScreenshotCanvas(screenshotSize, screenshotCam, htmlAnchorKeys)
+        : undefined;
+
+      const screenshotCombinedCanvas = await createScreenshotCanvas(imageStr3d, screenshotSize, screenshotHtmlCanvas);
+      if (cropTransparentArea) {
+        const screenshotTrimmedCanvas = trimCanvas(screenshotCombinedCanvas);
+        imageStr = screenshotTrimmedCanvas.toDataURL(mimeType);
+        screenshotTrimmedCanvas.remove();
+      } else {
+        imageStr = screenshotCombinedCanvas.toDataURL(mimeType);
+      }
 
       screenshotCombinedCanvas.remove();
     } else {

package/src/manager/html-anchor-manager.ts

@@ -4,8 +4,10 @@ import {
   Camera,
   DimensionLineManager,
   MeshBuilder,
+  Ray,
   ScreenshotSize,
   StandardMaterial,
+  Tags,
   TransformNode,
   Vector3,
   Viewer,
@@ -82,9 +84,13 @@ export class HtmlAnchorManager {
           parentHtmlElement,
           anchorMesh,
           viewer.scene.activeCamera!,
-          canvas.width,
-          canvas.height,
+          // it's import to use `clientWidth` and `clientHeight` as it makes a difference on mobile devices that have
+          // hardware scaling activated
+          // => `width`/`height` return the upscaled values, but the basis html element for the anchors remains unscaled
+          canvas.clientWidth,
+          canvas.clientHeight,
           1,
+          false,
           options
         );
       });
@@ -97,9 +103,7 @@ export class HtmlAnchorManager {
    * mesh within the scene.
    */
   public addHtmlAnchor(name: string, htmlElement: HTMLElement, position: Vector3, options?: HtmlAnchorOptions): void {
-    const canvasParentHtmlElement = this.viewer.canvas?.parentElement;
-    if (!canvasParentHtmlElement) {
-      console.warn(`No parent for desired html anchor available`);
+    if (!this.viewer.canvas) {
       return;
     }
 
@@ -120,7 +124,10 @@ export class HtmlAnchorManager {
     if (!enablePointerEvents) {
       parentHtmlElement.style.pointerEvents = 'none';
     }
-    canvasParentHtmlElement.appendChild(parentHtmlElement);
+    // it's important to insert the html anchor elements right after the viewer canvas
+    // otherwise the elements could be in front of other sibling nodes, like the viewer control loading mask
+    // => see CB-10496
+    this.viewer.canvas.insertAdjacentElement('afterend', parentHtmlElement);
 
     // NOTE: creates a sphere with fixed size, which could be problematic in scene with "strange" dimensions
     // add a property for the sphere size if required
@@ -206,7 +213,10 @@ export class HtmlAnchorManager {
       htmlContainer.append(clonedHtmlNode);
 
       // reposition that cloned html element, so that it fits to the desired camera position
-      const baseScale = size.canvasHeight / this.viewer.canvas!.height;
+      // `clientHeight`: makes difference on mobile devices that have hardware scaling activated
+      //                 => `height` returns the upscaled value, but the basis html element for the anchors remains
+      //                     unscaled
+      const baseScale = size.canvasHeight / this.viewer.canvas!.clientHeight;
       this._updateHtmlAnchor(
         clonedHtmlNode,
         anchorMesh,
@@ -214,6 +224,7 @@ export class HtmlAnchorManager {
         size.canvasWidth,
         size.canvasHeight,
         baseScale,
+        true,
         options
       );
     });
@@ -271,6 +282,7 @@ export class HtmlAnchorManager {
     width: number,
     height: number,
     baseScale: number,
+    useRayHitTestForOcclusionCheck: boolean,
     options?: HtmlAnchorOptions
   ): void {
     const { hideIfOccluded, scaleWithCameraDistance } = options ?? {};
@@ -315,7 +327,31 @@ export class HtmlAnchorManager {
       vertexScreenCoords.x + elementXOffset < width &&
       vertexScreenCoords.y - elementYOffset > 0 &&
       vertexScreenCoords.y + elementYOffset < height;
-    const isOccluded = hideIfOccluded && anchorMesh.isOccluded;
+
+    let isOccluded = false;
+    if (hideIfOccluded) {
+      if (useRayHitTestForOcclusionCheck) {
+        // ray test has to be used for synchronous occlusion checks
+        // this is the case for screenshots, where the screenshot camera might be on a different position than the scene
+        // camera
+        // default occlusion query is too slow and there is no way to know when the occlusion check is finished, so we
+        // fall back to this alternative technology
+        // however, this tech has higher performance impact, so we don't use it for the cyclic occlusion check
+        const meshCenter = anchorMesh.getBoundingInfo().boundingBox.centerWorld;
+        const camDirection = meshCenter.subtract(camera.position);
+        const ray = new Ray(camera.position, camDirection);
+        const hit = this.viewer.scene.pickWithRay(
+          ray,
+          mesh => !Tags.MatchesQuery(mesh, DimensionLineManager.DIMENSION_LINE_KEY),
+          false
+        );
+        isOccluded = hit?.pickedMesh !== anchorMesh;
+      } else {
+        // use default occlusion check from GPU
+        isOccluded = anchorMesh.isOccluded;
+      }
+    }
+
     parentHtmlElement.style.opacity = isInViewport && !isOccluded ? '1' : '0';
   }