At its core, the ViewerFrame is the single, rendered image you see on your screen at any given moment. Think of it as a digital photograph taken by a virtual camera inside your 3D scene.
Pro Tip: Monitor your frame delta time (the time between ViewerFrames). In a “hot” system, this should be under 16ms for 60 FPS.
Create macros that switch mode AND force a refresh in one action. Example AutoHotkey script for Blender:
^!w:: ; Ctrl+Alt+W for Wireframe
Send, z ; Open mode pie menu
Sleep, 50
Send, w ; Select Wireframe
Send, F12 ; Force full viewport refresh (custom mapping)
return
Idempotent activation (pseudo-JS):
let currentInitId = null;
async function activateMode(instanceId, mode)
const initId = Symbol();
currentInitId = initId;
// prepare resources
await prepareResourcesFor(mode);
if (currentInitId !== initId) return; // stale, abort
// atomically set mode in store
store.setMode(instanceId, mode);
// finalize
finalizeModeActivation(instanceId, mode);
Subscription cleanup:
function mountViewer()
const unsub = eventBus.subscribe('mode-change', handler);
onUnmount(() => unsub());
Versioned async operations:
let modeVersion = 0;
function setModeAsync(mode)
const v = ++modeVersion;
return doAsyncSetup(mode).then(result =>
if (v !== modeVersion) return; // ignore stale
applyMode(result);
);
Debounce/coalesce:
const setModeDebounced = debounce((m) => setMode(m), 150);
Unique instance IDs:
const instanceId = `viewer-$++globalViewerCounter`;
function refreshViewerFrame() const iframe = document.getElementById('viewerFrame'); const loader = document.getElementById('loadingIndicator');loader.style.display = 'block'; iframe.src = iframe.src;
iframe.onload = () => loader.style.display = 'none'; ;viewerframe mode refresh hot
For those visualizing large point clouds (LiDAR) or real-time video inference, the ViewerFrame must refresh as new data streams in. A "hot" pipeline uses GPU direct memory access (DMA) to push frames without CPU bottlenecking.