WebGLContextAttributesの切り替え

WebGLでは，canvasからgetContext()でWebGLRenderingContextを取得する際に，WebGLContextAttributesといういくつかの設定を渡すことができる．

var canvas = getElementById('canvas');
var options = { alpha : true };
var gl = canvas.getContext('webgl', options) || canvas.getContext('experimental-webgl', options);

この設定は，コンテキストの生成時にのみ利用され，それ以降は変更することができない．

実験的に色々切り替えてみたいときに不便だし，なんとかならないかなぁ，と思っていたけれど，生成時にしか設定できないなら，canvasを生成し直せば良いのでは，と思ったのでやってみた．

// アルファチャンネルのオンオフを設定するチェックボックスの要素を取得
var alpha = document.getElementById('alpha');

alpha.addEventListener('change', function(){
  // ノードを複製する
  var newCanvas = canvas.cloneNode(true);

  // WebGLContextAttributes設定用オブジェクトの生成
  var options = {};
  options.alpha = alpha.checked;

  // WebGLRenderingContextの差し替え
  gl = newCanvas.getContext('webgl', options) || newCanvas.getContext('experimental-webgl', options);

  // canvas要素の入れ替え
  canvas.parentNode.replaceChild(newCanvas, canvas);
  canvas = newCanvas;
}, false);

とりあえずいくつかのブラウザで試してみたが，上手く動いているみたい．

他に良い方法があれば知りたい．

以下サンプル．背景のクリアカラーを設定できて，アルファチャンネルの有無を切り替えられる．

R

G

B

A

アルファ