WebGL에서 드로잉 버퍼가 자동으로 지워지지 않도록 설정하는 방법

문제 상황

WebGL을 사용하다 보면 코드로 색상 버퍼를 지우지 않았는데도, 다음 드로잉 사이클(draw cycle)이 시작되는 시점에 화면이 자동으로 초기화되는 현상을 겪을 수 있습니다.

예를 들어 아래와 같이 배경색만 지정하고 버퍼를 클리어하는 경우에도, 브라우저는 매 프레임마다 드로잉 버퍼를 비워버립니다.

gl.clearColor(0.0, 0.0, 0.0, 1.0); // RGBA 값은 0.0 ~ 1.0 범위 사용
gl.clear(gl.COLOR_BUFFER_BIT);

원인

브라우저는 기본적으로 컴포지팅(compositing) 후 드로잉 버퍼의 내용을 유지할 필요가 없다고 판단하여, 다음 프레임을 그리기 전에 버퍼를 자동으로 지웁니다. 따라서 이전 프레임에 그린 내용은 기본 설정으로는 남지 않습니다.

해결 방법: preserveDrawingBuffer 옵션

WebGLRenderingContext를 생성할 때 preserveDrawingBuffer: true 옵션을 지정하면 이전 프레임의 드로잉 버퍼가 지워지지 않고 그대로 보존됩니다.

const gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true });

preserveDrawingBuffer의 기본값은 false입니다. 이 속성을 true로 변경하면 매 드로잉 사이클마다 버퍼가 초기화되지 않으므로, 이전에 그린 내용을 쉽게 유지할 수 있습니다.

참고 사항

이 옵션을 활성화하면 브라우저가 버퍼를 계속 보존해야 하므로, 일부 환경에서는 성능에 영향을 줄 수 있습니다. 애니메이션처럼 매 프레임 전체를 다시 그리는 경우에는 기본값(false)을 유지하는 것이 좋으며, 그림판처럼 사용자의 입력 결과를 누적해야 하는 경우에 true로 설정하는 것이 적합합니다.