123d9fc5a8
stylelint 도 html-validate 도 "var(--x) 를 썼는데 --x 가 어디에도 없다"를 잡지 못한다. 미정의 변수는 선언 전체를 무효로 만드는데 콘솔 에러가 없어 조용히 남는다. 검사기를 심자마자 v0.9.1 의 실제 결함이 나왔다. 게이트 신설 - tools/integrity.mjs — L0 무결성. CSS 커스텀 프로퍼티 참조, 상대경로, 한글 조판 필수 규칙(keep-all·한글 폰트 지정), 슬롭 지문, 스크롤 리스너를 검사. verify.mjs 체인에 편입해 실패 시 배포를 막는다. 폴백이 있는 var(--x, 기본값) 은 선택적 주입이므로 미정의로 세지 않는다. - tools/showcase-audit.mjs — 320/390/768/1440 실렌더 감사. 가로 스크롤·오버플로· 컨트롤 줄바꿈·대비 AA·왼쪽 인셋·h1 개수·히어로 줄 수·깨진 이미지·콘솔 에러. 반투명 배경을 합성해 대비를 재고, WebGL 페이지를 위해 swiftshader 로 렌더한다. - html-validate 대상을 두 페이지에서 public/work 전체로 넓혔다. 수리한 결함 - 미정의 변수 64건: --dur-fast·--radius-xs 가 정의된 적이 없어 cask-archive, cheongon-care, materia-interior 의 transition 선언이 통째로 무효였다. 새 토큰을 만들지 않고 기존 --dur-quick·--radius 로 매핑했다 — 토큰을 늘리면 radius 어휘가 4종이 되어 하드 게이트 3에 걸린다. - 한글 조판: lumina-optics·pulsegate·synapse-bci 가 word-break: keep-all 없이 IBM Plex Sans 만 지정해 한글이 시스템 기본으로 떨어지고 있었다. 같은 계열의 IBM Plex Sans KR 을 스택에 넣고 keep-all 을 추가했다. - 슬롭 지문 19건: text-transform: uppercase 로 만든 영문 대문자 eyebrow 를 한글 문장으로 바꾸고, 대문자용으로 잡아둔 넓은 자간과 모노 서체도 되돌렸다. - 하드 게이트 9: materia-interior/hannam-duplex.html 의 100vh → 100dvh. 이 파일은 어디서도 참조되지 않으면서 인라인 hex 까지 갖고 있어 토큰 기반으로 다시 썼다. - 접근성 11건: label 하나가 output 과 input 둘에 걸리던 것 5건(font-foundry, lumina-optics), dl > div > div > dt 4건(muwol-coffee), div 에 붙은 aria-label 2건(overtone-sound, pulsegate). 측정기 자체의 오류 둘도 고쳤다 — 눈에 보이지 않는 .sr-only 를 대비 실패로 잡던 것과, overflow-x: auto 상자 안의 넓은 표를 오버플로로 잡던 것. 재는 도구가 틀리면 통과도 실패도 의미가 없다.
427 lines
19 KiB
HTML
427 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Lumina Optics · Refraction Bench</title>
|
||
<meta
|
||
name="description"
|
||
content="A WebGL bench where a single beam meets a prism: refraction and dispersion computed per frame. Drag the prism, change the index."
|
||
/>
|
||
<meta property="og:title" content="Lumina Optics · Refraction Bench" />
|
||
<meta
|
||
property="og:description"
|
||
content="One beam, one prism, per-frame refraction."
|
||
/>
|
||
<meta property="og:type" content="website" />
|
||
<meta name="theme-color" content="#101214" />
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
|
||
/>
|
||
<link rel="stylesheet" href="./styles/main.css?v=2" />
|
||
<link
|
||
rel="icon"
|
||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23101214'/%3E%3Cpath d='M6 16h8m8 0h4M14 16l10-7v14z' fill='none' stroke='%23BFE8EE' stroke-width='1.4'/%3E%3C/svg%3E"
|
||
/>
|
||
</head>
|
||
|
||
<body>
|
||
<a class="skip" href="#main">Skip to main content</a>
|
||
|
||
<header class="site-head">
|
||
<div class="wrap head-inner">
|
||
<a class="wordmark" href="#main">lumina<span class="wordmark-dot">·</span>optics</a>
|
||
<nav class="nav" aria-label="Sections">
|
||
<a href="#bench">Bench</a>
|
||
<a href="#anatomy">Anatomy</a>
|
||
<a href="#mtf">MTF</a>
|
||
<a href="#contact">Contact</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main">
|
||
<!--
|
||
The bench. The product is light behaviour, so the hero IS the instrument:
|
||
one beam, one prism, per-frame refraction. Drag rotates; sliders change
|
||
the index and the dispersion — they are the two honest knobs a bench
|
||
has. Everything degrades to a static photograph.
|
||
-->
|
||
<section id="bench" class="hero" aria-labelledby="hero-h">
|
||
<div class="bench-stage reveal">
|
||
<canvas
|
||
id="gl"
|
||
aria-label="Interactive prism: a white beam enters from the left and exits as a spectrum. Drag to rotate the prism."
|
||
></canvas>
|
||
<img
|
||
class="bench-fallback"
|
||
src="./assets/prism-bench.webp"
|
||
alt="A glass prism on a dark optical breadboard splitting one collimated beam into a spectrum"
|
||
width="1440"
|
||
height="810"
|
||
/>
|
||
</div>
|
||
<div class="wrap hero-inner">
|
||
<div class="hero-text">
|
||
<p class="hero-kicker reveal">Refraction bench · WebGL</p>
|
||
<h1 id="hero-h" class="reveal" style="--delay: 60ms">
|
||
One beam,<br />bent honestly
|
||
</h1>
|
||
<p class="lead reveal" style="--delay: 120ms">
|
||
No photograph on this screen is doing the work — the prism is
|
||
being refracted right now, per frame, on your GPU. Drag it. Change
|
||
the index. The spectrum you see is the same arithmetic lens
|
||
designers use, minus the glasses.
|
||
</p>
|
||
</div>
|
||
<div class="hud reveal" style="--delay: 160ms">
|
||
<div class="hud-row">
|
||
<div class="hud-row-head"><label for="ior">Index of refraction</label><output id="ior-out" for="ior">1.52</output></div>
|
||
<input type="range" id="ior" min="1.45" max="2.20" step="0.01" value="1.52" />
|
||
</div>
|
||
<div class="hud-row">
|
||
<div class="hud-row-head"><label for="disp">Dispersion (Abbe ↓)</label><output id="disp-out" for="disp">0.18</output></div>
|
||
<input type="range" id="disp" min="0" max="0.6" step="0.01" value="0.18" />
|
||
</div>
|
||
<p class="hud-note" id="hud-note">Drag the prism to rotate · beam is collimated at 632.8 nm reference</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--
|
||
Anatomy — cut lens photography. Real glass, not renders.
|
||
-->
|
||
<section id="anatomy" class="section" aria-labelledby="anatomy-h">
|
||
<div class="wrap two">
|
||
<figure class="two-photo reveal">
|
||
<img
|
||
src="./assets/lens-section.webp"
|
||
alt="Cutaway of a precision lens: a stack of glass elements in a metal barrel, edge-lit so each surface shows a refraction line"
|
||
width="900"
|
||
height="1200"
|
||
loading="lazy"
|
||
/>
|
||
<figcaption>L-85 cutaway · 7 elements in 6 groups</figcaption>
|
||
</figure>
|
||
<div class="two-text">
|
||
<h2 id="anatomy-h">Glass decides<br />before software does</h2>
|
||
<p>
|
||
A lens is a chain of refractions, and every surface answers before
|
||
any firmware runs. Our L-85 uses two low-dispersion elements to
|
||
keep the spectrum you just dragged from fanning out across the
|
||
frame — dispersion corrected in glass, not in a profile.
|
||
</p>
|
||
<p class="muted">
|
||
The cutaway above is a physical section, milled for measurement.
|
||
Element count and spacing are measured from it, not from the
|
||
drawing.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--
|
||
MTF — the only curve that argues. Static, thin, honest:
|
||
measured at infinity, full aperture, both field directions.
|
||
-->
|
||
<section id="mtf" class="section band" aria-labelledby="mtf-h">
|
||
<div class="wrap mtf-grid">
|
||
<div class="mtf-text">
|
||
<h2 id="mtf-h">MTF, not adjectives</h2>
|
||
<p>
|
||
“Tack sharp” is not a specification. Contrast transfer at given
|
||
line pairs per millimetre is. These curves are measured on an
|
||
optical bench at full aperture — sagittal and meridional, out to
|
||
the corner.
|
||
</p>
|
||
<ul class="mtf-legend">
|
||
<li><span class="key key-solid" aria-hidden="true"></span>10 lp/mm · sagittal</li>
|
||
<li><span class="key key-solid-m" aria-hidden="true"></span>10 lp/mm · meridional</li>
|
||
<li><span class="key key-dash" aria-hidden="true"></span>30 lp/mm · sagittal</li>
|
||
<li><span class="key key-dash-m" aria-hidden="true"></span>30 lp/mm · meridional</li>
|
||
</ul>
|
||
</div>
|
||
<figure class="mtf-plot reveal">
|
||
<svg viewBox="0 0 560 320" role="img" aria-label="MTF curves: contrast stays above 0.85 at 10 lp/mm across the field; at 30 lp/mm it falls from 0.75 at center to 0.42 at the corner.">
|
||
<g class="chart-grid">
|
||
<line x1="48" y1="16" x2="48" y2="272" />
|
||
<line x1="48" y1="272" x2="536" y2="272" />
|
||
<line x1="48" y1="88" x2="536" y2="88" stroke-dasharray="2 6" />
|
||
<line x1="48" y1="160" x2="536" y2="160" stroke-dasharray="2 6" />
|
||
<line x1="48" y1="232" x2="536" y2="232" stroke-dasharray="2 6" />
|
||
<line x1="172" y1="16" x2="172" y2="272" stroke-dasharray="2 6" />
|
||
<line x1="296" y1="16" x2="296" y2="272" stroke-dasharray="2 6" />
|
||
<line x1="420" y1="16" x2="420" y2="272" stroke-dasharray="2 6" />
|
||
</g>
|
||
<g class="axis-labels">
|
||
<text x="40" y="20" text-anchor="end">1.0</text>
|
||
<text x="40" y="92" text-anchor="end">0.75</text>
|
||
<text x="40" y="164" text-anchor="end">0.5</text>
|
||
<text x="40" y="236" text-anchor="end">0.25</text>
|
||
<text x="48" y="292">center</text>
|
||
<text x="292" y="292" text-anchor="middle">image field (mm)</text>
|
||
<text x="536" y="292" text-anchor="end">corner 21.6</text>
|
||
</g>
|
||
<!-- 10 lp/mm sagittal: high, gentle fall -->
|
||
<polyline class="mtf mtf-10s" points="48,32 172,36 296,44 420,60 536,76" />
|
||
<!-- 10 lp/mm meridional -->
|
||
<polyline class="mtf mtf-10m" points="48,34 172,40 296,52 420,72 536,96" />
|
||
<!-- 30 lp/mm sagittal -->
|
||
<polyline class="mtf mtf-30s" points="48,84 172,96 296,120 420,160 536,196" />
|
||
<!-- 30 lp/mm meridional -->
|
||
<polyline class="mtf mtf-30m" points="48,90 172,108 296,140 420,186 536,232" />
|
||
</svg>
|
||
<figcaption>L-85 · f/1.8 · infinity focus · bench-measured 2026-07</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
<!--
|
||
Spec — with conditions.
|
||
-->
|
||
<section class="section" aria-labelledby="spec-h">
|
||
<div class="wrap">
|
||
<h2 id="spec-h" class="reveal">Specification</h2>
|
||
<div class="table-wrap reveal" style="--delay: 80ms">
|
||
<table>
|
||
<caption class="sr-only">L-85 specification — item, value, condition</caption>
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Item</th>
|
||
<th scope="col" class="num">Value</th>
|
||
<th scope="col">Condition</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><th scope="row">Focal length</th><td class="num">85 mm</td><td>nominal · ±1.5% at infinity</td></tr>
|
||
<tr><th scope="row">Aperture</th><td class="num">f/1.8 – f/16</td><td>9-blade · near-circular</td></tr>
|
||
<tr><th scope="row">Elements</th><td class="num">7 in 6</td><td>2 LD · measured from cutaway</td></tr>
|
||
<tr><th scope="row">Close focus</th><td class="num">0.62 m</td><td>1:7.2 magnification</td></tr>
|
||
<tr><th scope="row">Filter</th><td class="num">Ø 62 mm</td><td>brass, front-threaded</td></tr>
|
||
<tr><th scope="row">Weight</th><td class="num">438 g</td><td>without caps, with hood</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact -->
|
||
<section id="contact" class="section band contact" aria-labelledby="contact-h">
|
||
<div class="wrap contact-grid">
|
||
<h2 id="contact-h">Bench visits</h2>
|
||
<p>
|
||
We measure loaner samples for free and publish the curves —
|
||
manufacturers welcome or not. Bench time and MTF requests:
|
||
</p>
|
||
<a class="btn" href="mailto:bench@lumina.optics">bench@lumina.optics</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-foot">
|
||
<div class="wrap foot-inner">
|
||
<p>lumina optics</p>
|
||
<p class="foot-meta">measurements reproducible on request · bench cal. 2026-06</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="module">
|
||
/*
|
||
Refraction bench — three.js, one prism, two honest uniforms.
|
||
Budget note: three.module.js ≈ 165KB gzip. 예산 상향 — 이 페이지의
|
||
제품이 WebGL 자체다(데모 브리프 예산 상향 허용).
|
||
폴백: WebGL 실패 시 사진이 보이고 캔버스는 뜨지 않는다(이미 마크업에 있음).
|
||
*/
|
||
const canvas = document.getElementById("gl");
|
||
const fallback = document.querySelector(".bench-fallback");
|
||
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||
|
||
let gl = null;
|
||
try {
|
||
gl = canvas.getContext("webgl2", { antialias: true, alpha: true });
|
||
} catch (e) { /* fall through */ }
|
||
|
||
if (!gl) {
|
||
canvas.remove();
|
||
document.getElementById("hud-note").textContent =
|
||
"WebGL unavailable — showing the bench photograph instead.";
|
||
} else {
|
||
fallback.remove();
|
||
const THREE = await import("https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js");
|
||
|
||
const renderer = new THREE.WebGLRenderer({ canvas, context: gl, antialias: true, alpha: true });
|
||
renderer.setClearColor(0x000000, 0);
|
||
const DPR = Math.min(devicePixelRatio || 1, 1.5);
|
||
renderer.setPixelRatio(DPR);
|
||
|
||
const scene = new THREE.Scene();
|
||
const camera = new THREE.PerspectiveCamera(32, 1, 0.1, 50);
|
||
camera.position.set(0, 0, 9);
|
||
|
||
// ----- prism: triangular cross-section (CylinderGeometry, 3 segments)
|
||
const prismGeo = new THREE.CylinderGeometry(2.1, 2.1, 2.6, 3, 1, false);
|
||
prismGeo.rotateX(Math.PI / 2); // axis toward camera
|
||
prismGeo.rotateZ(Math.PI / 2); // flat edge up to the beam
|
||
|
||
const uniforms = {
|
||
uTime: { value: 0 },
|
||
uIor: { value: 1.52 },
|
||
uDisp: { value: 0.18 },
|
||
};
|
||
|
||
const prismMat = new THREE.ShaderMaterial({
|
||
uniforms,
|
||
transparent: true,
|
||
vertexShader: /* glsl */`
|
||
varying vec3 vN;
|
||
varying vec3 vView;
|
||
void main() {
|
||
vec4 mv = modelViewMatrix * vec4(position, 1.0);
|
||
vN = normalize(normalMatrix * normal);
|
||
vView = normalize(-mv.xyz);
|
||
gl_Position = projectionMatrix * mv;
|
||
}`,
|
||
fragmentShader: /* glsl */`
|
||
precision highp float;
|
||
varying vec3 vN;
|
||
varying vec3 vView;
|
||
uniform float uIor;
|
||
uniform float uDisp;
|
||
|
||
// wavelength ramp: violet → cyan → yellow → red
|
||
vec3 spectrum(float t) {
|
||
t = clamp(t, 0.0, 1.0);
|
||
return clamp(
|
||
vec3(
|
||
smoothstep(0.30, 0.00, t) + smoothstep(0.70, 1.00, t),
|
||
smoothstep(0.00, 0.35, t) - smoothstep(0.60, 1.00, t),
|
||
smoothstep(0.00, 0.30, t) - smoothstep(0.45, 0.75, t)
|
||
), 0.0, 1.0);
|
||
}
|
||
|
||
void main() {
|
||
float ndv = abs(dot(normalize(vN), normalize(vView)));
|
||
// fresnel edge (schlick): rim is where refraction lives
|
||
float f = pow(1.0 - ndv, 3.0);
|
||
// refraction deflection grows with index
|
||
float bend = (uIor - 1.0) * ndv;
|
||
// dispersion: split position across the rim into wavelengths
|
||
float d = uDisp * bend;
|
||
vec3 col = spectrum(0.5 + (1.0 - ndv) * (0.6 + d * 4.0));
|
||
// glass body: near-black with faint interior glow
|
||
vec3 body = vec3(0.02, 0.025, 0.03) * (0.4 + ndv);
|
||
vec3 rim = col * f * 1.35;
|
||
float alpha = clamp(f * 0.95 + 0.06, 0.0, 1.0);
|
||
gl_FragColor = vec4(body + rim, alpha);
|
||
}`,
|
||
});
|
||
const prism = new THREE.Mesh(prismGeo, prismMat);
|
||
scene.add(prism);
|
||
|
||
// ----- beam: incoming line + dispersed fan (additive planes)
|
||
const beamGroup = new THREE.Group();
|
||
const mkBeam = (w, h, color1, color2, op) => {
|
||
const m = new THREE.Mesh(
|
||
new THREE.PlaneGeometry(w, h),
|
||
new THREE.ShaderMaterial({
|
||
transparent: true,
|
||
depthWrite: false,
|
||
blending: THREE.AdditiveBlending,
|
||
uniforms: { uOp: { value: op }, uC1: { value: new THREE.Color(color1) }, uC2: { value: new THREE.Color(color2) } },
|
||
vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }`,
|
||
fragmentShader: `
|
||
varying vec2 vUv; uniform float uOp; uniform vec3 uC1; uniform vec3 uC2;
|
||
void main(){
|
||
float a = smoothstep(0.0, 0.12, vUv.x) * smoothstep(1.0, 0.88, vUv.x);
|
||
float b = smoothstep(0.0, 0.5, vUv.y) * smoothstep(1.0, 0.5, vUv.y);
|
||
vec3 c = mix(uC1, uC2, vUv.x);
|
||
gl_FragColor = vec4(c, a * b * uOp);
|
||
}`,
|
||
})
|
||
);
|
||
return m;
|
||
};
|
||
const beamIn = mkBeam(9, 0.10, 0xdfe8ec, 0xffffff, 0.55);
|
||
beamIn.position.set(0, 1.45, -0.2);
|
||
beamGroup.add(beamIn);
|
||
const fan = mkBeam(9, 1.7, 0x8fd8e8, 0xf2b060, 0.30);
|
||
fan.position.set(-0.4, 0.35, -0.25);
|
||
fan.rotation.z = 0.085;
|
||
beamGroup.add(fan);
|
||
scene.add(beamGroup);
|
||
|
||
// ----- interaction
|
||
let dragging = false, lastX = 0, vel = 0.0016, rot = 0;
|
||
canvas.addEventListener("pointerdown", (e) => { dragging = true; lastX = e.clientX; canvas.setPointerCapture(e.pointerId); });
|
||
canvas.addEventListener("pointermove", (e) => {
|
||
if (!dragging) return;
|
||
const dx = e.clientX - lastX;
|
||
lastX = e.clientX;
|
||
rot += dx * 0.006;
|
||
vel = dx * 0.0006;
|
||
});
|
||
const end = () => (dragging = false);
|
||
canvas.addEventListener("pointerup", end);
|
||
canvas.addEventListener("pointercancel", end);
|
||
canvas.style.touchAction = "none";
|
||
|
||
const iorEl = document.getElementById("ior");
|
||
const dispEl = document.getElementById("disp");
|
||
const iorOut = document.getElementById("ior-out");
|
||
const dispOut = document.getElementById("disp-out");
|
||
const bind = (el, out, uni, fmt) =>
|
||
el.addEventListener("input", () => {
|
||
uni.value = parseFloat(el.value);
|
||
out.textContent = fmt(uni.value);
|
||
});
|
||
bind(iorEl, iorOut, uniforms.uIor, (v) => v.toFixed(2));
|
||
bind(dispEl, dispOut, uniforms.uDisp, (v) => v.toFixed(2));
|
||
|
||
// ----- sizing
|
||
const stage = canvas.parentElement;
|
||
function fit() {
|
||
const r = stage.getBoundingClientRect();
|
||
const h = Math.max(320, Math.min(r.height, 760));
|
||
renderer.setSize(r.width, h, false);
|
||
camera.aspect = r.width / h;
|
||
camera.updateProjectionMatrix();
|
||
}
|
||
fit();
|
||
new ResizeObserver(fit).observe(stage);
|
||
|
||
// ----- loop: paused offscreen, static under reduced motion
|
||
let visible = true, t0 = performance.now();
|
||
const io = new IntersectionObserver((en) => { visible = en[0].isIntersecting; });
|
||
io.observe(canvas);
|
||
|
||
function frame() {
|
||
if (!visible) { requestAnimationFrame(frame); return; }
|
||
const t = (performance.now() - t0) / 1000;
|
||
uniforms.uTime.value = t;
|
||
if (!dragging) { vel *= 0.98; rot += Math.max(0.0016, Math.abs(vel)) * Math.sign(vel || 1); }
|
||
prism.rotation.z = rot;
|
||
beamGroup.rotation.z = Math.sin(t * 0.4) * 0.01;
|
||
renderer.render(scene, camera);
|
||
if (!reduced) requestAnimationFrame(frame);
|
||
}
|
||
frame(); // reduced-motion: renders exactly one static frame
|
||
}
|
||
|
||
const io2 = new IntersectionObserver(
|
||
(entries) => {
|
||
for (const e of entries) {
|
||
if (!e.isIntersecting) continue;
|
||
e.target.classList.add("is-in");
|
||
io2.unobserve(e.target);
|
||
}
|
||
},
|
||
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
|
||
);
|
||
for (const el of document.querySelectorAll(".reveal")) io2.observe(el);
|
||
</script>
|
||
</body>
|
||
</html>
|