// Act IV — THE VALIDATION
// God-mode redesign 2026-04-28 (revision 2): beat-swap, 4 panels.
// Added the actual primary-research process photos Svetlana captured at
// Drexel/TJU + the CLO3D end-product reveal of the pink playsuit.
//
// b0 Archives — TJU + Drexel partner cards
// b1 Method — 3 steps WITH the actual process photos
// b2 End Product — physical garment → CLO3D digital twin
// b3 Outcome punctum + bridge
//
// Closes rubric Cat 3 — primary research informed product design.
// Globals are VAL_-prefixed (was the source of the 2026-04-27 namespace bug).
const VAL_PARTNERS = [
{
name: 'Thomas Jefferson University',
where: 'Philadelphia · University Archives',
note: 'Site-visits and hands-on garment work. Measurement, documentation, construction analysis under archive supervision.',
},
{
name: 'Drexel University · Fox Historic Costume Collection',
where: 'Philadelphia · Fox Collection',
note: 'Curator-led access to a historic costume collection. The reconstruction workflow tested here became the VintaVerse pipeline.',
},
];
// Method steps now carry their actual process photographs taken on-site at
// Drexel/TJU during Svetlana's primary-research visits.
const VAL_METHOD = [
{
n: '01',
title: 'Measure',
body: 'Precise measurements taken in person under curator supervision. Cotton gloves, no tools that damage fiber.',
photo: 'assets/validation-measure.webp',
photoAlt: 'Hands in blue archival gloves measuring a pink rayon playsuit at the archive',
},
{
n: '02',
title: 'Reconstruct',
body: 'Garment documented flat with construction notes. Ribbon lengths, pleat depths, button geometry — all logged for the digital build.',
photo: 'assets/validation-laidout.webp',
photoAlt: 'The pink playsuit laid out flat with measuring tape across the bodice',
},
{
n: '03',
title: 'Validate',
body: 'Curator signs off on the reconstruction. Technical accuracy locked. Institutional credibility earned.',
photo: 'assets/pink-playsuit-clo3d.webp',
photoAlt: 'CLO3D digital twin reconstruction of the pink playsuit, validated by archive curator',
},
];
function ValidationOpenPanel({ vis }) {
const eased = 1 - Math.pow(1 - vis, 3);
return (
Method · the workflow that came out of the fieldDrexel · TJU · 2025–2026
Measure. Reconstruct. Validate.
{VAL_METHOD.map((m) => (
{/* Process photo from the field */}
{/* Step badge over the photo */}
STEP · {m.n}
{/* Caption */}
{m.title}
{m.body}
))}
Photos · Drexel Fox Historic Costume Collection · Shalumova field study
);
}
// Live 3D viewer for the pink-playsuit GLB. We tried Google's
// custom element first but React 18 + babel-standalone wasn't registering
// boolean attributes reliably and the element silently failed. Direct Three.js
// works around all of that.
//
// Static fallback (added 2026-04-29): Svet hit "three context failed" once
// during a rehearsal walk. WebGL context loss is intermittent — driver state,
// tab visibility, GPU memory pressure can all kill a context. If init fails,
// the GLB load errors, or the context goes lost mid-flight, we swap to the
// static CLO3D PNG (assets/pink-playsuit-clo3d.webp) so the slide always
// shows the digital twin. A small note appears so it's clear this is the
// fallback, with a button to retry the live viewer.
function Playsuit3DViewer() {
const containerRef = window.useRef(null);
const [ready, setReady] = window.useState(!!window.__threeReady);
const [errMsg, setErrMsg] = window.useState(null);
const [retryNonce, setRetryNonce] = window.useState(0);
window.useEffect(() => {
if (ready) return;
const onReady = () => setReady(true);
window.addEventListener('three-ready', onReady);
return () => window.removeEventListener('three-ready', onReady);
}, [ready]);
window.useEffect(() => {
if (!ready) return;
if (errMsg) return; // already in fallback mode — don't try again until retry
const container = containerRef.current;
if (!container) return;
const THREE = window.THREE;
const GLTFLoader = window.GLTFLoader;
const OrbitControls = window.OrbitControls;
const MeshoptDecoder = window.MeshoptDecoder;
if (!THREE || !GLTFLoader) {
setErrMsg('Three.js not loaded');
return;
}
let w = container.clientWidth;
let h = container.clientHeight;
if (w < 50 || h < 50) {
// figure may not have laid out yet — wait one frame
requestAnimationFrame(() => {
w = container.clientWidth;
h = container.clientHeight;
});
}
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(28, w / h, 0.05, 100);
camera.position.set(0, 0.95, 3.4);
// WebGLRenderer creation can throw if WebGL is unavailable, blocked,
// or the GPU is in a bad state. Guard so the deck never crashes.
let renderer;
try {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
failIfMajorPerformanceCaveat: false, // allow software fallback
powerPreference: 'default',
});
} catch (e) {
console.error('WebGLRenderer init failed', e);
setErrMsg('WebGL unavailable — showing static render');
return;
}
renderer.setSize(w, h);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.05;
renderer.setClearColor(0x000000, 0);
container.appendChild(renderer.domElement);
// If the browser drops the context (tab background, GPU pressure, driver
// crash), swap to the static fallback. preventDefault tells the browser
// we're handling it ourselves.
const onContextLost = (e) => {
e.preventDefault();
console.warn('WebGL context lost — switching to static fallback');
setErrMsg('WebGL context lost — showing static render');
};
renderer.domElement.addEventListener('webglcontextlost', onContextLost, false);
// Lighting — three-point setup so the white-ish dress reads with depth
scene.add(new THREE.AmbientLight(0xffffff, 0.55));
const key = new THREE.DirectionalLight(0xffffff, 1.4);
key.position.set(2.4, 4.0, 3.0);
scene.add(key);
const fill = new THREE.DirectionalLight(0xc0d4ff, 0.55);
fill.position.set(-3.0, 2.0, 2.0);
scene.add(fill);
const rim = new THREE.DirectionalLight(0xffe2b0, 0.4);
rim.position.set(0, 1.5, -3.0);
scene.add(rim);
// Model
const loader = new GLTFLoader();
if (MeshoptDecoder) loader.setMeshoptDecoder(MeshoptDecoder);
let model = null;
let raf = 0;
let disposed = false;
loader.load(
'assets/pink-playsuit-1930.glb',
(gltf) => {
if (disposed) return;
model = gltf.scene;
// Center horizontally + vertically; place model so its feet sit at y=0
const box = new THREE.Box3().setFromObject(model);
const size = box.getSize(new THREE.Vector3());
const center = box.getCenter(new THREE.Vector3());
model.position.x -= center.x;
model.position.z -= center.z;
model.position.y -= box.min.y;
// Aim camera at the figure's mid-height
camera.lookAt(0, size.y * 0.5, 0);
// Scale so the figure roughly fits a 1.7m frame regardless of source
const targetH = 1.7;
if (size.y > 0) {
const k = targetH / size.y;
model.scale.setScalar(k);
}
scene.add(model);
},
undefined,
(err) => {
if (disposed) return;
console.error('GLB load error', err);
setErrMsg('Could not load 3D model');
}
);
// Orbit controls — auto rotate, soft damp
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.85; // ~5°/sec; slow + cinematic
controls.target.set(0, 0.85, 0);
controls.minDistance = 1.6;
controls.maxDistance = 6.0;
controls.enablePan = false;
controls.update();
const tick = () => {
controls.update();
renderer.render(scene, camera);
raf = requestAnimationFrame(tick);
};
tick();
const onResize = () => {
const nw = container.clientWidth;
const nh = container.clientHeight;
if (nw < 50 || nh < 50) return;
renderer.setSize(nw, nh);
camera.aspect = nw / nh;
camera.updateProjectionMatrix();
};
window.addEventListener('resize', onResize);
const ro = new ResizeObserver(onResize);
ro.observe(container);
return () => {
disposed = true;
cancelAnimationFrame(raf);
window.removeEventListener('resize', onResize);
ro.disconnect();
controls.dispose();
renderer.domElement.removeEventListener('webglcontextlost', onContextLost);
// forceContextLoss helps free the WebGL context immediately on unmount
try { renderer.forceContextLoss(); } catch {}
renderer.dispose();
if (renderer.domElement.parentNode === container) {
container.removeChild(renderer.domElement);
}
};
}, [ready, retryNonce, errMsg]);
// Fallback render: static CLO3D PNG. Same aspect / position as the live
// viewer would occupy, so the layout doesn't shift. Includes a quiet
// retry affordance — Svet can tap to attempt the live viewer again.
if (errMsg) {
return (
);
}
return (
);
}
// Panel 2 — End Product. The physical garment from the archive →
// CLO3D digital twin. The pink playsuit is the SAME object Svetlana
// measured in the photos on the previous panel. This is the proof.
function ValidationProductPanel({ vis }) {
const eased = 1 - Math.pow(1 - vis, 3);
const PHYSICAL_GRADE = 'sepia(0.06) saturate(0.95) contrast(1.04) brightness(0.99)';
const TWIN_GRADE = 'sepia(0.04) saturate(0.92) contrast(1.06) brightness(1.02)';
return (
Learning outcomes were measured comparing 3D interaction to physical archive access.
Students showed higher engagement and deeper understanding when the archive came to them
as an inspectable digital twin — without losing the curator’s authority.
{/* Step badge over the photo */}
{/* Caption */}
