mirror of
https://github.com/IfcOpenShell/IfcOpenShell.git
synced 2026-08-09 09:21:46 +00:00
Dion Moult
13ec2be807
Users had no feedback during the seconds before/while a model streams. Add a top progress strip + caption driven by the streaming state: - "Loading model… N MB" while the critical metadata downloads (no chunks yet), - "Loading geometry — R / T chunks · N MB" as chunks go resident, - "Loaded — T chunks · N MB", then it hides. ViewportCore::streamingProgress(resident, total) sums chunk residency across models; main_web exports ifcv_chunks_resident_c / ifcv_chunks_total_c for shell.html to poll each RAF. The EM_JS range reader accumulates Module.__ifcvBytesLoaded so the caption can show MB downloaded. Shown only for streamed loads (?model= URL / picked file), not the embedded sample. 6/6 web smoke pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
185 lines
8.6 KiB
HTML
185 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>IfcViewer (web)</title>
|
|
<style>
|
|
html, body { margin: 0; height: 100%; background: #0f1117; color: #c8ccd6;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
|
|
#viewer-canvas { display: block; width: 100vw; height: 100vh; outline: none;
|
|
background: #1a1d24; }
|
|
/* Log overlay sits bottom-left and never eats pointer events (so it
|
|
can't block orbit drags over the canvas). It auto-scrolls to the
|
|
newest line. Capped small; collapses further once the app is live. */
|
|
#status { position: fixed; bottom: 8px; left: 12px;
|
|
max-width: min(60vw, 680px); max-height: 28vh; overflow-y: auto;
|
|
font-size: 11px;
|
|
font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
|
|
background: rgba(20,22,28,.78); padding: 6px 10px; border-radius: 4px;
|
|
white-space: pre-wrap; pointer-events: none; }
|
|
#status.ready { max-height: 4.5em; opacity: .5; }
|
|
#status.error { background: rgba(120,30,30,.85); color: #fff; }
|
|
/* Errors re-expand and re-opaque even after the ready-collapse. */
|
|
#status.ready.error { max-height: 28vh; opacity: 1; }
|
|
#open-btn { position: fixed; top: 8px; right: 12px; z-index: 10;
|
|
background: #2b6cb0; color: #fff; border: none; padding: 6px 12px;
|
|
border-radius: 4px; font-size: 12px; cursor: pointer; }
|
|
#open-btn:hover { background: #3182ce; }
|
|
#file-input { display: none; }
|
|
/* Streaming loading bar: a thin top progress strip + a centred caption.
|
|
Shown only while a network/file model streams; hidden once resident. */
|
|
#progress { position: fixed; top: 0; left: 0; right: 0; height: 3px;
|
|
background: rgba(43,108,176,.2); z-index: 20; display: none; }
|
|
#progress-fill { height: 100%; width: 0%; background: #3182ce;
|
|
transition: width .15s ease; }
|
|
#progress-text { position: fixed; top: 10px; left: 50%;
|
|
transform: translateX(-50%); z-index: 20; font-size: 12px;
|
|
background: rgba(20,22,28,.85); padding: 4px 12px; border-radius: 4px;
|
|
pointer-events: none; display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="viewer-canvas" width="1280" height="800"></canvas>
|
|
<div id="progress"><div id="progress-fill"></div></div>
|
|
<div id="progress-text"></div>
|
|
<button id="open-btn">Open .ifcview…</button>
|
|
<input id="file-input" type="file" accept=".ifcview">
|
|
<div id="status">Starting…</div>
|
|
<script>
|
|
// Emscripten Module hook: route stderr to the status overlay so any
|
|
// wgpu init failure (no WebGPU, canvas missing, etc.) is visible
|
|
// without opening devtools.
|
|
var statusEl = document.getElementById('status');
|
|
var Module = {
|
|
canvas: document.getElementById('viewer-canvas'),
|
|
// Keep the wasm runtime alive after main() returns so the
|
|
// Dawn-web RequestAdapter/RequestDevice promise callbacks
|
|
// (queued from main) actually land. Without this flag the
|
|
// runtime tears down at end-of-main and the callbacks never
|
|
// fire — symptom: adapter cb fires (synchronous-ish on the
|
|
// first JS tick) but device cb does not. EXIT_RUNTIME=0 in
|
|
// CMakeLists is the build-time half; this is the runtime half.
|
|
noExitRuntime: true,
|
|
print: function(t) { console.log(t); },
|
|
printErr: function(t) {
|
|
console.warn(t);
|
|
// Accumulate every stderr line so the init sequence is visible
|
|
// even when the wasm hangs partway. The first time something is
|
|
// printed we drop the "Starting…" placeholder.
|
|
if (statusEl.textContent === 'Starting…' ||
|
|
statusEl.textContent === 'wasm loaded — waiting for WebGPU') {
|
|
statusEl.textContent = '';
|
|
}
|
|
statusEl.textContent += t + '\n';
|
|
statusEl.scrollTop = statusEl.scrollHeight;
|
|
if (/fail|error|null/i.test(t)) statusEl.classList.add('error');
|
|
},
|
|
onRuntimeInitialized: function() {
|
|
statusEl.textContent = 'wasm loaded — waiting for WebGPU';
|
|
// RAF loop. Polls for Module._app_ptr (set by C once the wgpu
|
|
// device callback completes init) and only then drives the C
|
|
// tick. Living in shell.html means the loop is set up from a
|
|
// clean JS top-level, NOT nested inside Dawn-web's Promise.then
|
|
// chain — which is the configuration that stalls device-callback
|
|
// delivery (verified during web bring-up).
|
|
var collapsedOnce = false;
|
|
var urlLoadTried = false;
|
|
var modelUrl = new URLSearchParams(location.search).get('model');
|
|
function shellTick() {
|
|
if (Module._app_ptr && Module._raf_tick_c) {
|
|
// First time the app goes live, collapse the log overlay so it
|
|
// stops covering the viewport.
|
|
if (!collapsedOnce) { statusEl.classList.add('ready'); collapsedOnce = true; }
|
|
// ?model=URL streams a remote sidecar via HTTP Range once the app
|
|
// is live (one-shot). Same-origin needs no CORS; cross-origin URLs
|
|
// require the host to send CORS + Accept-Ranges headers.
|
|
if (!urlLoadTried && modelUrl && Module.ccall) {
|
|
urlLoadTried = true;
|
|
window.beginLoadProgress();
|
|
Module.ccall('load_sidecar_from_url_c', null, ['string'], [modelUrl]);
|
|
}
|
|
window.updateLoadProgress();
|
|
Module._raf_tick_c(Module._app_ptr);
|
|
}
|
|
requestAnimationFrame(shellTick);
|
|
}
|
|
requestAnimationFrame(shellTick);
|
|
}
|
|
};
|
|
if (!navigator.gpu) {
|
|
statusEl.textContent = 'navigator.gpu is missing — open in a browser with WebGPU enabled';
|
|
statusEl.classList.add('error');
|
|
}
|
|
|
|
// --- Streaming loading bar ------------------------------------------------
|
|
// Driven by the C-side progress exports (resident/total chunks) + the
|
|
// bytes-downloaded counter the EM_JS range reader maintains. Shown only for
|
|
// streamed loads (URL / picked file), not the tiny embedded sample.
|
|
var progEl = document.getElementById('progress');
|
|
var fillEl = document.getElementById('progress-fill');
|
|
var textEl = document.getElementById('progress-text');
|
|
var loadActive = false;
|
|
window.beginLoadProgress = function() {
|
|
loadActive = true;
|
|
Module.__ifcvBytesLoaded = 0;
|
|
fillEl.style.width = '0%';
|
|
progEl.style.display = 'block';
|
|
textEl.style.display = 'block';
|
|
textEl.textContent = 'Loading model…';
|
|
};
|
|
function endLoadProgress() { progEl.style.display = 'none'; textEl.style.display = 'none'; }
|
|
window.updateLoadProgress = function() {
|
|
if (!loadActive) return;
|
|
var R = Module._ifcv_chunks_resident_c ? Module._ifcv_chunks_resident_c() : 0;
|
|
var T = Module._ifcv_chunks_total_c ? Module._ifcv_chunks_total_c() : 0;
|
|
var mb = ((Module.__ifcvBytesLoaded || 0) / 1e6).toFixed(1);
|
|
if (T === 0) { // still fetching critical metadata
|
|
fillEl.style.width = '6%';
|
|
textEl.textContent = 'Loading model… ' + mb + ' MB';
|
|
return;
|
|
}
|
|
var pct = Math.round(100 * R / T);
|
|
fillEl.style.width = pct + '%';
|
|
if (R >= T) { // all chunks resident → done
|
|
textEl.textContent = 'Loaded — ' + T + ' chunks · ' + mb + ' MB';
|
|
loadActive = false;
|
|
setTimeout(endLoadProgress, 900);
|
|
return;
|
|
}
|
|
textEl.textContent = 'Loading geometry — ' + R + ' / ' + T + ' chunks · ' + mb + ' MB';
|
|
};
|
|
|
|
// File-browse loading (#88, byte-range). The picked File object is stashed
|
|
// on Module.__ifcvFile and load_sidecar_from_blob_c reads it lazily via
|
|
// Blob.slice — the file is NOT copied into the wasm heap, so a 500 MB
|
|
// sidecar stays in the browser File object and only chunk-sized slices
|
|
// ever cross into wasm. No drag-drop: that needs an X11 drag source (a
|
|
// file manager), which a minimal WM may not provide; the native file
|
|
// chooser this button opens is WM-independent.
|
|
var openBtn = document.getElementById('open-btn');
|
|
var fileInput = document.getElementById('file-input');
|
|
openBtn.addEventListener('click', function() { fileInput.click(); });
|
|
fileInput.addEventListener('change', function(ev) {
|
|
var f = ev.target.files && ev.target.files[0];
|
|
if (!f) return;
|
|
if (!Module._load_sidecar_from_blob_c) {
|
|
statusEl.textContent += 'viewer not ready yet — wait for WebGPU init\n';
|
|
return;
|
|
}
|
|
try {
|
|
Module.__ifcvFile = f; // kept alive for lazy Blob.slice reads
|
|
window.beginLoadProgress();
|
|
Module._load_sidecar_from_blob_c();
|
|
} catch (e) {
|
|
statusEl.textContent += 'load failed: ' + e + '\n';
|
|
statusEl.classList.add('error');
|
|
}
|
|
fileInput.value = ''; // let the same file be re-picked
|
|
});
|
|
</script>
|
|
<!-- IfcViewerWeb.js is emitted alongside this shell by the emcc build;
|
|
`--shell-file` injects this HTML around it. -->
|
|
{{{ SCRIPT }}}
|
|
</body>
|
|
</html>
|