HTML Generative Art를 MP4로 렌더링하여 EO1에서 재생하기

EO1-Museum 프로젝트를 진행하면서 한 가지 아쉬운 점이 있었다. HTML과 JavaScript만으로도 브라우저에서 꽤 멋진 움직이는 그래픽을 만들 수 있지만, 10년도 더 된 Electric Objects EO1의 하드웨어로 이것을 직접 실행하기에는 성능이 턱없이 부족하다는 것이다. 실제로 HTML5 Canvas를 이용한 그래픽을 EO1에서 실행해 보니 프레임 속도가 너무 낮아서 감상용으로 쓰기 어려웠다.

그렇다면 EO1에서 직접 계산하게 하지 않으면 된다. 처음에는 웹브라우저에서 재생을 하면서 OBS Studio에서 녹화하는 방법을 써 보려 했으나 창을 제대로 맞추는게 너무 어려웠다. 고민 끝에 최종적으로 선택한 방법은 다음과 같다.

Playwright를 통해 headless Chromium을 실행하고, EO1 화면과 같은 1080 × 1920 해상도로 HTML 그래픽을 실행한 뒤 이를 동영상으로 캡처하였다. 이어서 FFmpeg를 이용하여 H.264 형식의 MP4 파일로 변환하는 방법을 만들었다. 내가 만든 render_art.py라는 파이썬 스크립트가 이 과정을 자동으로 처리한다.

과정은 대략 이렇다.

HTML / JavaScript
        ↓
PC의 Chromium에서 실행
        ↓
화면을 동영상으로 캡처
        ↓
FFmpeg로 H.264 MP4 변환
        ↓
EO1에서 재생

이렇게 해 두면 원래 그래픽이 얼마나 복잡한지는 EO1에게 별로 중요하지 않다. 수많은 입자가 움직이거나, 궤적이 남거나, 물체끼리 충돌하는 계산이 들어가더라도 PC에서 미리 계산하여 동영상으로 만들면 EO1은 그저 MP4 파일을 재생하기만 하면 된다.

HTML 파일은 원본 작품(master artwork)으로 남는다. PC의 브라우저에서는 원래의 움직이는 작품을 실행하면서 여러 파라미터를 조절해 볼 수 있고, 마음에 드는 상태가 정해지면 이를 5분짜리 MP4 등으로 렌더링하여 EO1으로 옮긴다. EO1-Museum 앱에서는 이렇게 만들어진 여러 동영상을 임의의 순서로 연속 재생하도록 했다.

결국 역할 분담은 아주 단순해졌다.

브라우저는 작품을 만드는 환경이고, PC는 렌더러이며, EO1은 디스플레이다.

이 방법을 마련하고 나니 오래된 EO1의 그래픽 성능을 더 이상 크게 걱정할 필요가 없어졌다. 브라우저에서 표현할 수 있는 그래픽이라면 일단 작품을 만들어 보고, 완성된 움직임을 MP4로 굳혀 EO1에 넣으면 된다.

직접 만든 generative art와 렌더링 방법은 다음 페이지에 정리해 두었다.

Generative Art Gallery

내가 제일 좋아하는 작품은 '우주 해파리'(Space Jellyfish). 이것으로 약 2주에 걸친 개발 작업은 모두 마친 셈이 되었다. 앞으로는 EO1에서 보일 작품을 고르거나 만드는 일을 즐기면 된다.