홀로그램 포일 셰이더 디자인

이미지 텍스처 없는 포일 표면

홀로그램 포일 셰이더 디자인은 뷰포트 전체를 채우는 WebGL 구성을 중심으로 제작된 공식 OpenDesign 예제입니다. 화면에 보이는 표면은 마젠타, 청록색, 녹색, 보라색, 노란색 영역에 가느다란 등고선 형태의 하이라이트를 결합해, 평평한 색면이 아닌 구겨진 포일의 외관을 만듭니다.

이 구성은 “Thin-film interference over a crushed-foil surface”라는 문구로 명시적으로 소개되며, 시야각에 따라 팔레트가 변합니다. 이 문구는 의도한 시각적 모델을 설명합니다. 캡처 이미지로 확인되는 것은 렌더링된 외관과 함께 표시된 인터랙션 안내이며, 광학적 정확성이나 GPU 성능은 아닙니다.

이 디자인의 활용 영역

이 결과물은 인터랙티브 랜딩 페이지의 히어로 영역, 생성형 아트 연구, 크리에이티브 코딩 시연을 위한 시각적 참고 자료로 가장 유용합니다. 가장 중요한 교훈은 구성에 있습니다. 풍부한 애니메이션 배경이 분위기를 만들고, 절제된 오버레이가 화면을 파악할 기준을 제공할 수 있습니다.

화면에 보이는 “OPENDESIGN · WEBGL PREVIEW” 라벨은 예제의 맥락을 나타내며, “REAL-TIME · GPU”는 의도한 렌더링 방식을 알립니다. 이 라벨들은 보는 사람이 작업의 성격을 이해하는 데 도움이 되지만, 벤치마크나 실제 운영 환경에 배포되었다는 증거로 해석해서는 안 됩니다.

구성의 움직임 원리

제공된 세 가지 상태에서 읽기 순서는 일관되게 유지됩니다. 작은 OpenDesign 미리보기 라벨은 왼쪽 위에, GPU 상태는 오른쪽 위에, 큰 “HOLOGRAPHIC FOIL” 제목은 왼쪽 아래 영역에 놓이고, “TILT THE FILM ↗”는 오른쪽 아래에 표시됩니다. 이 고정된 오버레이 덕분에 배경이 변해도 인터페이스가 다른 화면처럼 느껴지지 않습니다.

제목은 굵은 대문자 첫 줄과 가는 둘째 줄로 구성됩니다. 이 대비는 “HOLOGRAPHIC”에 즉각적인 무게감을 주면서, 움직이는 표면 위의 “FOIL”에는 시각적 여유를 남깁니다. 다만 배경이 가는 글자 형태와 시선을 두고 경쟁할 수 있으므로, 셰이더 팔레트가 바뀔 때마다 대비와 텍스트 배치를 확인해야 합니다.

셰이더는 6개 노이즈 레이어로 왜곡된 두께 필드를 만들고, 그 두께장의 공간적 변화율(그래디언트)을 추정한 다음, 두께와 시각적 기울임에 따른 위상을 코사인 색상 팔레트에 매핑합니다. 별도의 능선 항과 반짝임 항이 포일 같은 빛의 반짝임을 더합니다. 두 축의 포인터 위치가 기울기를 대신하는 값을 제공하고, 경과 시간에 따라 필드가 변합니다. 이러한 계산은 이미지 텍스처나 장면 메시 없이 등고선 형태의 색 영역을 만들어냅니다. 이는 측정된 박막 광학 현상이 아니라 재질의 시각적 근사 표현입니다.

기능의 범위와 한계

소스는 로컬 WebGL2 캔버스를 생성하고 포인터 움직임을 감지하며, 프레임마다 두 좌표를 각각의 목표값에 부드럽게 수렴시킵니다. 이 좌표는 시야각을 대신하는 값으로 사용되며, 물리적인 기기 방향이나 3D 카메라 제어를 나타내지 않습니다. “TILT THE FILM”은 정적인 안내 문구이며 버튼이 아닙니다. 캡처 이미지는 하나의 히어로 영역을 서로 다른 시점에서 보여주며, 연결된 서비스, 저장된 데이터, 광학적 정확성, 측정된 성능, 과거의 생성 과정을 입증하지 않습니다.