2D 다이나믹 섀도우 & 포인트 라이팅 광원 시뮬레이터(WATERCOLOR LIGHT ATELIER)는 캔버스 2D 실시간 레이캐스팅(Raycasting) 알고리즘과 수채화 & 연필 드로잉 감성 아트 테마가 결합된 독립형 인터랙티브 웹 시뮬레이터입니다.
복잡한 3D 그래픽 엔진 없이 웹 브라우저 상에서 실시간 2D 광원(Point Light, Spotlight)을 자유롭게 드래그하여 이동시키고, 직사각형, 원, 자유 다각형, 직선 벽 형태의 가림막 오브젝트를 직접 그려 동적인 실시간 그림자(Dynamic Shadows)와 부드러운 펜엄브라(Soft Penumbra) 투과 연출을 감상할 수 있습니다.
🌟 핵심 주요 기능
- 🎨 수채화 & 드로잉 터치 감성 디자인 테마 (Watercolor & Sketch Touch Theme):
- 캔버스 종이 질감(Paper Texture Grain) 오버레이와 따스한 아날로그 파스텔 톤 팔레트(노을 앰버, 수채화 코랄, 라벤더, 세이지 민트, 레몬 햇살).
- 아날로그 연필 스케치 테두리와 유리질감 플로팅 컨트롤 패널이 어우러져 한 편의 감성 일러스트 화실에 들어온 듯한 경험을 제공합니다.
- 💡 실시간 2D 레이캐스팅 광원 엔진 (2D Dynamic Raycasting Engine):
- 포인트 라이트(360° Point Light) & 스포트라이트(Cone Spotlight) 도달 거리(Radius), 광량(Intensity), 확산 범위(Spread Angle) 조절.
- 숨쉬기 펄스(Breathing Pulse), 촛불 요동(Candle Flicker), 360° 무한 회전(Spotlight Sweep) 동적 애니메이션 모드 지원.
- 가림막 정점(Vertices) 추적 알고리즘으로 동적 시시각각 변하는 2D 가시성 다각형(Visibility Polygon) 및 부드러운 그림자(Soft Shadow) 60 FPS 실시간 렌더링.
- 🧱 인터랙티브 가림막 (Obstacle) 그리기 시스템:
- 사각형, 원형, 자유 다각형(Polygon), 직선 벽(Segment Wall) 드로잉.
- 배치된 요소의 이동, 회전, 불투명도 조절, 그림자 투과(Cast Shadow) 토글 및 복제/삭제 기능.
- 📂 드래그 앤 드롭 파일 로딩 & 이미지 가림막:
- 캔버스 위에 배경 이미지(Floorplan, 실루엣 아트)나 이미지 가림막 마스크를 드래그 앤 드롭하여 로드.
- 프로젝트 저장 파일(
.json)을 드롭하여 이전에 작업하던 광원 레이아웃을 즉시 복원.
- 🎵 Web Audio 기반 인터랙티브 사운드스케이프 (Generative Soundscape):
- 광원의 위치, 밝기, 이동 터치에 반응하는 실시간 펜타토닉 음향 조율.
- 은은한 종이 질감의 앰비언트 노이즈와 따스한 드론 삼화음(Triad Synth Pad)이 시각적 연출과 완벽하게 동기화됩니다.
- 🖼️ 고해상도 에셋 내보내기 & 프로젝트 저장:
- 완성 컴포짓 이미지, 광원 맵만(Light Map), 그림자 마스크(Shadow Mask), 가림막 알파 선택 내보내기.
- 1x / 2K(2x) / 4K(4x) 고해상도 PNG 다운로드 및 클립보드 복사.
- 전체 광원 및 가림막 좌표 데이터를 포함하는
.json프로젝트 파일 내보내기/불러오기.
🎨 8가지 감성 프리셋 라이브러리
- 🌇 노을빛 수채화 아틀리에: 아치창 너머로 쏟아지는 따스한 석양 빛과 보랏빛 그림자.
- 🕯️ 따스한 촛불 서재: 책장 사이로 흔들리는 은은한 촛불의 아늑한 잔상.
- 🌙 달빛 수목원 온실: 몬스테라 잎사귀 사이를 비추는 실버 블루 달빛 스포트라이트.
- 🌆 네온 파스텔 몽환 거리: 비 젖은 아스팔트에 반사되는 시안 & 핑크 네온 광원.
- 💎 프리즘 크리스탈 연구실: 결정체 다각형을 통해 분산되는 고품질 굴절 광선.
- 🏮 해안가 등대 탐조등: 밤바다 암초 사이를 360° 무한 회전하며 비추는 등대불 빔.
- 🎭 그림자 극장 실루엣: 또렷하고 명확한 그림자 극장 인형극 연출.
- 🎶 추상 유체 라이트 심포니: 잔잔한 앰비언트 음악과 함께 맥동하는 빛의 오케스트라.
사용 방법
- 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
- 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
- 작업 목적에 맞는 설정을 선택한 뒤, 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.
자주 묻는 질문 (FAQ)
어떻게 시작하나요?
앱을 열면 제공되는 기본 설정과 화면 안내를 확인할 수 있습니다. 먼저 예시 상태에서 주요 조작을 살펴본 뒤, 목적에 맞게 입력값이나 도구를 변경해 보세요.
별도 설치가 필요한가요?
이 앱은 웹 브라우저에서 실행하도록 구성되어 있습니다. 원활한 사용을 위해 최신 브라우저와 안정적인 인터넷 환경을 권장합니다.
결과가 예상과 다르게 보이면 무엇을 확인해야 하나요?
현재 선택한 설정, 입력값, 화면 크기, 브라우저 상태에 따라 결과가 달라질 수 있습니다. 초기화 또는 예시 설정으로 돌아간 뒤 값을 하나씩 바꿔 확인하면 원인을 파악하기 쉽습니다.
WebMiniApps