behind_glass/docs/glass-resolution-task.md

유리 투과 해상감 보정 · 2026-09-14

사용자 요청:

• 레퍼런스처럼 유리를 통과하면서 해상도가 크게 깨져 보이는 표현을 추가한다.
• 기존 Ref1 | Ref2 위쪽 비교 영역과 아래 작업 이미지 배치를 복구한다.

해석 및 구현 기준:

• Ref2를 주 기준으로, 셀마다 털 등의 세부 정보가 줄고 눈·코 조각이 서로 다른 크기와 위치로 보이게 한다.
• 셀별 확대·압축 및 국소 샘플 퍼짐으로 표현한다. 원본 이미지나 전체 RenderTarget의 해상도를 낮추거나 단색 pixelation으로 대체하지 않는다.
• 기존 과도한 셀 샘플 이동 제한을 완화해 확대 효과가 실제 출력에 나타나도록 한다.
• Depth/AI 입력, 시점 이동, 유리판 기준 격자, 부호 있는 굴곡과 반사의 공통 법선을 보존한다.
• Distortion 0에서는 무효과 출력을 보존하며, 광택 0에서도 굴곡 및 셀별 정보 손실은 남는다.
• 비교 영역은 개발 모드와 로컬 배포 미리보기 모두에 표시한다. 이 변경은 외부 게시를 포함하지 않는다.

검증:

• 같은 샘플·구도의 정지 화면에서 변경 전후 비교.
• Ref1/Ref2 로드 및 작업 이미지 위 배치, 모바일 가로 넘침 확인.
• 눈·코 식별, 셀별 정보량 차이, 드래그 시 좌표 일관성 확인.
• TypeScript/빌드와 실제 브라우저 시각 검증을 구분해 보고.

구현 및 검증 결과

• 수정 파일: src/main.ts(비교 영역 개발 모드 제한 제거), index.html(Ref 캡션), src/shaders/mosaic.frag(조각 유리 샘플링).
• 조각 유리의 과도한 샘플 이동 제한을 제거했다. 셀별 확대·압축 비율과 중심 이동량을 변경하고, 9개 주변 샘플로 국소 세부 정보 손실을 강화했다. 촘촘 유리의 기존 샘플 범위와 5개 샘플 필터는 보존했다.
• npm run build 통과. 기존 번들 크기 안내는 남는다.
• 로컬 배포 미리보기 http://127.0.0.1:5175/에서 Ref1/Ref2 실제 이미지 로드 확인.
• 동일 1440×1000 화면과 샘플·구도의 변경 전후 비교: glass-resolution-before.png, glass-resolution-after-matched.png. 후자는 비교 조건을 맞추기 위해 테스트 페이지에서만 Ref 영역을 잠시 숨겨 캡처했으며 실제 앱은 Ref를 표시한다.
• 실제 비교 UI: glass-resolution-after.png. 눈·코를 식별할 수 있고 셀별 얼굴 조각의 확대·정보량 차이가 이전보다 커졌다.
• 광택 0에서도 조각화와 흐림 유지. 굴곡 -1/0/+1 렌더링 및 드래그, Mosaic/Reeded/Frosted 전환에서 셰이더·페이지 오류 없음.
• Distortion 0과 No Glass의 중앙 80×80 캡처 일치. 전체 프레임 경계의 픽셀 일치를 검사한 것은 아니다.
• 390px 화면에서 문서 너비 390px, Ref 영역 하단과 작업 이미지 상단이 모두 y=200. 가로 넘침 없음. glass-resolution-mobile.png 참조.
• 이번 검증은 수작업 샘플 depth를 사용했다. AI 추론 코드는 변경하지 않았으며 이번 보정에서 모델 추론 속도 및 실제 모바일 GPU 성능을 재측정하지 않았다.