WebGL で高速 BlendMode その 3

Posted :

WebGL を使った 2D 画像のブレンドは、three.js でも可能です。

demo

three.js はパースペクティブが効いた 3D のレンダリングが一般的に知られています。一方でパースペクティブなしの表示も可能です。その場合は camera インスタンス作成時のコンストラクターに

var camera = new THREE.PerspectiveCamera( fav, aspect, near, far );

ではなく

var camera = new THREE.Camera();

を利用します。（これで z は単なる重なり順となります）

加えて、three.js はメッシュのマテリアルに blending というプロパティーをサポートしています。blending の値には

  • THREE.NoBlending
  • THREE.NormalBlending
  • THREE.AdditiveBlending
  • THREE.SubtractiveBlending
  • THREE.MultiplyBlending
  • THREE.AdditiveAlphaBlending

のいずれかを指定できます。（中身はただの定数です）

これらの組み合わせで、2D のブレンドモード in WebGL を three.js でも扱うことができるわけです。自分で書かなくてはいけないコードは圧倒的に少なくなります。