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:
2026-10-06 14:33:47 +09:00
parent 619d980098
commit 71c8d3b7ff
82 changed files with 1602 additions and 1103 deletions
@@ -0,0 +1,34 @@
# 확대 사진에 따른 고방유리 표면 보정
2026-10-06 사용자가 추가한 300×300 실물 사진을 현재 고방유리의 시각 목표로 삼았다. `target.png`는 그 첨부 파일의 원본 복사다. 기존 Ref1/Ref2 비교와 색면 옵션은 별도의 과거 표현으로 보존한다.
## 판단과 변경
첫 구현은 평탄한 중심과 둥근 경사면의 곱으로 높이를 구성해 사각 쿠션/버튼처럼 보였다. 확대 사진에는 가로·세로 방향의 능선과 그 사이에서 늘어나고 꺾이는 투과 영상이 보인다. 후속 실험에서 X/Y 높이의 부드러운 최솟값으로 네 면을 만들었지만 대각선 삼각 조각이 두드러져 채택하지 않았다.
현재 높이는 `0.25 px + 0.55 py + 0.20 px py`로 구성한다. `px`와 `py`는 중심과 셀 경계 부근만 둥글고 중간은 기울기가 일정한 반복 프로파일이다. 가로 능선에 더 큰 비중을 두고, 연속적인 작은 물결을 더한다. 셀별 사진 크롭이나 사각 색면, 검은 격자선을 추가하지 않는다. 동일 높이의 미분으로 얻은 법선을 기존 새 모드의 두 경계 굴절과 반사에 공유한다. 경계의 높이가 항상 0인 초기 곱 방식과 달리, 교차 능선의 높이와 기울기가 인접 셀에 주기적으로 이어진다.
수정 코드는 `src/shaders/mosaic.frag`, `src/constants/glass.ts`, `src/main.ts`의 고방유리 표면 부분이다. 상수는 Grid 20, 높이/셀 크기 0.085, 중심 반폭 0.07셀, 경사 전환 둥글림 0.10, 굴절률 1.5, 기본 두께 0.008, 환경 반사 강도 0.45다. 기본 UI는 굴곡 +1 / 광택 0.3 / Camera 0.5를 유지한다. RGB/Depth 배치와 수동 구도는 변경하지 않았다.
## 검증
- Codex in-app browser에서 최신 페이지와 WebGL 출력을 직접 확인했다. 기존 탭의 갱신이 실패해 같은 브라우저에 새 로컬 검증 탭을 열었다.
- dog1의 자동 AI depth 완료 후 Grid 20 기본값과 사용자 기존 설정 Grid 16 / 굴곡 0.78 / 광택 0.4 / Camera 0.13을 비교했다. 넓은 사각 방향의 사진 변형과 능선 반복을 확인했다. 첫 화면의 과도한 삼각 조각은 현재 높이에서 줄었다.
- dog2의 실내 배경에서도 자동 AI depth 완료 후 가로 능선을 따라 배경과 몸 윤곽이 꺾이는 출력을 확인했다(`dog2-grid20.png`).
- 광택 0에서도 굴절이 남는다. 광택 0 / 굴곡 0에서는 반복 변형이 사라진다. 굴곡 −1의 반대 변형과 드래그 시 시점 반응도 출력했다.
- 사진 확대 1 / 가로 팬 0 / 세로 팬 0 유지. 1280×900과 390×844 출력 확인. 모바일 문서 폭 375px, viewport 390px로 가로 넘침 없음.
- console error 없음. 기존 공유 depth 교점 반복에 대한 ANGLE implicit derivative 경고는 첫 구현과 동일한 제한이다.
- `npm.cmd run build -- --outDir test-results/gobang-facets-build`: 타입 검사와 Vite 빌드 통과. 기존 큰 번들 경고는 유지된다.
- 기존 surface-reflection, mosaic-continuity, region-axis-split 검사 통과. 이 검사는 기존 비교 경로를 보호하며 새 표면의 실물 일치도를 보증하지 않는다.
비교 파일: `before-current-settings.png`는 변경 전 화면(기본 브라우저 폭), `dog1-current-settings.png`는 같은 재질 설정의 변경 후 화면(데스크톱 검증 폭)이다. `initial-controls.json`에 변경 전 값이 남아 있다. `dog1-directional-grid20.png`, `dog1-gloss0.png`, `dog1-flat-gloss0.png`, `dog1-concave.png`, `dog1-drag.png`, `dog1-final-desktop.png`, `dog1-final-pane.png`, `dog1-mobile.png`에 조건별 출력을 저장했다. 확대·팬 값은 모두 동일하지만 화면 크기가 다른 두 파일을 픽셀 단위 전후 비교로 취급하지 않는다.
## 현재 한계
실물의 측정된 표면을 복원한 재질은 아니다. 규칙적인 절차적 높이장으로 방향성 있는 굴절을 근사했다. 실물의 비대칭 경사, 미세한 능선 반사, 제품별 불규칙성은 더 보정할 여지가 있고 첨부 사진과 완전히 같다고 판정하지 않았다. 실물 사진은 뒤 배경과 조명 조건도 다르므로 강아지 사진의 색이나 명암이 같아질 것을 완료 기준으로 삼지 않는다. 실기기 FPS와 영상 flicker 계측은 수행하지 않았다.
실행: 프로젝트 루트에서 `npm.cmd run dev -- --host 127.0.0.1 --port 5174`, 로컬 미리보기 `http://127.0.0.1:5174/`. 유리 패턴은 `고방유리 · 표면 굴절`, 개발 비교의 View Mode는 `Final`로 확인한다.
![사용자 확대 레퍼런스](target.png)
![현재 기본값의 사진 투과 결과](dog1-final-pane.png)