프로젝트 링크

안녕하세요.

메타볼은 제가 정말 좋아하는 그래픽 모델입니다.

연속적이고, 부드럽지만 동시에 끈끈한 느낌을 주는 것이 인상적이죠.

하지만 이 메타볼을 웹 상에서 렌더링하는 것은 그리 쉬운 일이 아닙니다.

가장 간단한 방법은 svg filter를 활용해서 구현하는 방법이 있지만,

아래와 같이 성능이 굉장히 좋지 않고, 메타볼 효과가 매우 잘 깨진다는 단점이 있습니다.

따라서 WebGL을 이용해서 구현한다면,

성능과 정확도를 동시에 챙길 수 있다고 생각했습니다.

저는 WebGL로 PIXI.js를 이용했고요,

PIXI.js의 filter를 이용하여 메타볼 효과를 구현했습니다.

메타볼 효과는 두 가지 filter들을 합쳐 만들어낼 수 있습니다.

1. BlurFilter (가우시안 블러 효과, 일반적인 css의 filter: blur() 속성과 같음)

2. alpha-thresholding filter (투명도에 따라 원하는 임계처리를 해줌)

보다 더 정확하게는,

1. 원들을 렌더링하고, 화면 전체에 blur 처리를 해줍니다.

2. 이때 blur 처리가 되었다면, 원의 바깥 쪽으로 갈 수록 기존 색상의 opacity가 낮아지는 것을 확인할 수 있습니다.

3. alpha-thresholding을 적용하여 일정 opacity 이하로 내려온 값들은 화면에 렌더링하지 않고, 그게 아니라면 모두 opacity를 1로 적용해줍니다.

하지만 PIXI.js에 alpha-thresholding filter는 존재하지 않기 때문에,

직접 GLSL 언어를 이용하여 커스텀 filter를 제작해주었습니다.

이 기법을 이용하면 아래와 같이 메타볼 효과를 손쉽게 렌더링할 수 있습니다!

게다가 성능도 많이 잡아먹지 않습니다!

원래는 단순히 여기까지 만들었는데,

blur를 얼마나 해줄지, alpha-thresholding의 임계치를 얼마로 해줄지에 따라서

다른 메타볼 효과가 구현되는 것을 확인할 수 있었는데요.

여기서 끝내기엔 아쉽죠.

그래서 메타볼 효과를 커스터마이징 할 수 있는 컨트롤러를 만들어서

다양한 메타볼 효과를 구현할 수 있게 프로젝트를 구성했습니다.

다양한 파라미터들이 준비되어 있으니,

궁금하시면 직접 해보시는 것을 추천드립니다!

감사합니다!