depth-estimation
AI가 보는 깊이로 불꽃 가리기
해결하는 문제
가상 물체가 현실 물체 뒤로 숨는 자연스러운 AR을 만들고 싶다.
사진 한 장에서 AI가 픽셀마다 거리를 추정하고, 가까운 물체 뒤로 가상 불꽃이 숨게 합니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 프레임 (256px로 축소)
브라우저가 하는 일Depth Anything이 픽셀마다 거리 추정 (가까울수록 밝음)
나오는 것기준보다 가까운 부분만 불꽃을 지우는 가림 마스크
쓰는 브라우저 기술
getUserMediaCanvas compositing (destination-in)WebGPUWebAssembly
라이브러리와 모델
Transformers.jsDepth Anything V2 Small (약 25MB)
바꿀 수 있는 옵션
- device: webgpu(빠름) 또는 wasm(어디서나)
- dtype: fp16 또는 q8 (크기와 정확도)
- 가림 기준 깊이
- 추론 해상도
자주 막히는 곳
- 그래픽카드 없는 PC에서는 한 번 계산에 수 초가 걸린다
- AI 깊이는 상대값이라 장면마다 기준이 달라진다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 사진 한 장으로 공간 거리 측정
- 시각장애인용 장애물 거리 음성 안내
웹 서비스
- 배경 흐림 화상 회의 필터
- 입체감 있는 상품 사진 뷰어
피지컬 AI
- 로봇 청소기·드론의 저가 장애물 감지 시제품
- 주차 보조 거리 경고
넓히는 방법
- 안드로이드 크롬은 WebXR Depth로 실측 깊이 사용
- 깊이로 배경 흐림 (인물 사진 모드)
- 깊이 지도로 입체 사진 만들기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬일부
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
Transformers.js의 Depth Anything으로 카메라 영상의 깊이를 추정해서, 손이 가상 불꽃 앞에 오면 불꽃이 가려지는 AR 웹페이지를 만들어줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md