Merge pull request #1470 from xeokit/fix-annotation-occlusion-for-sce…

…ne-graph Fix Marker/Annotation occlusion for scene graph rep
xeokit · Apr 29, 2024 · ce1920c · ce1920c
2 parents c7f6eab + b1b6d44
commit ce1920c
Show file tree

Hide file tree

Showing 4 changed files with 689 additions and 0 deletions.
diff --git a/examples/annotations/annotations_occlusionEnabled_SceneModel_dtx.html b/examples/annotations/annotations_occlusionEnabled_SceneModel_dtx.html
@@ -0,0 +1,344 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+
+    <style>
+
+        .annotation-marker {
+            color: #ffffff;
+            line-height: 1.8;
+            text-align: center;
+            font-family: "monospace";
+            font-weight: bold;
+            position: absolute;
+            width: 25px;
+            height: 25px;
+            border-radius: 15px;
+            border: 2px solid #ffffff;
+            background: black;
+            visibility: hidden;
+            box-shadow: 5px 5px 15px 1px #000000;
+            z-index: 0;
+        }
+
+        .annotation-label {
+            position: absolute;
+            max-width: 250px;
+            min-height: 50px;
+            padding: 8px;
+            padding-left: 12px;
+            padding-right: 12px;
+            background: #ffffff;
+            color: #000000;
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            border-radius: 8px;
+            border: #ffffff solid 2px;
+            box-shadow: 5px 5px 15px 1px #000000;
+            z-index: 90000;
+        }
+
+        .annotation-label:after {
+            content: '';
+            position: absolute;
+            border-style: solid;
+            border-width: 8px 12px 8px 0;
+            border-color: transparent white;
+            display: block;
+            width: 0;
+            z-index: 1;
+            margin-top: -11px;
+            left: -12px;
+            top: 20px;
+        }
+
+        .annotation-label:before {
+            content: '';
+            position: absolute;
+            border-style: solid;
+            border-width: 9px 13px 9px 0;
+            border-color: transparent #ffffff;
+            display: block;
+            width: 0;
+            z-index: 0;
+            margin-top: -12px;
+            left: -15px;
+            top: 20px;
+        }
+
+        .annotation-title {
+            font: normal 20px arial, serif;
+            margin-bottom: 8px;
+        }
+
+        .annotation-desc {
+            font: normal 14px arial, serif;
+        }
+
+    </style>
+</head>
+
+<body>
+<input id="info-button" type="checkbox"/>
+<label class="info-button" for="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <img class="info-icon" src="../../assets/images/annotation_icon.png"/>
+    <h1>AnnotationsPlugin</h1>
+    <h2>Annotations with SceneModel</h2><br>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html" target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/model/SceneModel.js~SceneModel.html"
+                    target="_other">SceneModel</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/AnnotationsPlugin/AnnotationsPlugin.js~AnnotationsPlugin.html" target="_other">AnnotationsPlugin</a>
+        </li>
+    </ul>
+</div>
+</body>
+
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {
+        Viewer,
+        SceneModel,
+        AnnotationsPlugin
+    } from "../../dist/xeokit-sdk.min.es.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer and arrange the camera
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        dtxEnabled: true
+    });
+
+    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
+    viewer.scene.camera.look = [0, -5.75, 0];
+    viewer.scene.camera.up = [0.37, 0.91, -0.11];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Build a simple SceneModel representing a table with four legs
+    //------------------------------------------------------------------------------------------------------------------
+
+    const sceneModel = new SceneModel(viewer.scene, {
+        id: "table",
+        position: [0, 0, 0],
+        scale: [1, 1, 1],
+        rotation: [0, 0, 0],
+        edges: true,
+        dtxEnabled: true
+    });
+
+    sceneModel.createGeometry({
+        id: "myBoxGeometry",
+        primitive: "triangles",
+        positions: [
+            1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1,
+            1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1,
+            -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1
+        ],
+        indices: [
+            0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15,
+            16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
+        ]
+    });
+
+    sceneModel.createMesh({
+        id: "redLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [-4, -6, -4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [1, 0.3, 0.3]
+    });
+
+    sceneModel.createEntity({
+        id: "redLeg",
+        meshIds: ["redLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "greenLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [4, -6, -4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [0.3, 1.0, 0.3],
+        opacity: 0.5
+    });
+
+    sceneModel.createEntity({
+        id: "greenLeg",
+        meshIds: ["greenLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "blueLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [4, -6, 4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [0.3, 0.3, 1.0]
+    });
+
+    sceneModel.createEntity({
+        id: "blueLeg",
+        meshIds: ["blueLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "yellowLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [-4, -6, 4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [1.0, 1.0, 0.0],
+        opacity: 0.5
+    });
+
+    sceneModel.createEntity({
+        id: "yellowLeg",
+        meshIds: ["yellowLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "purpleTableTopMesh",
+        geometryId: "myBoxGeometry",
+        position: [0, -3, 0],
+        scale: [6, 0.5, 6],
+        rotation: [0, 0, 0],
+        color: [1.0, 0.3, 1.0]
+    });
+
+    sceneModel.createEntity({
+        id: "purpleTableTop",
+        meshIds: ["purpleTableTopMesh"]
+    });
+
+    sceneModel.finalize();
+
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create an AnnotationsPlugin, with which we'll create annotations
+    //------------------------------------------------------------------------------------------------------------------
+
+    const annotations = new AnnotationsPlugin(viewer, {
+
+        markerHTML: "<div class='annotation-marker' style='background-color: {{markerBGColor}};'>{{glyph}}</div>",
+        labelHTML: "<div class='annotation-label' style='background-color: {{labelBGColor}};'>\
+            <div class='annotation-title'>{{title}}</div>\
+            <div class='annotation-desc'>{{description}}</div>\
+            </div>",
+
+        values: {
+            markerBGColor: "red",
+            labelBGColor: "white",
+            glyph: "X",
+            title: "Untitled",
+            description: "No description"
+        }
+    });
+
+    annotations.on("markerClicked", (annotation) => {
+        annotation.setLabelShown(!annotation.getLabelShown());
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create some Annotations
+    //------------------------------------------------------------------------------------------------------------------
+
+    annotations.createAnnotation({
+        id: "myAnnotation1",
+        entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+        worldPos: [-1.7087798275434545, -7.72961958860887, 5.093199926162966],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A1",
+            title: "Front wall",
+            description: "This is the front wall",
+            markerBGColor: "green"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation2",
+        /////////////////////////////////////////  Entity
+        worldPos: [-2.091938248945386, -5.112701991304107, -5.6715664879640775],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A2",
+            title: "Kitchen bench",
+            description: "This annotation becomes visible<br>whenever you can see its marker<br>through the window",
+            markerBGColor: "blue"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation3",
+        /////////////////////////////////////////  Entity
+        worldPos: [-5.225982166673446, -8.685570498955713, 1.5609115343190028],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        labelHTML: "<div class='annotation-label' style='background-color: {{labelBGColor}};'>\
+                <div class='annotation-title'>{{title}}</div>\
+                <div class='annotation-desc'>{{description}}</div>\
+                <br><img alt='myImage' width='150px' height='100px' src='{{imageSrc}}'>\
+                </div>",
+
+        values: {
+            glyph: "A3",
+            title: "The West wall",
+            description: "Annotations can contain<br>custom HTML like this<br>image:",
+            markerBGColor: "red",
+            imageSrc: "https://xeokit.io/img/docs/BIMServerLoaderPlugin/schependomlaan.png"
+        }
+    });
+
+    annotations.createAnnotation({
+        id: "myAnnotation4",
+        /////////////////////////////////////////  Entity
+        worldPos: [4.00179600408677, -3.9687055304627847, 4.565188195028208],
+        occludable: true,
+        markerShown: true,
+        labelShown: false,
+
+        values: {
+            glyph: "A4",
+            title: "The South entrance landing",
+            description: "A big slab of concrete<br>at the Southern door",
+            markerBGColor: "purple"
+        }
+    });
+
+    viewer.scene.on("tick", ()=>{
+        viewer.scene.camera.orbitYaw(0.5);
+    });
+
+
+</script>
+</html>