p5.jsのWEBGLモードで透過設定をして、canvasの透明化を回避する

課題

以前から、 p5.jsのWEBGLモードでのアルファ値を使った時の挙動に悩んでいました。

gin-graphic.hatenablog.com

WEBGLモードでアルファ値を持ったカラーを使って描画すると、ブラウザの背景（白）がみてるんですよね。 p5.jsのbackgroundでセットした色を超えて、ブラウザ背景が見えるので、透明度を持った色を使って作品が作れませんでした。

（ただし、アルファ値が0だとブラウザ背景でなく、p5.jsのbackgroundが見えるのはわかっていたんですけどね。）

setAttributesで解決

色々調べた結果、 p5.jsのWEBGLモードの時に setAttributes("alpha", false);と設定することで、canvas自体の透明化をOFFにすることができます。

デフォルトではsetAttributes("alpha", true);になっています。

この設定をするとWEBGLモードの際に、アルファ値を使った描画でブラウザ背景がみえることがなくなります。

前回の記事 のコードをそのままで、setAttributes("alpha", false);のみ追加した結果が下になります。

ブラウザ背景に影響されない描画になったはずです。 canvas自体が透明になることを回避できました。

詳細解析

前回同様Linux環境でコマンドidentify -verbose hoge.pngにて画像情報を確認しておきます。

Channel depth: Red: 8-bit Green: 8-bit Blue: 8-bit Alpha: 1-bit Channel statistics: ... Alpha: min: 255 (1) max: 255 (1) mean: 255 (1) median: 255 (1)

アルファ値が1bitで扱われており、全ピクセル1となっています。 これはP2Dモードでの描画と同じ状態です。 出力画像のデータとしても変化しているのが分かりました。

まとめ

WEBGLモードで透過設定 setAttributes("alpha", false); をすることで、アルファ値を持った描画でもP2Dと同じように扱うことができる様になりました。 今後の制作に役立てていきたいと思います。

今回使ったソースコード

let bg=100;
let nx=7;
let ny=5;
let d=50;

function setup() {
   createCanvas(500, 500, WEBGL);

   setAttributes("alpha", false);

   colorMode(HSB);
   rectMode(CENTER);
   background(bg);
   translate(-width/2, -height/2);

   strokeWeight(1);
   stroke(0,0,50,0.5);

   for(let i=0;i<nx;i++){
      for(let j=0;j<ny;j++){
         let col = color(360/(nx-1)*i ,(i==0)?0:100 , 100/ny*j, 0.5) ;
         let x = (i+0.5)*width/nx;
         let y = (j+0.5)*height/ny;
         push();
         fill(col);
         translate(x, y);
         rect(0, 0, d);
         pop();
      }
   }
}

function keyPressed(){
   //save PNG
   save("img_"+month()+day()+hour()+minute()+second()+".png");
}

参考文献

developer.mozilla.org