WebGL：HTML5でカラーバッファが勝手にクリアされるのを防ぐ方法

WebGLで前回の描画内容が消えてしまう問題

WebGLでは、コード上でカラーバッファをクリアしないよう意図していても、次の描画サイクルの開始時に画面が自動的にクリアされてしまうことがあります。そのため、前フレームの描画結果を残したい場合には困りものです。

mycanvas.clearColor(d[1], d[2], d[3], 2.0);
mycanvas.clear(gl.COLOR_BUFFER_BIT);

上記のような明示的なクリア処理を書かなくても、デフォルト設定では毎フレームの描画前にドローバッファがリセットされる仕様になっているため、前回の描画内容は保持されません。

解決策：preserveDrawingBuffer オプションを有効にする

この問題を回避するには、WebGLコンテキスト（WebGLRenderingContext）を作成する際に preserveDrawingBuffer: true を指定します。こうすることで、以前の描画バッファの内容をそのまま保持できます。

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

デフォルトの動作と注意点

preserveDrawingBuffer のデフォルト値は false です。このプロパティを true に変更するだけで、前回の描画結果を簡単に残すことができます。

ただし、このオプションを有効にするとブラウザ側でのバッファ管理コストが増え、パフォーマンスにわずかな影響が出る可能性があります。そのため、canvasのスクリーンショット取得や描画結果の保存など、本当に必要なケースに限定して使用するのがおすすめです。