WebGL과 리퀴드 글래스가 만나는 곳

웹상의 대부분의 리퀴드 글래스 효과는 DOM 클로닝을 사용합니다. HTML 요소를 복사하고, 왜곡시키고, 블러를 추가한 뒤 유리 레이어 아래에 배치하는 방식입니다.

이 방식은 WebGL에서는 작동하지 않습니다. DOM 클론은 라이브 캔버스의 픽셀을 복사할 수 없기 때문입니다. 캔버스는 매 프레임마다 변하는 프레임버퍼입니다.

캔버스에서 리퀴드 글래스 효과를 구현하려면 두 가지 선택지가 있습니다. 매 프레임마다 캔버스를 캡처하는 방법이 있는데, 이는 비용이 많이 듭니다. 아니면 유리 효과 자체를 WebGL 파이프라인 내부로 옮기는 방법이 있습니다.

저는 두 번째 접근 방식을 테스트하기 위해 실험적인 프로젝트를 만들었습니다. 효과를 보여주기 위해 움직임이 있는 배경이 필요했고, Konmari의 인터랙티브 워터 리플 데모에서 영감을 얻었습니다.

저는 사실적인 리플 물리와 떠다니는 꽃을 포함한 저만의 버전을 만들었습니다.

그 결과, 리퀴드 글래스 패널이 포함된 WebGL 워터 씬이 탄생했습니다. 이 패널은 아래에 있는 라이브 캔버스를 굴절시킵니다.

작동 원리:

  • 워터 효과는 하이트 필드(height-field) 리플 시뮬레이션을 사용합니다.
  • 포인터의 움직임이 그리드 위에 파동을 생성합니다.
  • WebGL 셰이더가 이 파동을 빛과 왜곡으로 변환합니다.
  • 2D 캔버스 위의 꽃들은 굴절 효과를 명확하게 보여주는 역할을 합니다.

유리 패널은 DOM을 클로닝하지 않습니다. 대신 픽셀을 샘플링합니다.

렌더링 흐름은 다음 단계를 따릅니다:

  • WebGL 워터를 렌더링합니다.
  • 2D 꽃을 렌더링합니다.
  • 두 요소를 하나의 숨겨진 소스 캔버스로 결합합니다.
  • 유리 셰이더를 사용하여 해당 소스 캔버스를 샘플링합니다.

셰이더는 부드러운 에지 노멀(edge normal)을 추정합니다. 이를 사용하여 소스 텍스처를 굴절시킵니다. 재질이