behind glass

할머니 집에
멍멍이가 왔어요

멍멍이 이름이 뭐예요? 비워두어도 괜찮아요 · 이 브라우저에만 저장돼요

창가 구도

기존 구도로 바로 돌아갈 수 있어요. 선택은 이 브라우저에 저장돼요.

샘플로 둘러보기

샘플 사진

개발 도구

유리 렌더러

나무 문 손잡이를 왼쪽으로 밀어 열 수 있어요.

기본 B · 실제 고방 메시 + 맞춤 굴절

웹 유리 렌더러 비교

A 기존 코드 / 굴절 보정 B · 실제 고방 메시 + 맞춤 굴절. 같은 사진·깊이·시점·확대·거리로 동시에 표시해요. AI 분석은 한 번만 공유해요.

화면을 두 번 그려 GPU·메모리 부담이 커져요. 특히 모바일에서는 느려지거나 그래픽 연결이 끊길 수 있어요. 기본 화면은 B만 그려요. A는 별도 진단 모드로 보존돼요.

고방유리의 Final 또는 No Glass에서 사용할 수 있어요.

비교 조건과 차이

공통: 사진·128×128 깊이 메시, 격자·굴곡, IOR 1.5, 전면 요철·뒷면 위치, 거리, 카메라와 확대. B는 닫힌 실제 메시의 진입점·법선과 뒷면·옆면을 사용해요. 조명 위치와 방 배경 방향을 맞췄지만 반사 계산은 달라요.

B: Three.js r169 MeshPhysicalMaterial의 맞춤 확장. 실제 유리 표면에서 굴절하고 유리를 나올 때 다시 굴절한 뒤 사진의 128×128 깊이 삼각형과 만나는 곳을 찾아요. 얇은 유리를 임의로 두껍게 만들지 않아요. 표준 재질만 사용한 결과가 아니며, 사진 색은 교차한 위치에서 직접 읽고 반사는 기존 물리 재질을 사용해요. 일부 GPU에서 직사각 조명을 지원하지 않으면 B에 환경광만 사용했다고 표시해요. 전체 장면의 다중 반사·산란을 추적하는 렌더러는 아니에요. A의 깊이 보정·가장자리 완화·광택 0.30과 동일한 결과를 만드는 방식도 아니에요. 다른 유리 무늬나 진단 화면으로 바꾸면 비교가 종료돼요.

CPU 제출 시간은 GPU 시간이 아니에요. 화면 간격은 A+B를 함께 그린 이 브라우저의 값이고, 각 방식 단독 FPS가 아니에요. GPU 메모리 용량은 측정하지 않아요. 시각·속도 우열은 실제 기기에서 확인하세요.

고방유리 · 표면 요철에 따른 굴절 · 색면 처리 없음

AI 깊이: Depth Anything V2 Small · 입력 770

최대 깊이 영역 확인

모델 최대 1: 분홍 · 8비트 depth=1: 청록 · 모델 depth≥0.99: 노랑

사진과 깊이를 불러오세요.

픽셀 X 픽셀 Y

1은 사진별 정규화 최댓값이며 실제 거리나 코 검출 결과가 아닙니다. 간격은 깊이맵 기준 장면 단위입니다.

동영상 선택 Depth 이미지 선택 View Mode Glass Depth Scale 0.25 조명 가로 0.60 조명 세로 0.80 View sensitivity 1.00

사진을 선택하면 AI가 입체감을 준비해요

할머니 집에
멍멍이가 왔어요

멍멍이를 할머니 집으로 데려가는 중…

정말 첫 화면으로 갈까요?

메뉴

어떤 멍멍이를 만나볼까요?

화면을 잠시 그리지 못했어요

B 유리를 그리지 못했어요

현재 구도 저장

만든 사람

웹 유리 렌더러 비교

할머니 집에멍멍이가 왔어요

멍멍이를 할머니 집으로 데려가는 중…

할머니 집에
멍멍이가 왔어요