SceneModel snap-picking examples

xeokit · Aug 8, 2023 · 654c6f5 · 654c6f5
1 parent 854e765
commit 654c6f5
Show file tree

Hide file tree

Showing 9 changed files with 820 additions and 372 deletions.
diff --git a/examples/rendering/index.html b/examples/rendering/index.html
@@ -367,6 +367,23 @@
             ["lighting_vbo_view_dir", "Various scene representations with directional view-space lights"]
         ],
 
+        "Snap-picking": [
+
+            "#Snap-to-vertex",
+
+            ["snapToVertex_vbo_instancing_triangles", "SceneModel using VBOs, geometry reuse, snap-to-vertex"],
+            ["snapToVertex_dtx_instancing_triangles", "SceneModel using DTXs, geometry reuse, snap-to-vertex"],
+            ["snapToVertex_vbo_batching_triangles", "SceneModel using VBOs, no geometry reuse, snap-to-vertex"],
+            ["snapToVertex_dtx_batching_triangles", "SceneModel using DTXs, no geometry reuse, snap-to-vertex"],
+
+            "#Snap-to-edge",
+
+            ["snapToEdge_vbo_instancing_triangles", "SceneModel using VBOs, geometry reuse, snap-to-edges"],
+            ["snapToEdge_dtx_instancing_triangles", "SceneModel using DTXs, geometry reuse, snap-to-edges"],
+            ["snapToEdge_vbo_batching_triangles", "SceneModel using VBOs, no geometry reuse, snap-to-edges"],
+            ["snapToEdge_dtx_batching_triangles", "SceneModel using DTXs, no geometry reuse, snap-to-edges"]
+        ],
+
         "Benchmarks": [
 
             "#Performance benchmarks",

diff --git a/examples/rendering/snapToEdge_dtx_batching_triangles.html b/examples/rendering/snapToEdge_dtx_batching_triangles.html
@@ -0,0 +1,223 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <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>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="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/performance_model_icon.png"/>
+    <h1>SceneModel</h1>
+    <h2>Non-realistic rendering, no geometry reuse, triangle primitives</h2>
+    <p>
+        <a href="../../docs/class/src/viewer/scene/models/SceneModel/SceneModel.js~SceneModel.html"
+           target="_other">SceneModel</a> is a WebGL2-based <a
+            href="../../docs/class/src/viewer/scene/models/SceneModel.js~SceneModel.html"
+            target="_other">SceneModel</a> implementation that stores model geometry as data textures on the GPU.
+    </p>
+    <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/models/SceneModel/SceneModel.js~SceneModel.html"
+               target="_other">SceneModel</a>
+        </li>
+    </ul>
+</div>
+</body>
+
+<script type="module">
+
+    import {Viewer, SceneModel} from "../../dist/xeokit-sdk.es.js";
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: 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];
+
+    const sceneModel = new SceneModel(viewer.scene, {
+        id: "table",
+        position: [0, 0, 0],
+        scale: [1, 1, 1],
+        rotation: [0, 0, 0],
+        edges: true,
+        forceDTX: true
+    });
+
+    sceneModel.createMesh({
+        id: "redLegMesh",
+        primitive: "triangles",
+        positions: [
+            1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // v0-v1-v2-v3 front
+            1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // v0-v3-v4-v1 right
+            1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // v0-v1-v6-v1 top
+            -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // v1-v6-v7-v2 left
+            -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1,// v7-v4-v3-v2 bottom
+            1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1 // v4-v7-v6-v1 back
+        ],
+        indices: [
+            0, 1, 2, 0, 2, 3,            // front
+            4, 5, 6, 4, 6, 7,            // right
+            8, 9, 10, 8, 10, 11,         // top
+            12, 13, 14, 12, 14, 15,      // left
+            16, 17, 18, 16, 18, 19,      // bottom
+            20, 21, 22, 20, 22, 23
+        ],
+        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",
+        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
+        ],
+        position: [4, -6, -4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [0.3, 1.0, 0.3]
+    });
+
+    sceneModel.createEntity({
+        id: "greenLeg",
+        meshIds: ["greenLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "blueLegMesh",
+        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
+        ],
+        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",
+        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
+        ],
+        position: [-4, -6, 4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [1.0, 1.0, 0.0]
+    });
+
+    sceneModel.createEntity({
+        id: "yellowLeg",
+        meshIds: ["yellowLegMesh"]
+    });
+
+    sceneModel.createMesh({
+        id: "purpleTableTopMesh",
+        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
+        ],
+        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();
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Mouse hover to snap to vertices
+    //------------------------------------------------------------------------------------------------------------------
+
+    const markerDiv = document.createElement('div');
+    const canvas = viewer.scene.canvas.canvas;
+    canvas.parentNode.insertBefore(markerDiv, canvas);
+
+    markerDiv.style.background = "black";
+    markerDiv.style.border = "2px solid blue";
+    markerDiv.style.borderRadius = "20px";
+    markerDiv.style.width = "10px";
+    markerDiv.style.height = "10px";
+    markerDiv.style.margin = "-200px -200px";
+    markerDiv.style.zIndex = "100";
+    markerDiv.style.position = "absolute";
+    markerDiv.style.pointerEvents = "none";
+
+    viewer.scene.input.on("mousemove", function (canvasPos) {
+
+        const snapPickResult = viewer.scene.snapPick({
+            canvasPos: canvasPos,
+            snapRadius: 30,
+            snapType: "edge",
+        });
+
+        if (snapPickResult && snapPickResult.snappedCanvasPos) {
+            markerDiv.style.marginLeft = `${snapPickResult.snappedCanvasPos[0] - 10}px`;
+            markerDiv.style.marginTop = `${snapPickResult.snappedCanvasPos[1] - 10}px`;
+            markerDiv.style.background = "greenyellow";
+            markerDiv.style.border = "3px solid green";
+        } else {
+            markerDiv.style.marginLeft = `${canvasPos[0] - 10}px`;
+            markerDiv.style.marginTop = `${canvasPos[1] - 10}px`;
+            markerDiv.style.background = "white";
+            markerDiv.style.border = "1px solid black";
+        }
+    });
+
+
+</script>
+</html>