第11回から前回の第15回「素材に凹凸と反射の強弱を与える──法線マップとスペキュラマップ」までつくってきた「Animating particles simulating fire」をお題としたパーティクルによる炎の表現は、いよいよ仕上げにかかる。炎のアニメーションや床への照り返しなどに細かな手を加えたい。
炎の照り返しを少しずつ拡げる
まずは、いわれないと気づかないかもしれない細かなアニメーションからだ。炎の照り返しを床にアニメーションとして加えた。その始まりで、炎のパーティクルは次第に大きくなるのに、照り返しのアニメーションはいきなり範囲が広い(図1)。これをパーティクルと同じように、少しずつ拡げるようにしたい。
もっとも、炎が照り返す光のアニメーションは、前から手を加えるつもりでいた。炎のアニメーションを扱うクラス(FireObject)のコンストラクタに定めたプロパティのひとつ(strength)がこれまでまったく使われていない。実は、このプロパティが照り返しの光の強さを示す。
炎の照り返しのアニメーションを行うメソッド(animateLight())で、つぎのように前述プロパティ(strength)の値を増してゆき、それを光のLightBase.diffuseとLightBase.specularプロパティの値に反映させればよい。もちろん、炎のアニメーションを扱うオブジェクト(fireObject)がもつ光(light)のこれらのプロパティ値は以下のとおり、はじめに0に定めておく。
以上の修正を施したスクリプトは、炎のアニメーションを扱うクラス(FireObject)とパーティクルのアニメーション全体を組み立てるJavaScriptコードに分けて以下に掲げた(コード1およびコード2)。これで、炎が照り返す光も、炎のパーティクルと同じように、少しずつ広がってゆく。
平行光源を調整する
つぎは、床に当てる平行光源(DirectionalLight)を少し調整しよう。光のオブジェクトをつくる関数(createDirectionalLight())に引数を3つ加えて、プロパティに定める。LightBase.diffuseとLightBase.specular、およびLightBase.ambientColorだ。LightBase.ambientColorプロパティは、環境光の色を決める(デフォルト値0xFFFFFF)。第14回の「光をアニメーションさせる」で紹介したプロパティと合わせて、改めてつぎの表1にまとめた。
表1 LightBaseクラスのプロパティ
LightBaseクラスのプロパティ | 値と機能 |
ambientColor | 環境光のカラー値を示す0から0xFFFFFFまでの整数(デフォルト値0xFFFFFF) |
diffuse | 光の拡散する強さを示す0以上の数値(デフォルト値1) |
specular | 光の反射する強さを示す0以上の数値(デフォルト値1) |
fallOff | 光が届く距離の最大値(デフォルト値10000) |
radius | 光が届く距離の最小値(デフォルト値9000) |
平行光源(DirectionalLight)のオブジェクトをつくる関数(createDirectionalLight())とその呼出しには、つぎのような手を加えた。環境光の強さ(ambient)を増す替わりに、色(ambientColor)は少し暗めに抑える。光源のカラー(color)は少し暗めに赤みをつけ、拡散(diffuse)も抑え、反射(specular)はなくした。すると、直射日光の遮られた夜のような見た目になり、オブジェクトは赤みを帯びた光の中に浮かび上がる(図2)。
炎の数を増やす
最後にお題の「Animating particles simulating fire」と同じように、炎の数を増やしてみよう。もっとも、炎のパーティクルをつくる関数(createParticles())には、すでにつくる数が第1引数に定められている。したがって、つぎのようにこの値を変えれば済む。また、床をつくる関数(createPlane())に渡す引数のうち、床の素材の光沢を与えるMethodMaterial.specularプロパティの値(specular)は高めた。ただ、炎の数が増えた分、照り返しは強まる。そこで、炎のオブジェクト(fireObject)をアニメーションさせるメソッド(animateLight())に対して、渡す調整の引数値は少し下げた。
これで、炎のパーティクルの数は増えて、床に照り返す光の強さも調整できた(図1)。炎のアニメーションを扱うクラス(FireObject)の定めは前掲コード1のまま変えていない。書き上がったパーティクルの数を増やしたアニメーションのJavaScriptコードは以下のとおりだ(コード3)。また、サンプル1をjsdo.itに掲げた[1]。