effibemviewer 0.1.0__tar.gz

effibemviewer-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026, Julien Marrec
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

effibemviewer-0.1.0/PKG-INFO

@@ -0,0 +1,51 @@
+Metadata-Version: 2.4
+Name: effibemviewer
+Version: 0.1.0
+Summary: A 3D viewer for OpenStudio building energy models using GLTF and Three.js
+License: MIT
+License-File: LICENSE
+Author: Julien Marrec
+Author-email: contact@effibem.com
+Requires-Python: >=3.10,<4.0
+Classifier: Development Status :: 2 - Pre-Alpha
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Natural Language :: English
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: Programming Language :: Python :: 3.14
+Requires-Dist: jinja2 (>=3.1,<4.0)
+Requires-Dist: openstudio (>=3.4,<4.0)
+Project-URL: Changelog, https://github.com/jmarrec/effibemviewer/blob/main/CHANGELOG.md
+Project-URL: Documentation, https://jmarrec.github.io/effibemviewer
+Project-URL: Homepage, https://effibem.com
+Project-URL: Issues, https://github.com/jmarrec/effibemviewer/issues
+Project-URL: Repository, https://github.com/jmarrec/effibemviewer
+Description-Content-Type: text/markdown
+
+# EffiBEM Viewer
+
+
+[![pypi](https://img.shields.io/pypi/v/effibemviewer.svg)](https://pypi.org/project/effibemviewer/)
+[![python](https://img.shields.io/pypi/pyversions/effibemviewer.svg)](https://pypi.org/project/effibemviewer/)
+[![Build Status](https://github.com/jmarrec/effibemviewer/actions/workflows/dev.yml/badge.svg)](https://github.com/jmarrec/effibemviewer/actions/workflows/dev.yml)
+[![codecov](https://codecov.io/gh/jmarrec/effibemviewer/branch/main/graphs/badge.svg)](https://codecov.io/github/jmarrec/effibemviewer)
+
+
+A 3D viewer for OpenStudio building energy models using GLTF and Three.js, that can create a standalone HTML page or be embedded into a Jupyter Notebook.
+
+A Jupyter Notebook [Gltf_notebook.ipynb](Gltf_notebook.ipynb) can serve as a small demonstration of the features.
+
+
+* Documentation: <https://jmarrec.github.io/effibemviewer>
+* GitHub: <https://github.com/jmarrec/effibemviewer>
+* PyPI: <https://pypi.org/project/effibemviewer/>
+
+
+This is free software (MIT License) contributed by [EffiBEM](https://effibem.com).
+
+Leveraging software, [EffiBEM](https://effibem.com) specializes in providing new ways to streamline your workflows and create new tools that work with limited inputs for your specific applications. We also offer support and training services on BEM simulation engines (OpenStudio and EnergyPlus).
+

effibemviewer-0.1.0/README.md

@@ -0,0 +1,22 @@
+# EffiBEM Viewer
+
+
+[![pypi](https://img.shields.io/pypi/v/effibemviewer.svg)](https://pypi.org/project/effibemviewer/)
+[![python](https://img.shields.io/pypi/pyversions/effibemviewer.svg)](https://pypi.org/project/effibemviewer/)
+[![Build Status](https://github.com/jmarrec/effibemviewer/actions/workflows/dev.yml/badge.svg)](https://github.com/jmarrec/effibemviewer/actions/workflows/dev.yml)
+[![codecov](https://codecov.io/gh/jmarrec/effibemviewer/branch/main/graphs/badge.svg)](https://codecov.io/github/jmarrec/effibemviewer)
+
+
+A 3D viewer for OpenStudio building energy models using GLTF and Three.js, that can create a standalone HTML page or be embedded into a Jupyter Notebook.
+
+A Jupyter Notebook [Gltf_notebook.ipynb](Gltf_notebook.ipynb) can serve as a small demonstration of the features.
+
+
+* Documentation: <https://jmarrec.github.io/effibemviewer>
+* GitHub: <https://github.com/jmarrec/effibemviewer>
+* PyPI: <https://pypi.org/project/effibemviewer/>
+
+
+This is free software (MIT License) contributed by [EffiBEM](https://effibem.com).
+
+Leveraging software, [EffiBEM](https://effibem.com) specializes in providing new ways to streamline your workflows and create new tools that work with limited inputs for your specific applications. We also offer support and training services on BEM simulation engines (OpenStudio and EnergyPlus).

effibemviewer-0.1.0/effibemviewer/__init__.py

@@ -0,0 +1,21 @@
+"""Top-level package for EffiBEMViewer."""
+
+__author__ = """Julien Marrec"""
+__email__ = 'contact@effibem.com'
+__version__ = '0.1.0'
+
+from effibemviewer.gltf import (
+    create_example_model,
+    display_model,
+    model_to_gltf_html,
+    model_to_gltf_json,
+    model_to_gltf_script,
+)
+
+__all__ = [
+    "create_example_model",
+    "display_model",
+    "model_to_gltf_html",
+    "model_to_gltf_json",
+    "model_to_gltf_script",
+]

effibemviewer-0.1.0/effibemviewer/__main__.py

@@ -0,0 +1,45 @@
+import argparse
+from pathlib import Path
+
+from effibemviewer.gltf import create_example_model, model_to_gltf_html
+
+
+def main():
+    """Command-line interface for generating GLTF viewer HTML from an OpenStudio model."""
+    parser = argparse.ArgumentParser(description="Generate GLTF viewer HTML from OpenStudio model")
+    # -m, --model: Path to the OpenStudio model file (optional, defaults to an example model)
+    parser.add_argument(
+        "-m",
+        "--model",
+        type=Path,
+        help="Path to the OpenStudio model file (optional, defaults to an example model)",
+    )
+    parser.add_argument(
+        "-g",
+        "--geometry-diagnostics",
+        action="store_true",
+        help="Include geometry diagnostics (convex, correctly oriented, etc.)",
+    )
+    parser.add_argument(
+        "-o", "--output", type=Path, default=Path("test.html"), help="Output HTML file path (default: test.html)"
+    )
+    args = parser.parse_args()
+
+    if args.model:
+        import openstudio
+
+        if not args.model.is_file():
+            raise ValueError(f"Error: Model file '{args.model}' does not exist.")
+        model = openstudio.model.Model.load(args.model).get()
+    else:
+        print("No model file provided, using example model")
+        model = create_example_model(include_geometry_diagnostics=args.geometry_diagnostics)
+
+    args.output.write_text(
+        model_to_gltf_html(model=model, pretty_json=True, include_geometry_diagnostics=args.geometry_diagnostics)
+    )
+    model.save("model.osm", True)
+
+
+if __name__ == "__main__":
+    main()

effibemviewer-0.1.0/effibemviewer/gltf.py

@@ -0,0 +1,140 @@
+import openstudio
+from jinja2 import Environment, PackageLoader
+
+env = Environment(loader=PackageLoader("effibemviewer", "templates"))
+
+
+def model_to_gltf_json(model: openstudio.model.Model, include_geometry_diagnostics: bool = False) -> dict:
+    """Convert an OpenStudio model to GLTF JSON format (dict).
+
+    Args:
+        model: OpenStudio model to convert
+        include_geometry_diagnostics: If True, include geometry diagnostic info in the output
+
+    Returns:
+        dict: GLTF JSON data representing the model
+
+    Raises:
+        ValueError: If geometry diagnostics are requested but not supported by the OpenStudio version
+    """
+    ft = openstudio.gltf.GltfForwardTranslator()
+    if include_geometry_diagnostics:
+        if not callable(getattr(openstudio.gltf.GltfForwardTranslator, "setIncludeGeometryDiagnostics", None)):
+            raise ValueError(
+                "Geometry diagnostics not supported in this version of OpenStudio. Please update to use this feature."
+            )
+        ft.setIncludeGeometryDiagnostics(True)
+    return ft.modelToGLTFJSON(model)
+
+
+def model_to_gltf_script(
+    model: openstudio.model.Model,
+    height: str = "500px",
+    pretty_json: bool = False,
+    include_geometry_diagnostics: bool = False,
+) -> str:
+    """Generate HTML/JS fragment to render an OpenStudio model as GLTF.
+
+    Args:
+        model: OpenStudio model to render
+        height: CSS height value (default "500px", use "100vh" for full viewport)
+        pretty_json: If True, format JSON with indentation
+        include_geometry_diagnostics: If True, include geometry diagnostic info
+    """
+    data = model_to_gltf_json(model=model, include_geometry_diagnostics=include_geometry_diagnostics)
+
+    template = env.get_template("gltf_viewer.html.j2")
+    indent = 2 if pretty_json else None
+    return template.render(
+        height=height,
+        gltf_data=data,
+        indent=indent,
+        include_geometry_diagnostics=include_geometry_diagnostics,
+    )
+
+
+def model_to_gltf_html(
+    model: openstudio.model.Model,
+    height: str = "100vh",
+    pretty_json: bool = False,
+    include_geometry_diagnostics: bool = False,
+) -> str:
+    """Generate a full standalone HTML page for viewing an OpenStudio model."""
+    fragment = model_to_gltf_script(
+        model=model, height=height, pretty_json=pretty_json, include_geometry_diagnostics=include_geometry_diagnostics
+    )
+    return f"<!DOCTYPE html><html><head></head><body style='margin:0'>{fragment}</body></html>"
+
+
+def display_model(
+    model: openstudio.model.Model,
+    height: str = "500px",
+    use_iframe: bool = False,
+    include_geometry_diagnostics: bool = False,
+):
+    """Display an OpenStudio model in a Jupyter notebook.
+
+    Args:
+        model: OpenStudio model to render
+        height: CSS height value (default "500px")
+        use_iframe: If True, use IFrame for nbclassic compatibility
+        include_geometry_diagnostics: If True, include geometry diagnostic info
+
+    Returns:
+        IPython display object (HTML or IFrame)
+    """
+    import base64
+
+    from IPython.display import HTML, IFrame
+
+    if use_iframe:
+        full_html = model_to_gltf_html(
+            model=model, height=height, include_geometry_diagnostics=include_geometry_diagnostics
+        )
+        data_url = f"data:text/html;base64,{base64.b64encode(full_html.encode()).decode()}"
+        # Parse height for IFrame (needs integer pixels)
+        h = int(height.replace("px", "")) if height.endswith("px") else 500
+        return IFrame(src=data_url, width="100%", height=h)
+
+    fragment = model_to_gltf_script(
+        model=model, height=height, include_geometry_diagnostics=include_geometry_diagnostics
+    )
+    return HTML(fragment)
+
+
+def create_example_model(include_geometry_diagnostics: bool = False) -> openstudio.model.Model:
+    """Create an example OpenStudio model with two stories and optionally geometry diagnostics.
+
+    Args:
+        include_geometry_diagnostics: If True, will reverse a surface on purpose
+
+    Returns:
+        model (openstudio.model.Model): Example model
+    """
+    model = openstudio.model.exampleModel()
+    space = model.getSpaceByName("Space 1").get()
+    # Move space type assignment from Building to Space, so I can have one without it
+    space_type = space.spaceType().get()
+    [space.setSpaceType(space_type) for space in model.getSpaces()]
+    b = model.getBuilding()
+    b.setNorthAxis(45)
+    b.resetSpaceType()
+
+    space_clone = space.clone(model).to_Space().get()
+    space_clone.setName("Space Level 2")
+    space_clone.resetSpaceType()
+    # Set it above the original space for better viewing
+    z = space.boundingBox().maxZ().get()
+    assert z == 3.0
+    space_clone.setZOrigin(z)
+    story2 = openstudio.model.BuildingStory(model)
+    story2.setName("Second Story")
+    story2.setNominalZCoordinate(z)
+    story2.setNominalFloortoFloorHeight(z)
+    space_clone.setBuildingStory(story2)
+
+    if include_geometry_diagnostics:
+        surface = next(s for s in space_clone.surfaces() if s.surfaceType() == "Wall")
+        surface.setVertices(openstudio.reverse(surface.vertices()))  # Make one surface incorrectly oriented
+
+    return model

effibemviewer-0.1.0/effibemviewer/templates/gltf_viewer.html.j2

@@ -0,0 +1,647 @@
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+  }
+}
+</script>
+
+<style>
+  #viewer { width: 100%; height: {{ height }}; position: relative; }
+  #controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(255,255,255,0.9);
+    padding: 10px;
+    border-radius: 4px;
+    font-family: sans-serif;
+    font-size: 12px;
+    z-index: 100;
+  }
+  #controls label { display: block; margin: 4px 0; cursor: pointer; }
+  #controls input { margin-right: 6px; }
+  #info-panel {
+    display: none;
+    position: absolute;
+    background: rgba(255,255,255,0.95);
+    padding: 10px 14px;
+    border-radius: 4px;
+    font-family: sans-serif;
+    font-size: 12px;
+    z-index: 100;
+    max-width: 300px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    pointer-events: none;
+  }
+  #info-panel h4 { margin: 0 0 8px 0; font-size: 13px; }
+  #info-panel .info-row { margin: 4px 0; }
+  #info-panel .info-row.emphasized { background: #1a73e8; color: white; margin: 4px -8px; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
+  #info-panel .info-row.emphasized .info-label { color: white; }
+  #info-panel .info-label { color: #666; }
+  .badge {
+    display: inline-block;
+    padding: 2px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 10px;
+    text-transform: capitalize;
+  }
+  .badge-success { background-color: #198754; color: white; }
+  .badge-danger { background-color: #dc3545; color: white; }
+</style>
+
+<div id="viewer">
+  <div id="controls">
+    <div style="margin-bottom: 8px;">
+      <label style="display: inline;"><strong>Render By</strong></label>
+      <select id="renderBy" style="margin-left: 8px; font-size: 12px;">
+        <option value="surfaceType">Surface Type</option>
+        <option value="boundary">Boundary</option>
+        <option value="construction">Construction</option>
+        <option value="thermalZone">Thermal Zone</option>
+        <option value="spaceType">Space Type</option>
+        <option value="buildingStory">Building Story</option>
+      </select>
+    </div>
+    <div style="margin: 8px 0;">
+      <label style="display: inline;"><strong>Show Story</strong></label>
+      <select id="showStory" style="margin-left: 8px; font-size: 12px;">
+        <option value="">All Stories</option>
+      </select>
+    </div>
+    <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
+    <strong>Surface Filters</strong>
+    <label><input type="checkbox" id="showFloors" checked> Floors</label>
+    <label><input type="checkbox" id="showWalls" checked> Walls</label>
+    <label><input type="checkbox" id="showRoofs" checked> Roofs/Ceilings</label>
+    <label><input type="checkbox" id="showWindows" checked> Windows</label>
+    <label><input type="checkbox" id="showDoors" checked> Doors</label>
+    <label><input type="checkbox" id="showShading" checked> Shading</label>
+    <label><input type="checkbox" id="showPartitions" checked> Partitions</label>
+    <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
+    <label><input type="checkbox" id="showEdges" checked> Show Edges</label>
+{% if include_geometry_diagnostics %}
+    <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
+    <strong>Geometry Diagnostics</strong>
+    <label><input type="checkbox" id="showOnlyNonConvexSurfaces"> Non-Convex Surfaces Only</label>
+    <label><input type="checkbox" id="showOnlyIncorrectlyOriented"> Incorrectly Oriented Only</label>
+    <label><input type="checkbox" id="showOnlyNonConvexSpaces"> Non-Convex Spaces Only</label>
+    <label><input type="checkbox" id="showOnlyNonEnclosedSpaces"> Non-Enclosed Spaces Only</label>
+{% endif %}
+  </div>
+  <div id="info-panel">
+    <h4 id="info-name"></h4>
+    <div class="info-row" id="info-type-row"><span class="info-label">Surface Type:</span> <span id="info-type"></span></div>
+    <div class="info-row" id="info-space-row"><span class="info-label">Space:</span> <span id="info-space"></span></div>
+    <div class="info-row" id="info-spaceType-row"><span class="info-label">Space Type:</span> <span id="info-spaceType"></span></div>
+    <div class="info-row" id="info-thermalZone-row"><span class="info-label">Thermal Zone:</span> <span id="info-thermalZone"></span></div>
+    <div class="info-row" id="info-buildingStory-row"><span class="info-label">Building Story:</span> <span id="info-buildingStory"></span></div>
+    <div class="info-row" id="info-construction-row"><span class="info-label">Construction:</span> <span id="info-construction"></span></div>
+    <div class="info-row" id="info-boundary-row"><span class="info-label">Boundary:</span> <span id="info-boundary"></span></div>
+    <div class="info-row" id="info-boundaryObject-row"><span class="info-label">Adjacent To:</span> <span id="info-boundaryObject"></span></div>
+    <div class="info-row" id="info-sunExposure-row"><span class="info-label">Sun Exposure:</span> <span id="info-sunExposure"></span></div>
+    <div class="info-row" id="info-windExposure-row"><span class="info-label">Wind Exposure:</span> <span id="info-windExposure"></span></div>
+{% if include_geometry_diagnostics %}
+    <div class="info-row" id="info-convex-row"><span class="info-label">Convex:</span> <span id="info-convex"></span></div>
+    <div class="info-row" id="info-correctlyOriented-row"><span class="info-label">Correctly Oriented:</span> <span id="info-correctlyOriented"></span></div>
+    <div class="info-row" id="info-spaceConvex-row"><span class="info-label">Space Convex:</span> <span id="info-spaceConvex"></span></div>
+    <div class="info-row" id="info-spaceEnclosed-row"><span class="info-label">Space Enclosed:</span> <span id="info-spaceEnclosed"></span></div>
+{% endif %}
+  </div>
+</div>
+
+<script type="module">
+import * as THREE from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+
+const container = document.getElementById("viewer");
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xf5f5f5);
+
+const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 5000);
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(container.clientWidth, container.clientHeight);
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+container.appendChild(renderer.domElement);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+
+window.addEventListener('resize', () => {
+  camera.aspect = container.clientWidth / container.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(container.clientWidth, container.clientHeight);
+  requestRenderIfNotRequested();
+});
+
+scene.add(new THREE.AmbientLight(0x888888));
+scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 0.6));
+const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
+dirLight.position.set(1, 2, 1);
+scene.add(dirLight);
+
+// Collect all meshes for filtering and selection
+const sceneObjects = [];
+// Map mesh -> edge lines
+const objectEdges = new Map();
+// Map mesh -> back face object
+const backObjects = new Map();
+// Map back object -> front object (for selection)
+const backToFront = new Map();
+
+// Selection state
+const raycaster = new THREE.Raycaster();
+const mouse = new THREE.Vector2();
+let selectedObject = null;
+let originalMaterial = null;
+
+const selectedMaterial = new THREE.MeshStandardMaterial({
+  color: 0xffff00,
+  emissive: 0x444400,
+  side: THREE.DoubleSide
+});
+
+const infoPanel = document.getElementById('info-panel');
+
+let selectedBackWasVisible = false;
+
+function selectObject(obj, clickX, clickY) {
+  // Restore previous selection
+  if (selectedObject && originalMaterial) {
+    selectedObject.material = originalMaterial;
+    // Restore back object visibility
+    const prevBackObj = backObjects.get(selectedObject);
+    if (prevBackObj) {
+      prevBackObj.visible = selectedBackWasVisible;
+    }
+  }
+
+  if (obj) {
+    selectedObject = obj;
+    originalMaterial = obj.material;
+    obj.material = selectedMaterial;
+
+    // Hide back object so yellow selection shows through
+    const backObj = backObjects.get(obj);
+    if (backObj) {
+      selectedBackWasVisible = backObj.visible;
+      backObj.visible = false;
+    }
+
+    // Update info panel with all available details
+    const data = obj.userData;
+    const renderMode = document.getElementById('renderBy').value;
+    document.getElementById('info-name').textContent = data.name || 'Unknown';
+
+    // Map renderBy values to info row IDs
+    const renderByToRowId = {
+      'surfaceType': 'type',
+      'boundary': 'boundary',
+      'construction': 'construction',
+      'thermalZone': 'thermalZone',
+      'spaceType': 'spaceType',
+      'buildingStory': 'buildingStory',
+    };
+    const emphasizedRowId = renderByToRowId[renderMode];
+
+    // Helper to show/hide rows with emphasis
+    const setRow = (id, value) => {
+      const row = document.getElementById(`info-${id}-row`);
+      const span = document.getElementById(`info-${id}`);
+      if (value) {
+        span.textContent = value;
+        row.style.display = 'block';
+        row.classList.toggle('emphasized', id === emphasizedRowId);
+      } else {
+        row.style.display = 'none';
+        row.classList.remove('emphasized');
+      }
+    };
+
+    setRow('type', data.surfaceType);
+    setRow('space', data.spaceName);
+    setRow('spaceType', data.spaceTypeName);
+    setRow('thermalZone', data.thermalZoneName);
+    setRow('buildingStory', data.buildingStoryName);
+    setRow('construction', data.constructionName);
+    setRow('boundary', data.outsideBoundaryCondition);
+    setRow('boundaryObject', data.outsideBoundaryConditionObjectName);
+    setRow('sunExposure', data.sunExposure);
+    setRow('windExposure', data.windExposure);
+
+{% if include_geometry_diagnostics %}
+    // Diagnostic fields with pill badge styling
+    const setDiagRow = (id, value) => {
+      const row = document.getElementById(`info-${id}-row`);
+      const span = document.getElementById(`info-${id}`);
+      if (row && value !== undefined) {
+        span.innerHTML = `<span class="badge ${value ? 'badge-success' : 'badge-danger'}">${value}</span>`;
+        row.style.display = 'block';
+      } else if (row) {
+        row.style.display = 'none';
+      }
+    };
+
+    setDiagRow('convex', data.convex);
+    setDiagRow('correctlyOriented', data.correctlyOriented);
+    setDiagRow('spaceConvex', data.spaceConvex);
+    setDiagRow('spaceEnclosed', data.spaceEnclosed);
+{% endif %}
+
+    // Position panel to the right of click, with offset
+    const rect = container.getBoundingClientRect();
+    let left = clickX - rect.left + 15;
+    let top = clickY - rect.top - 10;
+
+    // Keep panel within container bounds
+    infoPanel.style.display = 'block';
+    const panelRect = infoPanel.getBoundingClientRect();
+    if (left + panelRect.width > container.clientWidth) {
+      left = clickX - rect.left - panelRect.width - 15;
+    }
+    if (top + panelRect.height > container.clientHeight) {
+      top = container.clientHeight - panelRect.height - 10;
+    }
+    if (top < 10) top = 10;
+
+    infoPanel.style.left = left + 'px';
+    infoPanel.style.top = top + 'px';
+  } else {
+    selectedObject = null;
+    originalMaterial = null;
+    infoPanel.style.display = 'none';
+  }
+}
+
+// Track mouse position for click vs drag detection
+let mouseDownPos = { x: 0, y: 0 };
+
+renderer.domElement.addEventListener('mousedown', (event) => {
+  mouseDownPos.x = event.clientX;
+  mouseDownPos.y = event.clientY;
+});
+
+renderer.domElement.addEventListener('click', (event) => {
+  // Ignore if this was a drag (camera orbit)
+  const dx = event.clientX - mouseDownPos.x;
+  const dy = event.clientY - mouseDownPos.y;
+  if (Math.abs(dx) > 5 || Math.abs(dy) > 5) return;
+
+  const rect = renderer.domElement.getBoundingClientRect();
+  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+  raycaster.setFromCamera(mouse, camera);
+
+  // Include both front and back objects for picking
+  const visibleObjects = sceneObjects.filter(obj => obj.visible);
+  const visibleBackObjects = [...backObjects.values()].filter(obj => obj.visible);
+  const allPickable = [...visibleObjects, ...visibleBackObjects];
+
+  const intersects = raycaster.intersectObjects(allPickable);
+
+  if (intersects.length > 0) {
+    let hitObj = intersects[0].object;
+    // If we hit a back object, resolve to its front object
+    if (backToFront.has(hitObj)) {
+      hitObj = backToFront.get(hitObj);
+    }
+    selectObject(hitObj, event.clientX, event.clientY);
+  } else {
+    selectObject(null);
+  }
+
+  requestRenderIfNotRequested();
+});
+
+function updateVisibility() {
+  const showFloors = document.getElementById('showFloors').checked;
+  const showWalls = document.getElementById('showWalls').checked;
+  const showRoofs = document.getElementById('showRoofs').checked;
+  const showWindows = document.getElementById('showWindows').checked;
+  const showDoors = document.getElementById('showDoors').checked;
+  const showShading = document.getElementById('showShading').checked;
+  const showPartitions = document.getElementById('showPartitions').checked;
+  const showEdges = document.getElementById('showEdges').checked;
+  const showStory = document.getElementById('showStory').value;
+
+  sceneObjects.forEach(obj => {
+    const surfaceType = obj.userData?.surfaceType || '';
+    const storyName = obj.userData?.buildingStoryName || '';
+    let visible = true;
+
+    // Filter by surface type
+    if (surfaceType === 'Floor') visible = showFloors;
+    else if (surfaceType === 'Wall') visible = showWalls;
+    else if (surfaceType === 'RoofCeiling') visible = showRoofs;
+    else if (surfaceType.includes('Window') || surfaceType.includes('Skylight') || surfaceType.includes('TubularDaylight') || surfaceType === 'GlassDoor') visible = showWindows;
+    else if (surfaceType.includes('Door')) visible = showDoors;
+    else if (surfaceType.includes('Shading')) visible = showShading;
+    else if (surfaceType === 'InteriorPartitionSurface') visible = showPartitions;
+
+    // Filter by story
+    if (visible && showStory && storyName !== showStory) {
+      visible = false;
+    }
+
+{% if include_geometry_diagnostics %}
+    // Geometry diagnostic filters
+    const showOnlyNonConvexSurfaces = document.getElementById('showOnlyNonConvexSurfaces').checked;
+    const showOnlyIncorrectlyOriented = document.getElementById('showOnlyIncorrectlyOriented').checked;
+    const showOnlyNonConvexSpaces = document.getElementById('showOnlyNonConvexSpaces').checked;
+    const showOnlyNonEnclosedSpaces = document.getElementById('showOnlyNonEnclosedSpaces').checked;
+
+    if (visible && showOnlyNonConvexSurfaces && obj.userData.convex !== false) {
+      visible = false;
+    }
+    if (visible && showOnlyIncorrectlyOriented && obj.userData.correctlyOriented !== false) {
+      visible = false;
+    }
+    if (visible && showOnlyNonConvexSpaces && obj.userData.spaceConvex !== false) {
+      visible = false;
+    }
+    if (visible && showOnlyNonEnclosedSpaces && obj.userData.spaceEnclosed !== false) {
+      visible = false;
+    }
+{% endif %}
+
+    obj.visible = visible;
+
+    // Sync edge visibility
+    const edges = objectEdges.get(obj);
+    if (edges) {
+      edges.visible = visible && showEdges;
+    }
+
+    // Sync back object visibility
+    const backObj = backObjects.get(obj);
+    if (backObj) {
+      backObj.visible = visible;
+    }
+  });
+
+  requestRenderIfNotRequested();
+}
+
+// Add event listeners to checkboxes and dropdowns
+['showFloors', 'showWalls', 'showRoofs', 'showWindows', 'showDoors', 'showShading', 'showPartitions', 'showEdges'].forEach(id => {
+  document.getElementById(id).addEventListener('change', updateVisibility);
+});
+document.getElementById('showStory').addEventListener('change', updateVisibility);
+{% if include_geometry_diagnostics %}
+['showOnlyNonConvexSurfaces', 'showOnlyIncorrectlyOriented', 'showOnlyNonConvexSpaces', 'showOnlyNonEnclosedSpaces'].forEach(id => {
+  document.getElementById(id).addEventListener('change', updateVisibility);
+});
+{% endif %}
+
+// Color definitions for render modes
+const surfaceTypeColors = {
+  'Floor': 0x808080, 'Wall': 0xccb266, 'RoofCeiling': 0x994c4c,
+  'Window': 0x66b2cc, 'GlassDoor': 0x66b2cc, 'Skylight': 0x66b2cc,
+  'TubularDaylightDome': 0x66b2cc, 'TubularDaylightDiffuser': 0x66b2cc,
+  'Door': 0x99854c, 'OverheadDoor': 0x99854c,
+  'SiteShading': 0x4b7c95, 'BuildingShading': 0x714c99, 'SpaceShading': 0x4c6eb2,
+  'InteriorPartitionSurface': 0x9ebc8f, 'AirWall': 0x66b2cc,
+};
+const surfaceTypeColorsInt = {
+  'Floor': 0xbfbfbf, 'Wall': 0xebe2c5, 'RoofCeiling': 0xca9595,
+  'Window': 0xc0e2eb, 'GlassDoor': 0xc0e2eb, 'Skylight': 0xc0e2eb,
+  'TubularDaylightDome': 0xc0e2eb, 'TubularDaylightDiffuser': 0xc0e2eb,
+  'Door': 0xcabc95, 'OverheadDoor': 0xcabc95,
+  'SiteShading': 0xbbd1dc, 'BuildingShading': 0xd8cbe5, 'SpaceShading': 0xb7c5e0,
+  'InteriorPartitionSurface': 0xd5e2cf, 'AirWall': 0xc0e2eb,
+};
+const boundaryColors = {
+  'Surface': 0x009900, 'Adiabatic': 0xff0000, 'Space': 0xff0000,
+  'Outdoors': 0xa3cccc, 'Outdoors_Sun': 0x28cccc, 'Outdoors_Wind': 0x099fa2, 'Outdoors_SunWind': 0x4477a1,
+  'Ground': 0xccb77a, 'Foundation': 0x751e7a,
+  'OtherSideCoefficients': 0x3f3f3f, 'OtherSideConditionsModel': 0x99004c,
+};
+
+// Generate consistent color from string (for dynamic values like thermal zones)
+function stringToColor(str) {
+  if (!str) return 0xcccccc;
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  // Generate HSL with good saturation and lightness
+  const h = Math.abs(hash) % 360;
+  return new THREE.Color(`hsl(${h}, 65%, 55%)`).getHex();
+}
+
+// Cache for dynamic colors
+const dynamicColors = {};
+function getDynamicColor(category, name) {
+  const key = `${category}_${name}`;
+  if (!dynamicColors[key]) {
+    dynamicColors[key] = stringToColor(name);
+  }
+  return dynamicColors[key];
+}
+
+function getColorsForObject(obj, renderMode) {
+  const data = obj.userData;
+  let colorExt, colorInt;
+
+  switch (renderMode) {
+    case 'surfaceType':
+      colorExt = surfaceTypeColors[data.surfaceType] ?? 0xcccccc;
+      colorInt = surfaceTypeColorsInt[data.surfaceType] ?? 0xeeeeee;
+      break;
+    case 'boundary':
+      const bc = data.outsideBoundaryCondition || 'Outdoors';
+      // Combine sun/wind exposure for outdoor surfaces
+      let boundaryKey = bc;
+      if (bc === 'Outdoors') {
+        const sun = data.sunExposure === 'SunExposed';
+        const wind = data.windExposure === 'WindExposed';
+        if (sun && wind) boundaryKey = 'Outdoors_SunWind';
+        else if (sun) boundaryKey = 'Outdoors_Sun';
+        else if (wind) boundaryKey = 'Outdoors_Wind';
+      }
+      colorExt = boundaryColors[boundaryKey] ?? boundaryColors[bc] ?? 0xcccccc;
+      colorInt = colorExt;
+      break;
+    case 'construction':
+      colorExt = getDynamicColor('construction', data.constructionName);
+      colorInt = colorExt;
+      break;
+    case 'thermalZone':
+      colorExt = getDynamicColor('thermalZone', data.thermalZoneName);
+      colorInt = colorExt;
+      break;
+    case 'spaceType':
+      colorExt = getDynamicColor('spaceType', data.spaceTypeName);
+      colorInt = colorExt;
+      break;
+    case 'buildingStory':
+      colorExt = getDynamicColor('buildingStory', data.buildingStoryName);
+      colorInt = colorExt;
+      break;
+    default:
+      colorExt = 0xcccccc;
+      colorInt = 0xeeeeee;
+  }
+  return { colorExt, colorInt };
+}
+
+function updateRenderMode() {
+  const renderMode = document.getElementById('renderBy').value;
+  sceneObjects.forEach(obj => {
+    const { colorExt, colorInt } = getColorsForObject(obj, renderMode);
+    obj.material.color.setHex(colorExt);
+    const backObj = backObjects.get(obj);
+    if (backObj) {
+      backObj.material.color.setHex(colorInt);
+    }
+  });
+
+  requestRenderIfNotRequested();
+}
+
+document.getElementById('renderBy').addEventListener('change', updateRenderMode);
+
+const gltfData = {{ gltf_data | tojson(indent=indent) }};
+
+const loader = new GLTFLoader();
+loader.parse(
+  JSON.stringify(gltfData),
+  "",
+  (gltf) => {
+    scene.add(gltf.scene);
+
+    // Collect all meshes with userData for filtering
+    const renderMode = document.getElementById('renderBy').value;
+    const edgeMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
+
+    gltf.scene.traverse(obj => {
+      if (obj.isMesh && obj.userData?.surfaceType) {
+        sceneObjects.push(obj);
+
+        const { colorExt, colorInt } = getColorsForObject(obj, renderMode);
+
+        // Front face material
+        obj.material = new THREE.MeshPhongMaterial({
+          color: colorExt,
+          specular: 0x222222,
+          shininess: 30,
+          side: THREE.FrontSide
+        });
+
+        // Create back face object with interior color
+        const backObj = obj.clone();
+        backObj.material = new THREE.MeshPhongMaterial({
+          color: colorInt,
+          specular: 0x222222,
+          shininess: 30,
+          side: THREE.BackSide
+        });
+        obj.parent.add(backObj);
+        backObjects.set(obj, backObj);
+        backToFront.set(backObj, obj);
+
+        // Create edge lines for this mesh
+        const edgesGeometry = new THREE.EdgesGeometry(obj.geometry);
+        const edges = new THREE.LineSegments(edgesGeometry, edgeMaterial);
+        edges.position.copy(obj.position);
+        edges.rotation.copy(obj.rotation);
+        edges.scale.copy(obj.scale);
+        obj.parent.add(edges);
+        objectEdges.set(obj, edges);
+      }
+    });
+
+    // Populate story dropdown with unique values
+    const storySelect = document.getElementById('showStory');
+    const storyNames = [...new Set(sceneObjects.map(o => o.userData?.buildingStoryName).filter(Boolean))].sort();
+    storyNames.forEach(name => {
+      const option = document.createElement('option');
+      option.value = name;
+      option.textContent = name;
+      storySelect.appendChild(option);
+    });
+
+    // Position camera using bounding box from GLTF metadata
+    const bbox = gltfData.scenes?.[0]?.extras?.boundingbox;
+
+    // Add axes (X=red, Y=green, Z=blue) - converted from OpenStudio Z-up to Three.js Y-up
+    const axisSize = bbox ? bbox.lookAtR * 4 : 10;
+
+    const xAxisGeometry = new THREE.BufferGeometry().setFromPoints([
+      new THREE.Vector3(0, 0, 0), new THREE.Vector3(axisSize, 0, 0)
+    ]);
+    scene.add(new THREE.Line(xAxisGeometry, new THREE.LineBasicMaterial({ color: 0xff0000 })));
+
+    // OpenStudio Y -> Three.js -Z
+    const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([
+      new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -axisSize)
+    ]);
+    scene.add(new THREE.Line(yAxisGeometry, new THREE.LineBasicMaterial({ color: 0x00ff00 })));
+
+    // OpenStudio Z -> Three.js Y
+    const zAxisGeometry = new THREE.BufferGeometry().setFromPoints([
+      new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, axisSize, 0)
+    ]);
+    scene.add(new THREE.Line(zAxisGeometry, new THREE.LineBasicMaterial({ color: 0x0000ff })));
+
+    // North axis (orange) if northAxis is set
+    const northAxis = gltfData.scenes?.[0]?.extras?.northAxis;
+    if (northAxis && northAxis !== 0) {
+      const northAxisRad = -northAxis * Math.PI / 180.0;
+      const northAxisGeometry = new THREE.BufferGeometry().setFromPoints([
+        new THREE.Vector3(0, 0, 0),
+        new THREE.Vector3(-Math.sin(northAxisRad) * axisSize, 0, -Math.cos(northAxisRad) * axisSize)
+      ]);
+      scene.add(new THREE.Line(northAxisGeometry, new THREE.LineBasicMaterial({ color: 0xff9933 })));
+    }
+
+    if (bbox) {
+      // Convert from OpenStudio coords (Z-up) to Three.js coords (Y-up)
+      const lookAt = new THREE.Vector3(bbox.lookAtX, bbox.lookAtZ, -bbox.lookAtY);
+      const radius = 2.5 * bbox.lookAtR;
+
+      // Position camera at an angle (similar to -30, 30 degrees)
+      const theta = -30 * Math.PI / 180;
+      const phi = 30 * Math.PI / 180;
+      camera.position.set(
+        radius * Math.cos(theta) * Math.cos(phi) + lookAt.x,
+        radius * Math.sin(phi) + lookAt.y,
+        -radius * Math.sin(theta) * Math.cos(phi) + lookAt.z
+      );
+
+      controls.target.copy(lookAt);
+      controls.update();
+    }
+
+    requestRenderIfNotRequested();
+  },
+  (e) => console.error(e)
+);
+
+// Render on demand (not every frame) to save CPU
+let renderRequested = false;
+
+function render() {
+  renderRequested = false;
+  controls.update();
+  renderer.render(scene, camera);
+}
+
+function requestRenderIfNotRequested() {
+  if (!renderRequested) {
+    renderRequested = true;
+    requestAnimationFrame(render);
+  }
+}
+
+// Re-render when controls change (orbit, zoom, pan)
+controls.addEventListener('change', requestRenderIfNotRequested);
+
+// Re-render on window resize
+window.addEventListener('resize', requestRenderIfNotRequested);
+</script>

effibemviewer-0.1.0/pyproject.toml

@@ -0,0 +1,169 @@
+[tool.poetry]
+name = "effibemviewer"
+version = "0.1.0"
+description = "A 3D viewer for OpenStudio building energy models using GLTF and Three.js"
+authors = ["Julien Marrec <contact@effibem.com>"]
+readme = "README.md"
+license = "MIT"
+classifiers = [
+    "Development Status :: 2 - Pre-Alpha",
+    "Intended Audience :: Developers",
+    "License :: OSI Approved :: MIT License",
+    "Natural Language :: English",
+    "Programming Language :: Python :: 3",
+    "Programming Language :: Python :: 3.10",
+    "Programming Language :: Python :: 3.11",
+    "Programming Language :: Python :: 3.12",
+]
+packages = [
+    { include = "effibemviewer" },
+    { include = "tests", format = "sdist" },
+]
+
+[tool.poetry.urls]
+Homepage = "https://effibem.com"
+Documentation = "https://jmarrec.github.io/effibemviewer"
+Repository = "https://github.com/jmarrec/effibemviewer"
+Changelog = "https://github.com/jmarrec/effibemviewer/blob/main/CHANGELOG.md"
+Issues = "https://github.com/jmarrec/effibemviewer/issues"
+
+[tool.poetry.scripts]
+effibemviewer = "effibemviewer.__main__:main"
+
+[tool.poetry.dependencies]
+python = ">=3.10,<4.0"
+openstudio = { version = "^3.4", allow-prereleases = true }
+jinja2 = "^3.1"
+
+[tool.poetry.group.dev.dependencies]
+black = "^26.1"
+isort = "^7.0"
+pytest = "^9.0"
+pytest-cov = "^6.0"
+mypy = "^1.19"
+flake8 = "^7.0"
+flake8-pyproject = "^1.2"
+twine = "^6.0"
+bump2version = "^1.0.1"
+
+[tool.poetry.group.doc.dependencies]
+mkdocs = "^1.6.1"
+mkdocs-include-markdown-plugin = "^7.2.1"
+mkdocs-material = "^9.7.1"
+mkdocstrings = "^1.0.2"
+mkdocstrings-python = "^2.0.1"
+mkdocs-autorefs = "^1.4.3"
+
+[tool.black]
+line-length = 120
+skip-string-normalization = true
+target-version = ['py310', 'py311', 'py312']
+include = '\.pyi?$'
+exclude = '''
+/(
+    \.eggs
+  | \.git
+  | \.hg
+  | \.mypy_cache
+  | \.tox
+  | \.venv
+  | _build
+  | buck-out
+  | build
+  | dist
+)/
+'''
+
+[tool.isort]
+multi_line_output = 3
+include_trailing_comma = true
+force_grid_wrap = 0
+use_parentheses = true
+ensure_newline_before_comments = true
+line_length = 120
+skip_gitignore = true
+
+[tool.flake8]
+max-line-length = 120
+extend-ignore = ["E402", "D100"]
+per-file-ignores = ["__init__.py:F401,D104"]
+docstring-convention = "google"
+exclude = [
+    ".git",
+    "__pycache__",
+    "setup.py",
+    "build",
+    "dist",
+    "docs",
+    "releases",
+    ".venv",
+    ".tox",
+    ".mypy_cache",
+    ".pytest_cache",
+    ".vscode",
+    ".github",
+]
+
+[tool.mypy]
+ignore_missing_imports = true
+
+[tool.coverage.run]
+# omit =
+
+[tool.coverage.report]
+exclude_lines = [
+    "pragma: no cover",
+    "def __repr__",
+    "if self.debug:",
+    "if settings.DEBUG",
+    "raise AssertionError",
+    "raise NotImplementedError",
+    "if 0:",
+    "if __name__ == .__main__.:",
+    "def main",
+]
+
+[build-system]
+requires = ["poetry-core>=1.0.0"]
+build-backend = "poetry.core.masonry.api"
+
+[tool.tox]
+env_list = ["py310", "py312", "format", "lint", "build"]
+
+[tool.tox.env_run_base]
+allowlist_externals = ["poetry"]
+pass_env = ["*"]
+set_env = {PYTHONPATH = "{tox_root}", PYTHONWARNINGS = "ignore"}
+commands_pre = [["poetry", "install", "--with", "dev"]]
+
+[tool.tox.env.py310]
+commands = [["poetry", "run", "pytest", "--cov=effibemviewer", "--cov-branch", "--cov-report=xml", "--cov-report=term-missing", "tests"]]
+
+[tool.tox.env.py312]
+commands = [["poetry", "run", "pytest", "--cov=effibemviewer", "--cov-branch", "--cov-report=xml", "--cov-report=term-missing", "tests"]]
+
+[tool.tox.env.format]
+commands = [
+    ["poetry", "run", "isort", "effibemviewer"],
+    ["poetry", "run", "black", "effibemviewer", "tests"]
+]
+
+[tool.tox.env.lint]
+commands = [
+    ["poetry", "run", "flake8", "effibemviewer", "tests"],
+    ["poetry", "run", "mypy", "effibemviewer", "tests"]
+]
+
+[tool.tox.env.build]
+commands_pre = [["poetry", "install", "--with", "dev,doc"]]
+commands = [
+    ["poetry", "build"],
+    ["poetry", "run", "mkdocs", "build"],
+    ["poetry", "run", "twine", "check", "dist/*"]
+]
+
+[tool.tox.gh-actions]
+python = """
+    3.10: py310
+    3.12: py312, format, lint, build
+"""

effibemviewer-0.1.0/tests/test_gltf.py

@@ -0,0 +1,12 @@
+#!/usr/bin/env python
+"""Tests for `effibemviewer` gltf."""
+
+import openstudio
+
+from effibemviewer import create_example_model
+
+
+def test_create_example_model():
+    """Test creating an example OpenStudio model."""
+    model = create_example_model(include_geometry_diagnostics=True)
+    assert isinstance(model, openstudio.model.Model)