웹 3D 그래픽스에 관한 소회

규모 있는 3D 그래픽스 작업은 프론트엔드 프레임워크를 결합시키면 안 된다. 프론트엔드가 핸들링하는 스코프는 DOM 기반 UI에 한정된다. 메서드 하나 정도의 간단한 그래픽이라면 프레임워크 내에 섞어도 괜찮지만 여러 모델들이 상호작용하는 하나의 3차원 세계를 구현하고자 한다면 역시 고전적인 클래스, 디자인 패턴, OOP 기반에 정적 언어를 사용해 직접 시스템을 구축해야 한다. 그렇지 않으면 무조건 스파게티 코드가 되어 추후 그래픽스 쪽 확장은 포기해야 한다. 아쉽게도 유니티를 사용하지 않는 범주에서 현재 웹 그래픽스 프레임워크는 없다. 그저 각자의 상황에 맞는 패턴을 찾아 시스템을 구축해야 한다.

그래픽스 시스템이 구축된 후에는 외부 인터페이스를 만들어 프론트엔드에서는 비즈니스 로직만 UI에 얹도록 한다. 그래픽스 내에 사용되는 라이브러리는 캡슐화시켜 프론트엔드 레벨에서 접근할 수 없게 경계 지어 놓아야 하기 때문이다.

ES6의 프록시 객체로 그래픽스 라이브러리 정보의 변경 권한은 없애되 탐색만 할 수 있도록 만들어두는 건 어떨까? vue 프레임워크의 watch를 사용해 스테이트 변경을 감지할 수 있으므로 그래픽스 엔진 내부의 비즈니스 로직을 좀 더 바깥으로 빼서 엔진 부분 부분의 기능을 좀 더 모듈화 할 수 있을 것 같다.