Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

XEOK-54 Expose SceneModelEntity's area and volume #1577

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

XEOK-54 Expose SceneModelEntity's area and volume #1577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
30f3590
XEOK-54 Implement SceneModelEntity::area and ::volume getters
MichalDybizbanskiCreoox Jul 10, 2024
4795a35
Add areaVolume example
MichalDybizbanskiCreoox Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
222 changes: 222 additions & 0 deletions examples/measurement/areaVolume.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
<!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>

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded from content delivery network with no integrity check.
<script src="../libs/dat.gui.min.js" type="text/javascript"></script>
<link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
<style>
.annotation-marker {
color: #ffffff;
line-height: 1.8;
text-align: center;
font-family: "monospace";
font-weight: bold;
position: absolute;
min-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 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 id="metrics" style="position: absolute; background: white; border-radius: 5px; padding: 0px 5px; pointer-events: none;"></div>
<div class="slideout-sidebar">
<h1>ZonesPlugin</h1>
<h2>Creating 3D zones inside a model</h2>
<p>In this example, we're loading a BIM model and create zones inside it</p>

<h3>Customize</h3>
<div id="myDatGuiContainer"></div>

<ul>
<li>
<a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
target="_other">Viewer</a>
</li>
<li>
<a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
target="_other">XKTLoaderPlugin</a>
</li>
<li>
<a href="../../docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html"
target="_other">SectionPlanesPlugin</a>
</li>
</ul>
<h3>Resources</h3>
<ul>
<li>
<a href="https://github.com/buildingSMART/Sample-Test-Files/tree/master/IFC%202x3/Schependomlaan"
target="_other">Model source</a>
</li>
</ul>
</div>
</body>
<script type="module">

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {Viewer, XKTLoaderPlugin, SectionPlanesPlugin} from "../../dist/xeokit-sdk.min.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
canvasId: "myCanvas",
transparent: true
});

viewer.camera.eye = [-9.11, 20.01, 5.13];
viewer.camera.look = [9.07, 0.77, -9.78];
viewer.camera.up = [0.47, 0.76, -0.38];
viewer.camera.perspective.near = 0.1;
viewer.camera.perspective.far = 5000.0;

viewer.cameraControl.followPointer = true;

const sao = viewer.scene.sao;
sao.enabled = true;

//------------------------------------------------------------------------------------------------------------------
// Add a XKTModelsPlugin - we'll use this to load the model geometry
//------------------------------------------------------------------------------------------------------------------

const xktLoader = new XKTLoaderPlugin(viewer);

//------------------------------------------------------------------------------------------------------------------
// Add a SectionPlanesPlugin - we'll use this to create cross-section planes
//------------------------------------------------------------------------------------------------------------------

const sectionPlanes = new SectionPlanesPlugin(viewer, {
overviewVisible: false
});

//------------------------------------------------------------------------------------------------------------------
// Load the .xkt model and IFC metadata
//------------------------------------------------------------------------------------------------------------------

const sceneModel = xktLoader.load({
id: "myModel",
src: "../../assets/models/xkt/v8/ifc/Schependomlaan.ifc.xkt",
edges: true,
saoEnabled: true
});

//------------------------------------------------------------------------------------------------------------------
// Create a cross-section plane
//------------------------------------------------------------------------------------------------------------------

const sectionPlane = sectionPlanes.createSectionPlane({
id: "mySectionPlane",
pos: [10.95+15, 1.95, -10.35-15],
dir: [0.0, -1.0, 0.0]
});

const metricsDiv = document.getElementById("metrics");
const px = v => v + "px";

viewer.scene.input.on("mousemove", (function() {
let highlighted = null;
return function(canvasPos) {
const pickRecord = viewer.scene.pick({ canvasPos: canvasPos });
const pickEntity = pickRecord && pickRecord.entity && pickRecord.entity.model && pickRecord.entity;
if (highlighted && (highlighted !== pickEntity))
{
highlighted.highlighted = false;
highlighted = null;
}
if (pickEntity)
{
if (! highlighted)
{
highlighted = pickEntity;
highlighted.highlighted = true;

try {
metricsDiv.innerHTML = "id: " + pickEntity.id + "<br />area: " + highlighted.area.toFixed(3) + " u²<br />volume: " + highlighted.volume.toFixed(3) + " u³";
} catch (e) {
metricsDiv.innerHTML = JSON.stringify(e);
console.error(e);
}
}

metricsDiv.style.left = px(canvasPos[0] + 20);
metricsDiv.style.top = px(canvasPos[1] - 100);
}

metricsDiv.style.display = highlighted ? "" : "none";
}
})());

</script>
</html>
12 changes: 12 additions & 0 deletions src/viewer/scene/model/SceneModelEntity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -640,6 +640,18 @@ export class SceneModelEntity {
this.model.glRedraw();
}

get area() {
let acc = 0;
this.meshes.forEach(m => acc += m.area);
return acc;
}

get volume() {
let acc = 0;
this.meshes.forEach(m => acc += m.volume);
return acc;
}

get saoEnabled() {
return this.model.saoEnabled;
}
Expand Down
8 changes: 8 additions & 0 deletions src/viewer/scene/model/SceneModelMesh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,14 @@ export class SceneModelMesh {
return this._aabbWorld;
}

get area() {
return this.layer._portions[this.portionId]._metrics.area;
}

get volume() {
return this.layer._portions[this.portionId]._metrics.volume;
}

/**
* @private
*/
Expand Down
40 changes: 40 additions & 0 deletions src/viewer/scene/model/vbo/batching/triangles/VBOBatchingTrianglesLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,46 @@ export class VBOBatchingTrianglesLayer {
portion.quantizedPositions = quantizedPositions.slice(start, end);
}
}

{
const indices = buffer.indices;
const worldMatrix = this.model.worldMatrix;
const positionsDecodeMatrix = state.positionsDecodeMatrix;
const pts = [ math.vec3(), math.vec3(), math.vec3() ];
const tmpVec3 = math.vec3();

this._portions.forEach((portion, i) => {
let volume = 0;
let area = 0;

const indicesBaseIndex = portion.indicesBaseIndex;
const indicesLastIndex = indicesBaseIndex + portion.numIndices;

for (let faceIdx = indicesBaseIndex; faceIdx < indicesLastIndex; faceIdx += 3) {
for (let faceOff = 0; faceOff < 3; ++faceOff) {
const i = 3 * indices[faceIdx + faceOff];
const worldPos = pts[faceOff];

// based on getEachVertex
worldPos[0] = quantizedPositions[i];
worldPos[1] = quantizedPositions[i + 1];
worldPos[2] = quantizedPositions[i + 2];
math.decompressPosition(worldPos, positionsDecodeMatrix);
math.transformPoint3(worldMatrix, worldPos, worldPos);
}

volume += math.dotVec3(pts[0], math.cross3Vec3(pts[1], pts[2], tmpVec3));
math.subVec3(pts[1], pts[0], pts[1]);
math.subVec3(pts[2], pts[0], pts[2]);
area += math.lenVec3(math.cross3Vec3(pts[1], pts[2], tmpVec3));
}

portion._metrics = {
area: area / 2,
volume: volume / 6
};
});
}
}

if (buffer.normals.length > 0) { // Normals are already oct-encoded
Expand Down
38 changes: 38 additions & 0 deletions src/viewer/scene/model/vbo/instancing/triangles/VBOInstancingTrianglesLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,44 @@ export class VBOInstancingTrianglesLayer {

const portion = {};

{
const indices = this._state.geometry.indices;
const quantizedPositions = this._state.geometry.positionsCompressed;
const positionsDecodeMatrix = this._state.geometry.positionsDecodeMatrix;
const pts = [ math.vec3(), math.vec3(), math.vec3() ];
const tmpVec3 = math.vec3();

let volume = 0;
let area = 0;

const indicesBaseIndex = 0;
const indicesLastIndex = indices.length;

for (let faceIdx = indicesBaseIndex; faceIdx < indicesLastIndex; faceIdx += 3) {
for (let faceOff = 0; faceOff < 3; ++faceOff) {
const i = 3 * indices[faceIdx + faceOff];
const worldPos = pts[faceOff];

// based on getEachVertex
worldPos[0] = quantizedPositions[i];
worldPos[1] = quantizedPositions[i + 1];
worldPos[2] = quantizedPositions[i + 2];
math.decompressPosition(worldPos, positionsDecodeMatrix);
math.transformPoint3(meshMatrix, worldPos, worldPos);
}

volume += math.dotVec3(pts[0], math.cross3Vec3(pts[1], pts[2], tmpVec3));
math.subVec3(pts[1], pts[0], pts[1]);
math.subVec3(pts[2], pts[0], pts[2]);
area += math.lenVec3(math.cross3Vec3(pts[1], pts[2], tmpVec3));
}

portion._metrics = {
area: area / 2,
volume: volume / 6
};
}

if (this.model.scene.pickSurfacePrecisionEnabled) {
portion.matrix = meshMatrix.slice();
portion.inverseMatrix = null; // Lazy-computed in precisionRayPickSurface
Expand Down