Caustic Pool 셰이더 디자인

발광하는 물의 필드

Caustic Pool은 여러 화면의 시퀀스가 아니라 완성된 캔버스로 제시되는 공식 OpenDesign WebGL2 예제입니다. 제작자가 설정한 “CAUSTIC POOL” 제목은 옅은 색의 가지형 필라멘트가 펼쳐진 짙은 청록색 필드 위, 왼쪽 하단에 놓여 있습니다. 두 줄로 구성된 큰 제목이 먼저 주제를 확립하고, 보조 문구는 이 효과를 “domain-warped ripples”와 “caustic filaments”라고 설명합니다.

이러한 읽기 순서는 인터랙션이 시작되기 전에도 작품을 이해할 수 있게 합니다. 상단 가장자리에는 왼쪽의 “OPENDESIGN · WEBGL PREVIEW”와 오른쪽의 “REAL-TIME · GPU”가 배치되어, 본래 추상적인 표면에 간결한 기술적 프레임을 부여합니다. 이는 의도적인 절충입니다. 레이블은 관람자의 방향을 잡아주지만, 고정 오버레이는 끊김 없는 분위기를 다소 방해합니다.

01

기법보다 먼저 제시되는 제목

“CAUSTIC POOL”은 설명에서 도메인 왜곡 리플을 소개하기 전에 시각적 세계를 명명하므로, 효과가 순수하게 기술적인 인상에 머물지 않습니다.

02

가장자리에 배치된 안내

“CLICK THE WATER ↗”는 제목 블록에서 떨어진 오른쪽 하단에 배치되어, 주요 읽기 경로를 방해하지 않으면서도 참여 요청을 발견할 수 있게 합니다.

컴포지션이 어울리는 맥락

이 디자인은 움직임이 보조 장식이 아니라 주제인 맥락에 적합합니다. 크리에이티브 코딩 연구에서는 리플 필드와 빛의 집중을 비교하는 데 사용할 수 있고, 인터랙티브 랜딩 페이지에서는 같은 구조로 짧은 메시지에 공간감을 부여할 수 있습니다. 살펴볼 제품 인터페이스가 없는 경우 전체 화면 캔버스가 특히 유용합니다.

주변 경험이 GPU로 렌더링되는 표면을 수용할 수 있다면, 이 컴포지션은 이벤트, 설치 작품 또는 실험적인 웹 기능의 시각적 배경으로도 작동합니다. 주요 제약은 집중도입니다. 정적 마크업에 제작된 컨트롤이 없기 때문에 인터랙션의 범위는 의도적으로 좁고, 대부분의 커뮤니케이션을 비주얼이 담당합니다.

리플과 타이포그래피가 공간을 공유하는 방식

캡처 화면은 서로 다른 화면이 아니라 변화하는 시각적 상태를 보여주는 하나의 완성된 캔버스입니다. 각 상태에서 청록색 배경은 연속적으로 유지되는 반면, 옅은 색의 네트워크는 위치와 밀도를 바꿉니다. 이러한 연속성은 움직임을 페이지 전환이 아니라 물의 필드가 지닌 속성처럼 느끼게 합니다. 시각적 결과는 차분하고 지속적인 표면이며, 절충점은 상태 변화가 명시적인 상태 텍스트가 아니라 미묘한 패턴의 움직임을 통해 전달된다는 것입니다.

셰이더는 접힌 좌표 계산을 다섯 차례 수행해 밝은 네트워크를 형성합니다. pointer-down이 발생하면 리플 위치와 경과 시간을 초기화하고, 이후 사인파 형태의 방사형 파동이 샘플링 좌표를 휘게 하며 거리와 경과 시간에 따라 희미해집니다. 이를 통해 메시, 외부 텍스처 또는 물리 유체 솔버 없이도 물과 빛의 인상을 만들어냅니다. 고정된 왼쪽 하단 제목과 반대쪽 가장자리의 안내 문구는 관람자가 변화하는 필드를 안정적인 텍스트와 비교할 수 있게 합니다.

1. 고정점 설정

   제목과 설명 문구를 안정적인 왼쪽 하단 블록에 유지하여, 관람자가 변화하는 셰이더 상태를 고정된 기준과 비교할 수 있게 합니다.

2. 대비 만들기

   더 어두운 청록색 필드 위에 밝은 필라멘트를 배치하여 차트, 컨트롤 또는 장식 패널을 추가하지 않고도 굴절 네트워크를 읽을 수 있게 합니다.

3. 참여 유도

   반대쪽 하단 가장자리에 간결한 포인터 안내 하나를 배치하여, 로컬 제스처를 눈에 보이는 물의 메타포와 연결합니다.

하나의 표면, 여러 상태

대체 캡처 화면은 발광하는 선이 변하는 동안에도 동일한 레이블, 제목, 설명, 클릭 안내를 유지합니다. 반복되는 오버레이는 콘텐츠와 애니메이션 상태를 분리하므로, 관람자는 인터페이스를 다시 익히지 않고 필드를 비교할 수 있습니다. 재현할 때는 이 안정적인 에디토리얼 레이어를 유지하면서 그 아래의 셰이더 출력이 변하도록 해야 합니다.

기능의 경계

소스는 로컬 WebGL2 렌더링, pointer-down 입력, 리사이즈 처리, 드로 루프를 구현합니다. 각 입력은 여러 개의 독립적인 파동을 누적하는 대신 이전 리플을 대체합니다. 리플의 경과 시간은 애니메이션 프레임마다 1/60씩 증가하므로 감쇠 타이밍은 실제 프레임 레이트에 따라 달라집니다. 세 개의 캡처 화면은 하나의 캔버스가 보이는 상태를 보여줄 뿐이며, 기록된 입력 추적이 없으므로 클릭 반응을 독립적으로 입증하지는 않습니다.

이는 검증된 물 시뮬레이션이 아니라 시각적 코스틱 근사입니다. 소스만으로는 연결된 서비스, 저장된 사용자 데이터, 측정된 GPU 성능, 보편적인 입력 호환성 또는 원래 사용된 생성 모델을 확인할 수 없습니다. 프로덕션에 적용할 때는 GPU 레이블이나 제작자가 설정한 물의 메타포를 승인 근거로 취급하지 말고, 의도한 환경에서 로컬 입력과 타이밍 동작을 테스트해야 합니다.