behind_glass/docs/qa-photo-glass-distance-2026-10-06/report.md

사진–유리 거리 조절

2026-10-06 사용자 요청: 고방유리 표면과 시점에 더해, 뒤 사진과 유리 사이 거리를 조절한다. 사진의 가장 앞쪽 표면을 기준으로 하며 사진의 확대·팬 값은 유지한다.

구현

• index.html: 주요 조절에 사진–유리 거리 슬라이더를 추가했다. 범위 0–100%, 기본값 0%. 실측 cm/m가 아닌 상대 조절값이다.
• src/constants/glass.ts: PHOTO_GLASS_DISTANCE에 장면 간격 최소 0.04 / 최대 0.60을 정의했다. 0%는 기존 근접 배치와 같다.
• src/main.ts: 고정 간격을 상태 photoGlassGap으로 교체했다. 기존 contentBaseZ()와 applyFraming()을 재사용해 baseZ = glassZ - gap - (maxDepth - depthBias) * depthScale로 배치한다. RGB 평면과 Depth mesh에 같은 위치·스케일을 적용하고, uSourceZ 및 WindowReveal도 함께 갱신한다. 기존 원근 크기 보정을 재사용하며 사진 확대·팬 값을 바꾸지 않는다. 유리 위치·Grid·표면 법선·광택·시점 설정도 바꾸지 않는다.
• 사진 교체와 AI depth 완료는 설정된 간격을 사용해 다시 배치한다. 사진 구도 초기화와 시점 초기화는 거리 조절을 초기화하지 않는다.
• 기존 region/history 시그니처에 물체 배치가 이미 포함되어 있어 추가 초기화 경로를 만들지 않았다. 광학 셰이더와 새 의존성도 추가하지 않았다.
• scripts/test-window-reveal-coverage.mjs: 기존 프레임 가림 검사를 거리 양 끝값으로 확장했다.

실제 화면 검증

Windows Codex in-app browser에서 먼저 수작업 샘플을 No Glass로 확인한 후 Final을 비교했다. 샘플 depth는 수작업 테스트이며 AI 추정 또는 실측값이 아니다.

거리	앞쪽 간격	기준 평면 Z	가장 앞쪽 Z
0%	0.040	0.315	0.560
50%	0.320	0.035	0.280
100%	0.600	−0.245	0.000

유리 Z는 0.600, 위 표의 Depth Scale은 0.25다. 가장 앞쪽 Z와 기준 평면 Z가 함께 감소하고 표면 간 상대 깊이는 유지된다. 거리를 늘려도 정면 사진 크기는 기존 원근 보정으로 거의 유지된다. Depth가 있는 앞쪽 표면의 투영은 거리 변경에 따라 소폭 달라질 수 있다.

• No Glass의 100%에서 Camera X 0→약 0.052로 드래그했다. 코 투영 X 520.100→520.088, 왼눈 493.698→494.076, 몸 453.812→454.658px로 깊이에 따른 서로 다른 시차가 남는다.
• 100% / Depth Scale 0.4: 앞쪽 Z 0.000 / 간격 0.600. 0% / Depth Scale 0: 전체 표면 Z 0.560 / 간격 0.040. 유리 관통 없음.
• 샘플과 dog1의 같은 사진·구도·Grid 20 / 굴곡 +1 / 광택 0.3에서 0%와 100%를 비교했다. 먼 배치에서 사진 조각의 굴절 이동과 반복이 더 커진다. dog1의 50%도 저장했다.
• 거리 50% / 확대 1.4 / 가로 팬 −0.2 / 세로 팬 0.25에서 dog1로 사진을 교체하고 자동 AI depth 완료를 기다렸다. 네 값과 Grid 20 / 굴곡 +1이 모두 유지됐다. 이후 테스트용 수동 구도만 1/0/0으로 복귀했다.
• 1280×900 데스크톱과 390×844 모바일에서 조작·출력을 확인했다. 모바일 document.scrollWidth 375px ≤ innerWidth 390px. 거리 50%와 구도 1/0/0 유지.
• 브라우저 console error 없음. 새 거리 기능에 셰이더를 수정하지 않았다. 기존 광학/visible-depth 근사와 ANGLE 경고의 한계는 이전 보고서와 같다.

수치 기록: sample-depth-evidence.json, ai-framing-evidence.json. 화면 기록: sample-noglass-near.png, sample-noglass-far.png, sample-final-near.png, sample-final-far.png, dog1-near.png, dog1-far.png, dog1-mid.png, mobile-distance-control.png.

자동 검사

• npm.cmd run build -- --outDir test-results/photo-glass-distance-build: TypeScript + Vite 빌드 통과. 기존 큰 번들 경고는 유지. 검증용 빌드 출력은 제거했다.
• node --experimental-strip-types scripts/test-window-reveal-coverage.mjs: 2종 종횡비 × 3종 Depth Scale × 2종 거리 × 17종 시점 × 49개 aperture 샘플에서 프레임 안쪽 기하 가림 통과. geometry 재사용·dispose도 통과했다.
• 기존 depth-refraction, camera-history 검사 통과.
• git diff --check 통과.

사용과 한계

주 화면에서 사진–유리 거리를 조절한다. 초기 0%는 가까운 기존 배치이고, 검증 후 미리보기는 차이를 보기 쉽게 50%에 두었다. 실행은 프로젝트 루트에서 npm.cmd run dev -- --host 127.0.0.1 --port 5174, 미리보기는 http://127.0.0.1:5174/다.

Depth는 상대 깊이이며, 간격의 기준점이 얼굴이나 코라는 의미적 보장은 없다. 가장 앞쪽 부분이 앞발이나 다른 물체일 수 있다. 큰 거리에서는 굴절이 강해져 반복과 프레임 안쪽의 어두운 영역이 더 보일 수 있다. 현재 RenderTarget에서 가려진 장면이나 화면 밖 영역을 새로 복원하지 않는다. 실물 광학의 정밀 시뮬레이션, 모바일 실기기 FPS 또는 영상 flicker 계측은 수행하지 않았다.

0% 가까움	100% 멀어짐