Three.js で始めるレンズフレアとフォグ

光源を当てて影ができるととてもいい感じになってきたが、
更に光源から生成されるレンズフレアを描画するとグッと雰囲気がよくなる。
あと、フォグを追加する事で、遠くのオブジェクトが自然にぼやけるのでこれもいれておきたい。

レンダラーの設定

デフォルトだと、alpha描画が無効になっているみたいなので、
レンダラー生成時にtrueとしておく必要がある。
ついでにアンチエイリアスも有効にしておこう。

let renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
  • alpha – whether the canvas contains an alpha (transparency) buffer or not. Default is false.
  • antialias – whether to perform antialiasing. Default is false.

Threejs-Docs

レンズフレア

レンズフレアとは、太陽光などを写真やカメラで写す際に現れる光の輪です。

必要になるのはテクスチャ画像だけ。

レンズフレアクラスを生成し、
カメラとの距離を表す0~1の値を指定して、テクスチャを配置していく。

// スポットライト
let spotLight = new THREE.SpotLight();
spotLight.castShadow = true;
spotLight.position.set(30, 50, -100);
scene.add(spotLight);

// レンズフレアに使用するテクスチャ画像
let textureFlare0 = getTexture('lensflare0');
let textureFlare1 = getTexture('lensflare1');
let textureFlare2 = getTexture('lensflare2');
let textureFlare3 = getTexture('lensflare3');

// レンズフレアの生成
let flareColor = new THREE.Color(0xffaacc);
let lensFlare  = new THREE.LensFlare(textureFlare0,              // texture
                                     350,                        // size
                                     0,                          // distance (0がフレアの座標、1になるほどカメラに寄る)
                                     THREE.AdditiveBlending,     // blending
                                     flareColor);                // color
lensFlare.position.copy(spotLight.position);
scene.add(lensFlare);

// 追加のフレア
lensFlare.add(textureFlare1,           // texture
              20,                      // size
              0.2,                     // distance
              THREE.AdditiveBlending); // blending
lensFlare.add(textureFlare2, 20,   0.4, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 30,   0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 1000, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 50,   1.0, THREE.AdditiveBlending);

テクスチャを読み込むgetTexture関数は、前回の記事を参照

フォグ

シーンのfogプロパティを設定する事で、フォグ効果を得られる事ができる。

フォグを設定すると、カメラから遠ざかるオブジェクトほど、霞んで見えなくなります。
遠くのものの境目が曖昧になるので、
より自然に遠くのものである事が表現できます。

scene.fog = new THREE.Fog(0x000000,  // hex
                          0.010,     // near
                          2000);     // far

シーンのfogプロパティに設定するだけ。

Fogなし

Fogあり

遠くの方の境界線が霧がかったように表現される。


コメントを残す