Lab

Stable Fluids をそのまま実装したもの。移流、カール、渦度の閉じ込め、発散、ヤコビ法による圧力投影、勾配減算まで一通り入っています。速度場と染料場をピンポンで回す構成です。

解像度も圧力の反復回数も渦度の強さも外から渡せるので、重さと見た目のバランスは呼び出す側で決められます。

もともとはこのサイトの扉絵の候補でした。常時動かすには重すぎて落としたのですが、捨てるには惜しかったので、この行の上にいるあいだだけ背景を明け渡す形で戻しています。マウスを動かすとかき混ざります。

ノイズをそのまま速度として使うと、粒が一箇所に溜まります。代わりにノイズを高さの地図とみなして、その勾配を90度回したものを速度にしています。こうすると発散がゼロになる、つまり湧き出しも吸い込みも原理的に存在しないので、散らし直す処理が要りません。

履歴を持っていません。粒の位置は毎フレーム、種と時計だけから計算し直しています。前の位置を覚えておくほうが計算は軽いのですが、覚えないぶん、止めても再開しても何も壊れません。Labの背景のように出たり消えたりするものには、この方が向いています。

粒ごとに寿命があって、消える瞬間と生まれる瞬間はフェードします。そうしないと画面のあちこちで粒が点滅します。

やっていることは一行です。ノイズを引く座標に、別のノイズの出力を足す。それだけで、ただの雲だったものが折り重なった襞になります。ここではそれを二段重ねています。

バッファを一枚も使いません。レンダーターゲットも履歴もなく、ピクセルごとに18回ノイズを引いて終わりです。この一覧で一番軽いものが、たぶん一番それらしく見える。

上の二つと並べているのはそのためです。流体は圧力を解くのに何枚もバッファが要り、粒の流れは22000個ぶんの積分を毎フレーム回している。こちらは何も持ちません。同じくらい動いて見えるのに、値段が二桁違います。

扉絵からメニューへ移るときに動いているものです。ロゴのビットマップを一定間隔で走査して、不透明な画素だけを粒子にしています。透明なところからは粒子が出ないので、形がそのまま崩れていきます。

ロゴ自体はWebGLではなく本物の img のままです。alt が要るし、読み込みはブラウザに任せたいので。散る瞬間に画面上の位置だけを粒子側へ渡していて、二つの層が共有しているのはその座標だけです。

画像として正しいことと、壊れて見えることを両立させるための作りです。

ほかの演出と違って、これは状態ではなく出来事です。1秒で終わるので、カーソルを置いているあいだは繰り返し再生しています。

この盤面の後ろで動いているものです。整列した格子がカーソルの周りだけ沈み、選択中の項目を追って横に淡い帯が流れます。画面の構造を、背景でもう一度なぞっている感じです。

格子も帯も揺らぎも、全部ひとつのフラグメントシェーダーで描いています。背景ぜんぶでドローコール1回です。

落ち込みの減衰は二乗ではなく三乗にしています。効きはじめが遅くなって、カーソルが格子を押しのけるのではなく、格子がカーソルに気づく程度の動きになります。

反射に映り込ませる環境マップを、外部の画像を取りに行かずにその場で作ります。グラデーションの背景と光源をシーンに組んで、PMREM に通すだけです。読み込みはゼロで、色や光の位置はコードから変えられます。

three.js で金属っぽい質感を出そうとすると、たいてい数MBのHDRを読むことになります。それが嫌で書いたものです。

Hero Objectを照らしているのがこれです。あの球の表面に映り込んでいるものには、外部のファイルが一枚も使われていません。

最初の扉絵です。球の表面を simplex ノイズで押し出して、ゆっくり回しながらポインタの方向へわずかに傾けています。端末の性能に応じて分割数を落とす作りです。

頂点を動かすと、もとの法線は嘘になります。ここでは接平面上の二点をずらして、その三点から法線を毎フレーム作り直しています。これをやらないと、ハイライトが表面に乗らず、上を滑っていくように見えます。

この一覧で唯一、全画面の板ではなく本物の立体です。キャンバスが深度バッファを持っているのは、この球の裏側が表側の上に描かれないようにするためだけです。

見た目は悪くなかったのですが、扉絵としては「何のサイトか」が一切伝わらないので落としました。