Implement patterned glass and maximum-depth distance controls
Add gobang surface refraction and shared photo/depth distance adjustment. Compare V2 Small and Base at input 770 with maximum-depth masks and pixel diagnostics. Record browser QA and update runtime dependencies and model notices.
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
# 사진–유리 거리 조절
|
||||
|
||||
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% 멀어짐 |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
Reference in New Issue
Block a user