Merge pull request #9223 from CedricGuillemet/guiMultilineClip

Clip multilines by camera near plane when point is attached to a mesh

dist/preview release/what's new.md

@@ -267,6 +267,7 @@
 
 - Added support for custom word splitting function for `TextBlock` ([Popov72](https://github.com/Popov72))
 - Added the `fixedRatio` property to the `Control` class ([Popov72](https://github.com/Popov72))
+- Clip multilines by camera near plane when point is attached to a mesh ([cedricguillemet](https://github.com/cedricguillemet))
 
 ### Post Processes
 

gui/src/2D/advancedDynamicTexture.ts

@@ -549,6 +549,22 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         projectedPosition.scaleInPlace(this.renderScale);
         return new Vector2(projectedPosition.x, projectedPosition.y);
     }
+    /**
+    * Get screen coordinates for a vector3
+    * @param position defines the position to project
+    * @param worldMatrix defines the world matrix to use
+    * @returns the projected position with Z
+    */
+    public getProjectedPositionWithZ(position: Vector3, worldMatrix: Matrix): Vector3 {
+        var scene = this.getScene();
+        if (!scene) {
+            return Vector3.Zero();
+        }
+        var globalViewport = this._getGlobalViewport(scene);
+        var projectedPosition = Vector3.Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
+        projectedPosition.scaleInPlace(this.renderScale);
+        return new Vector3(projectedPosition.x, projectedPosition.y, projectedPosition.z);
+    }
     private _checkUpdate(camera: Camera): void {
         if (this._layerToDispose) {
             if ((camera.layerMask & this._layerToDispose.layerMask) === 0) {

gui/src/2D/controls/multiLine.ts

@@ -5,6 +5,7 @@ import { Control } from "./control";
 import { MultiLinePoint } from "../multiLinePoint";
 import { Measure } from "../measure";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
+import { Vector3 } from "babylonjs/Maths/math.vector";
 
 /**
  * Class used to create multi line control
@@ -193,6 +194,7 @@ export class MultiLine extends Control {
         context.beginPath();
 
         var first: boolean = true; //first index is not necessarily 0
+        var previousPoint: Vector3;
 
         this._points.forEach((point) => {
             if (!point) {
@@ -205,8 +207,13 @@ export class MultiLine extends Control {
                 first = false;
             }
             else {
-                context.lineTo(point._point.x, point._point.y);
+                if (point._point.z < 1 && previousPoint.z < 1) {
+                    context.lineTo(point._point.x, point._point.y);
+                } else {
+                    context.moveTo(point._point.x, point._point.y);
+                }
             }
+            previousPoint = point._point;
         });
 
         context.stroke();

gui/src/2D/multiLinePoint.ts

@@ -1,6 +1,7 @@
 import { Nullable } from "babylonjs/types";
 import { Observer } from "babylonjs/Misc/observable";
-import { Vector2 } from "babylonjs/Maths/math.vector";
+import { Vector3 } from "babylonjs/Maths/math.vector";
+import { Epsilon } from 'babylonjs/Maths/math.constants';
 import { Camera } from "babylonjs/Cameras/camera";
 import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
 
@@ -25,7 +26,7 @@ export class MultiLinePoint {
     private _meshObserver: Nullable<Observer<Camera>>;
 
     /** @hidden */
-    public _point: Vector2;
+    public _point: Vector3;
 
     /**
      * Creates a new MultiLinePoint
@@ -37,7 +38,7 @@ export class MultiLinePoint {
         this._x = new ValueAndUnit(0);
         this._y = new ValueAndUnit(0);
 
-        this._point = new Vector2(0, 0);
+        this._point = new Vector3(0, 0, 0);
     }
 
     /** Gets or sets x coordinate */
@@ -125,21 +126,21 @@ export class MultiLinePoint {
     }
 
     /**
-     * Gets a translation vector
+     * Gets a translation vector with Z component
      * @returns the translation vector
      */
-    public translate(): Vector2 {
+    public translate(): Vector3 {
         this._point = this._translatePoint();
 
         return this._point;
     }
 
-    private _translatePoint(): Vector2 {
+    private _translatePoint(): Vector3 {
         if (this._mesh != null) {
-            return this._multiLine._host.getProjectedPosition(this._mesh.getBoundingInfo().boundingSphere.center, this._mesh.getWorldMatrix());
+            return this._multiLine._host.getProjectedPositionWithZ(this._mesh.getBoundingInfo().boundingSphere.center, this._mesh.getWorldMatrix());
         }
         else if (this._control != null) {
-            return new Vector2(this._control.centerX, this._control.centerY);
+            return new Vector3(this._control.centerX, this._control.centerY, 1. - Epsilon);
         }
         else {
             var host: any = this._multiLine._host as any;
@@ -147,7 +148,7 @@ export class MultiLinePoint {
             var xValue: number = this._x.getValueInPixel(host, Number(host._canvas.width));
             var yValue: number = this._y.getValueInPixel(host, Number(host._canvas.height));
 
-            return new Vector2(xValue, yValue);
+            return new Vector3(xValue, yValue, 1. - Epsilon);
         }
     }