AR광고를 만들다가 쉐이더와 렌더러가 궁금해진 이유

WebGL과 Three.js을 알게 되었다

증강현실이라는 생소한 분야에서 비즈니스를 해보려고 하니 어려운것들이 정말 많다. 그 중 가장 먼저 맞닥뜨린건 WebGL과 Three.js 라이브러리 였다. 증강 현실은 현실 세계에 가상의 정보를 합성하여 원래 존재하는 사물처럼 보이게 하는 컴퓨터 그래픽 기법인데, 여기에서 가상의 정보에 해당하는 3D 오브젝트를 웹 브라우저에서 구현하려다 보니 본의 아니게 WebGL이라는 놈과 만나게 되었다. 

WebGL은 웹 기반의 그래픽 라이브러리로 자바스크립트를 통해 활용할 수 있으며 2011년 3월 3일에 출시 되었다. 그리고 이 WebGL을 간소화 해주는 라이브러리인 Three.js도 부록처럼 따라왔다. 

왜 WebGL인가?

현재 많은 증강현실 어플리케이션이 출시되어 알게모르게 다양하게 사용되고 있다. 대표적으로 snapchat과 snow를 들 수 있는데 스마트폰제조사에서 탑제한 증강현실 이모지등 보다 훨~씬 사용자에게 많이 사용되고 있다고 볼 수 있다. 카메라로 촬영되는 현실 세계의 영상(얼굴)을 인식해 그 위에 2D 혹은 3D로 제작된 그래픽을 입히거나 얼굴 자체를 왜곡해 재미있는 사진을 만들어 낸다. 

그런데 이런 어플들은 증강현실을 광고 도구로서의 관점으로 보면 명확한 한계를 가지고 있다. 바로 어플리케이션을 '설치' 해야 한다는 것이다. 물론 어플리케이션 단위에서 구동됨으로서 디바이스의 다양한 리소스를 활용할 수 있기 때문에 좀더 높은 퀄리티의 증강 현실을 뽑아내기는 하지만 어플리케이션을 설치하지 않으면 사용 할 수 없다. 

그래서 다양한 광고주의 니즈를 충족 시켜주는 방법으로 Web에서 증강현실을 구현하는 방법을 찾게 되었고, WebGL을 활용하여 증강현실을 구현하는 사례가 있다는 것을 알게 되었다. Web 페이지에서 구현을 하게되면 기존에 활용하던 대다수의 광고 플랫폼을 활용해 증강현실을 가미한 광고를 만들어 낼 수 있게 된다. 

웹 브라우저가 먼저 발목을 잡았다

최초에 구현했던 프로토타입은 OpenCV를 자바스크립트로 포팅해 구현한 증강현실이었다. 카메라 영상에서 얼굴을 인식해 증강현실을 구현하는 프로토타입이었는데 브라우저의 호환성이나 속도에서 이슈가 생겨 대안을 찾아야 했다. 오로지 웹에서 구현을 목표로 만들어진 오픈 소스들을 찾기 시작했고 결국은 상대적으로 얼굴 인식률은 떨어지지만 속도가 빠르고 다루기 쉬운 형태로 프로토타입을 구현할 수 있었다. 물론 이 프로토타입도 브라우저에서 완전히 자유롭지는 못하다. 

그래도 기존의 프로토타입의 경우 인식률이 높고 우리가 원하는 증강현실이 비교적 디테일하게 구현되어 있었는데 새롭게 만든 프로토타입은 3D 물체의 표현에 관한 부분이 상대적으로 많이 미흡했고 개발자가 본격적으로 고생을 하기 시작했다. 

Three.js 라고 쓰고 쓰레기js라고 부른다

3D 아티스트가 아직 없던 시점에서는 서로 정확하게 아는것이 없었기 때문에 일단은 잘 보이게 하는게 우선이었다. 그래서 어설프게 제공되는 에디터에서 뭐든 눌러보고 최대한 그럴싸하게 보이게는 만들었다. 제품 광고등을 위해 증강현실을 사용해야 하니 가상의 정보(3D 오브젝트)가 가능한 사실적으로 보여야 하는것이 가장 큰 이슈중 하나였다. 그런데 아티스트가 출근을 함과 동시에 Three.js는 쓰레기js가 되어버렸다. 일반적으로 3D 맥스에서 사용하는 메테리얼(재질 등)을 그대로 사용 할 수 있을 거라고 생각했었는데 그게 아니었기 때문이다. 

결국은 오브젝트를 모델링해 Three.js editor에서 메테리얼을 작업해야 하는 상황이 되었는데 정말 기본적인것 외에는 제공되지 않고, 심지어 쓰라고 만들어둔 기능도 정상적으로 작동하지 않았다. 

WebGL은 뭐가 어떻고 어째?

WebGL에 대한 설명을 읽던 중.... 'WebGL'은 OpenGL ES 2.0을 기반으로 하고 3차원 그래픽을 사용하기 위한 프로그래밍 인터페이스를 제공한다' 라는 문구를 봤다. '프로그래밍 인터페이스'라니....뭔지 잘 모르겠지만 GUI는 아닌거 같다. 여기서 문제가 발생한다. 아티스트가 허접한 editor에서 진짜 힘들게 실사 퀄리티를 구현해도 우리가 만들어둔 Scene 에 적용하면 다르게 보이기 시작한 것이다. 물론 지금은 어찌어찌해서 최대한 맞췄다. 문제는 다르게 보이는게 아니고 우리가 원하는 형태로 3D 그래픽을 표현하기 위해서 단순히 디자이너가 열심히 하면 되는게 아니라는 것이다. 현재로서는 개발자와의 긴밀한 협업이 필요한 상태이고 표준화 하기 위해서 매우 노력중이다. 

쉐이더와 렌더러 라는 말을 들었다.

최근 '포프'님의 유튜브 동영상을 재미나게 즐기고 있는데 (잠이 잘 안올때 켜놓기도 함) 원래부터 알고 보게 된건 아니지만 보다 보니 그래픽 프로그래머? 라고 한다. 그 중 '쉐이더가 무엇이죠?' 라는 영상과 '물리 기반 렌더링(PBR)' 이라는 영상에서 쉐이더와 렌더러에 대한 내용을 간단하게 다루고 있었는데 내가 유의 깊게 들은 내용은 아티스트가 표현을 할 수 있도록 뭔가 방법을 제공하고 있다는 부분이었다. 

그 전까지는 3D max나 maya를 통해 구현된 3D 오브젝트를 그냥 게임에 넣고 돌리는줄 알았는데 그 '엔진' 이라는걸 만드는 과정에서 쉐이딩과 렌더링을 위한 어떤 기능을 개발하는 것도 포함되어있다는 것을 어렴풋이 알 수 있었다. 

말이 어려워 이해는 못햇지만 우리가 하고자 하는 일에 대입해볼 수 있게 되었다. 우리는 일은 카메라를 통해 입력되는 현실세계를 인식해 가상의 정보(3D 오브젝트)를 정확하게 맵핑해 마치 현실세계의 하나 처럼 보이게 하는 것이다. 크게 나누면 카메라를 통한 입력, 분석, 그리고 3D 오브젝트 배치이며 위에서 언급한것 처럼 어느 정도 컨트롤 가능한 3D 오브젝트를 배치하고 재질감을 표현하는 부분이 우리의 첫번째 문제이다. 쉐이더나 렌더러는 모르겟지만 일단 단순히 아티스트가 작업한 3D 모델을 개발자한테 주면 '뿅'하고 우리가 원하는 화면을 구현 할 수 있는 방법은 일단은 없다라는 결론이 나왔다. 

쉐이더는 무엇인가?

포프님의 정의에 따르면 [쉐이더란 화면에 출력할 픽셀의 위치와 색상을 계산하는 함수] 라고 한다. 잘 모르겠지만 일단 넘어간다. [ 쉐이더란 '색의 농담, 색조, 명암 효과를 주다.' 라는 뜻을 가진 shade란 동사와 행동의 주체를 나타내는 접미사'-er'을 혼합한 단어로 색의 농담, 색조, 명암 등의 효과를 주는 주체라는 의미] 라는 설명을 들으니 조금 더 이해가 안 된다. 그래도 맨 마지막줄을 읽으면서 그래도 조금 이해 하게 되었다. [3D 물체를 화면에 그릴 때, 그 물체를 구성하는 픽셀들의 위치와 색을 프로그래머 마음대로 조작하는 것] 결국 쉐이더는 우리의 문제를 해결해 줄 수 있는 어떤것 이라는건 알았다. 

랜더링은 무엇인가?

짧은시간 공부해서 이해 하기에는 다소 어려운 부분이 있지만 내가 이해 한 렌더링은 쉐이딩 처리된 씬으로 부터 영상을 만들어내는 과정이다. 또한 3차원 연출을 2차원의 그림으로 만들어내는 것이다. 우리가 사용하는 WebGL은 게임처럼 실시간 렌더링을 한다고 알고 있다. 그렇기 때문에 디바이스의 성능이나 환경에 매우 민감하고 영상이나 렌더링 컷에서 보여 줄 수 있는 아주 사실적인 표현이 힘들다는것도 알게 되었다. 일단은 쉐이더든 렌더러든 우리가 개선 할 수 있는 방법이 없기 때문에 가능한 구현되어 있는 라이브러리에서 최대한의 효과를 뽑아내야 한다. 

수박 겉핥기 식의 결론

AR을 활용한 광고를 만들다가 쉐이더와 렌더러에 대한 궁금증이 생겨난 이유에 대해서 쓰고자 했는데 쉐이더, 렌더링 등 하나하나가 쉽게 배우기 힘든 개념이었다. 결국 쉐이더와 렌더러가 정확히 뭔지는 아직도 모르겟다. 어쨌든 간단하게라도 정리를 해 보면 우리는 Web에서 3D 오브젝트를 실제와 같이 표현해 카메라를 통해 입력된 영상과 일종의 합성을 하려고 했고 그러려면 카메라의 움직임에 따라 3D 오브젝트도 유연하게 움직여야 하는 문제가 있었다. 

어플리케이션으에서 구현되는 AR과는 다르게 우리는 Web에서 구동되는, 즉 브라우저를 통해서 구동되는 AR을 원했기 때문에 이를 해결하기 위해서 WebGL과 Three.js를 사용했고 이 두 녀석중 특히 Three.js는 우리가 원하는 기능을 제공하고 있지 못하다. 정확히는 모르겠지만 보통은 3D 오브젝트를 표현하고 원하는대로 움직이게 하기 위해서 쉐이딩, 렌더링 등을 위해 엔진이나 에디터 형태의 도구를 프로그래머가 만들어서 아티스트에게 제공하고 있는듯 하다. 

결론은 Three.js는 WebGL을 단순하게 구현하기 위한 라이브러리 이고 우리가 필요로하는 사실적인 묘사를 위해 둘중 어떤걸 사용하던지간에 우리의 아티스트가 원하는 표현을 할 수 있는 형태의 무언가(엔진, 에디터?)를 만들 필요가 있다는 것이다. 그리고 3D 공간에 대한 기초와 우리가 필요한 것에 대한 정의가 선행 되어야 할 것이다. 

쉐이더와 렌더러에 대한 개념을 조금이라도 알면 우리의 문제를 해결할 수 있을까? 라는 생각에서 시작했는데 결과는 시망똥망이었다. 가능하면 3D에 대한 기초지식이라도 쌓을 수 있으면 좋겠다. 

09.06 추가

랜더링 : 결과물 내는것

쉐이더 : 표현을 위한 로직, 빛을 어떻게 처리?, 쉐이더에 따라 성능 차이 있을 수 있음 

메테리얼 : 쉐이딩을 위한 파라메터의 집합

그럼 쉐이더+메테리얼=랜더링 이 되는건가?