WebGL은 왜 등장했을까?

작성자: jeekpark

WebGL이 나오기 전의 웹 그래픽스

나에겐 초등학생이었을 시절의 이야기이다. 메이플이나 서든어택과 같은 데스크톱 어플리케이션 게임말고도, 야후 꾸러기, 네이버쥬니버, 주전자닷컴과 같은 웹사이트에서 간단한 게임을 즐겨했다. 그 시절에는 웹에서 그래픽스 기반의 게임을 플레이하기 위해 여러 플러그인을 설치해야했었다.

구시대 웹 전용 외부 플러그인/소프트웨어

• Adobe Flash
• Microsoft Silverlight
• Java Applets

이 중 Adobe Flash가 제일 대중적으로 많이 사용되었다.

Flash의 문제점

• CPU를 사용하는 렌더링 방식을 사용하기 때문에 렉이 발생.
  • 벡터 그래픽 방식으로 작동되어 비트맵에 비해 용량이 작았으나, 모니터에 출력할려면 벡터를 픽셀에 대응시켜야하기 때문에 별도의 과정이 필요하다. 벡터/버텍스가 많아질수록 순차적인 CPU 방식으로는 제한사항이 많아진다.
  • 이후에 늦게 GPU 렌더링을 지원하게 되었지만 이미 표준이 바뀌어가고 있었다.
• 보안 취약
  • 너무 많은 기능을 지원했고 해킹 루트로 많이 사용되었다.
  • 2010년대 랜섬웨어는 대부분 어도비 플래시를 통해 감염되었다.
• 호환성 문제
  • 표준이 아니기때문에, 사용자가 플러그인을 직접 설치해주어야한다.
  • 모바일 기기에서 Flash 설치가 불가하다. 젤리빈 이하 안드로이드는 가능하지만 너무 구버전이다. ios에서 설치되지 않는 점이 제일 문제였다.

HTML5와 WebGL의 등장

이전 방식들은 위와 같은 문제들이 있었고, 웹표준이 점점 진화하게 되면서 많은 문제들이 해결되었다.

웹 표준 WebGL은 HTML5에서 웹표준으로 등록되었다. 웹표준을 준수하는 브라우저는 WebGL 기능이 내장되어있기 때문에 별도의 플로그인을 설치하지 않아도 바로 사용이 가능하다. 사용자는 웹페이지를 방문하기만 하면 바로 사용이 가능한 UX를 체험할 수 있게 되었다.

하드웨어 가속(GPU) WebGL은 GPU를 활용해 그래픽스를 렌더링할 수 있다. CPU만으로 벡터를 렌더링하던 방식에 비해 빠르고 효율적인 처리가 가능해졌다. 또한 OpenGL의 강력한 파이프라인을 활용하기 때문에 높은 프레임속도와 부드러운 표현이 가능하다. 웹페이지에서 레이트레이싱

WebGL의 한계점

WebGL이 처음에 나왔을 때, 사람들의 기대감이 컸다. WebGL이 모든 그래픽스 어플리케이션을 대체할 것이라는 기대감이었다. 웹 기반으로 실행되는 범용성과 접근성이 ‘웹’의 장점이었기 때문에 타당한 기대였지만, 현실적인 여러 한계점이 있었다. 대표적으로는 성능의 제한과 개발툴이다.

WebGL이 OpenGL/DirectX보다 성능이 좋지 않은 이유

• 브라우저를 통해 실행된다. 브라우저 자체 성능 한계와 자바스크립트 처리 속도에 의존된다. 브라우저는 접근성이 좋은 만큼 보안성, 호환성, 안정성을 추구해야하기 때문에 원시적인 로우레벨의 하드웨어 접근이 제한된다.
• 하드웨어 접근이 제한된다. 직접적으로 GPU의 모든 기능을 제어하거나 최적화할 수 없다. 이는 OpenGL이나 DirectX가 제공하는 하드웨어 가속 기능을 모두 사용할 수 없다는 것을 의미한다.
• API 추상화의 문제. OpenGL/DirectX보다 높은 수준의 추상화를 제공한다. 이는 쉽게 사용할 수 있어야한다는 HTML의 철학때문이다. 높은 수준의 추상화는 사용하기 편하지만, 세부적인 하드웨어 제어를 할 수 없게 만든다.
  • 비슷한 맥락으로 C++의 최고 장점은 C를 완벽 호환한다는 점이다. C++의 고수준 추상화로 세부적인 제어가 불가능할 때, C 코드로 해결할 수 있다. 심지어 인라인 어셈블리어까지 지원한다. 자바/파이썬같은 객체지향언어에서 불가능한 솔루션을 C++에서는 C/인라인어셈블로 가능하게 해준다. 반칙 수준의 장점이다.
• 자바스크립트. 언리얼엔진은 스크립트 언어가 C++인 점을 생각하면 스크립팅 능력에서 차이가 날 수 밖에 없다. 동적타이핑과 가바지 컬렉션이 쉬운 개발을 만들어주지만 리얼타임 렌더링과 같은 높은 성능을 요구하는 필드에서 과연 적절한 방식일까.

개발툴

• 리얼타임 렌더링 프로덕트는 높은 수준의 프로그래밍과 디버깅을 요구한다. VSCODE의 익스텐션만으로 개발하기에는 여러 제약이 있다. 아직 개발툴이 현저히 부족하기 때문에 높은 수준의 프로덕트를 만들기 어려운 문제가 있다.
• 여담으로 개발툴이 중요한 예시가 있다. 러스트가 C/C++을 대체하기 어려운 이유는 Visual Studio때문이다. 업계는 비지니스 벨류가 중요하기 때문에, 개발환경과 효율이 중요하다. 당장 프로덕트를 러스트로 개발하기에는 VS에서 사용하던 디버거와 개발툴을 모두 포기해야한다. MSVC만큼 앞서있는 컴파일러를 찾기 힘들고 당장 러스트의 컴파일러를 MSVC만큼 신뢰하기 어렵다.

결국 태생이 어쩔 수 없다. 높은 성능을 요구하는 리얼타임 렌더링에서 높은 추상화와 호환성, 안정성, 보안성은 아직 큰 제약이다. 미래에는 웹에서 영화와 같은 리얼타임 렌더링 그래픽을 경험할 수 있는 날이 오겠지만, 당장으로서는 WebGL은 아직 간단한 그래픽스를 위한 기술이다.