こちら、先日弊社で制作をさせていただいたサイト。
プライベートサウナのサービスを2023年春開業予定の「sayoka」様のサイトです。
サイト上でマウスを動かすと、背景で蒸気が巡るようなアニメーションが動作するようにデザインしました。
このアニメーションを実装する上で、技術担当者である筆者が考えたことをまとめさせていただければと思います。
自然界で感じられない動きはNO
ディレクターからの
- 蒸気っぽいアニメーションが背景で動くようにして欲しい
- 水の中で絵の具が混ざっていくような感じ
- マーブル模様みたいな感じ
といった言葉でアニメーションの実装の相談がありました。
相談を受けて最初に、
「蒸気っぽい、マーブル模様っぽい表現の動画素材を作成もしくは購入し、背景にセットする」
という形でのアニメーションを考えました。
ですが却下。
止まることなく背景を動かそうとしたらループ再生を使わざるを得ないのですが、ループする際に蒸気の動きが連続的でなくなってしまうと考えたからです。
連続的な動きが途切れてしまうのは自然な動きではありません。好ましくないです。
もう一つ。マーブル模様っぽくはありませんが、煙や蒸気っぽい画像素材をアニメーションを駆使して、蒸気が巡っているように見せる手法も考えました。（↓この動画の手法です。）
ですが、これも却下。
確かにそれっぽいのですが、実際の自然な煙や蒸気の動き方とは異なるものですから、どうしても不自然な感じが拭えません。蒸気の動きは不規則であるべきだし、規則的な動きや周期的な動きでは自然な動きから遠ざかるばかりです。
弊社の制作のこだわりとして持っている
「できるだけ自然に存在する動きを表現する」
という考えに即して、より良い方法を模索しました。
流体シミュレーション
そもそも、蒸気の動きとは科学的に捉え直すと、流体の動きと考えられます。
技術担当者は流体力学に対してのある程度の理解はありましたから、どういった方程式に即せば流体の動きのシミュレーションが可能なのかという観点で考えるのが妥当だと考え始めました。
そこでWeb上で流体シミュレーションを実装した例がないかと考えて、以下のサイトに行きつきました。
こちらのサイトのソースコードを使わせていただき、今回のsayoka様のサイトに実装した次第です。
流体力学で使う方程式である ナビエ＝ストークス方程式 を用いての計算シミュレーションをwebブラウザ上で行うものになっており、マウスの動きを外力として取得します。
元のソースコードでは、流体の動きに対するパラメータをリアルタイムで変更可能なものにしていましたが、今回の実装ではパラメータを勝手にこちらで決定し、出力される色も薄いグレーになるようにしました。
まとめ
弊社の制作するアニメーションでは、自然界に存在する動きというものを重要視します。
完全に自然界のものと同じにすることは不可能ですが、できる限り自然の動きに寄せるべくさまざまな工夫を技術担当者は常日頃考え続けています。
WebGLやWebGLライブラリのThree.jsは、そのための頼りになる味方であり、今後も制作に使用した際はこのように実装例をご紹介できればと考えております。