Willow Ferry

説明

「Willow Ferry」は、ブラウザでリアルタイムにレンダリングされる江南の水郷です。白壁と黒瓦、馬頭壁、提灯を吊るした軒の下に並ぶ格子の店構え、運河に架かる石造りのアーチ橋、石段につながれた烏篷船（うほうせん）、翡翠色の水面に枝を垂らす柳。ロード画面の一文が、作品のトーンを伝えます。「Follow the water. Come home a little late.」

町には町だけの 1 日が流れています。ゴールデンアワー、ブルーアワー、月夜、夜明け、朝、午後と、およそ 7 分でひと巡りし、太陽と月は絶えず動き、影もそのあとを追ってゆっくりと回り込みます。T を長押しすると時間が速く進み、1–5 を押すと午後、ゴールデンアワー、ブルーアワー、月明かり、霧雨へ直接切り替わります。霧雨は時間帯ではなく天気なので、選ぶと時計が止まり、別の時間帯を選ぶまでそのままです。

視点は Willow Bank、Moon Bridge、Ferry Steps、Tea Pavilion、Town in the Mist、The Slow Boat の 6 つで、←/→ キーで順に切り替えられます。どの視点にも短い一文が添えられ、時間帯によって変わるものもあります。たとえばゴールデンアワーの Willow Bank には「The sun rests in the arch.」と表示されます。Moon Bridge の一文は卞之琳の詩「断章」を踏まえたもので、「You stand on the bridge to watch the view. / From a window, someone watches you.」とあります。

ドラッグで見回し、スクロールで前へ滑るように進み、WASD で歩き（Shift で加速、Q/E で上昇・下降）、クリックでピントを合わせます。絞りボタンは f/1.4 から f/16 まで段階的に切り替わり、最後の段では被写界深度がオフになって全体にピントが合います。カメラには手持ち撮影のような穏やかな揺れ（Drift）があり、オフにもできます。H を押すとインターフェースが非表示になります。「Ride the boat」を押すと、カメラが舳先へ滑るように降り、船は運河に沿ってゆっくり流れていきます。←/→（A/D）で舵を取り、↑（W）で強く漕ぎ、↓（S）で力を緩めます。手を離すと、船はまた自分の航路に戻ります。どこまで航路を外れてよいかはルートに沿って実測してあるので、護岸にも、係留された船にも、橋のアーチにもぶつかりません。

町はすべてコードで作られています。民家、石造りのアーチ橋、烏篷船、提灯、柳、桃の木、護岸の石積みと石段は、どれも Blender Python のスクリプトで生成し、GLB として書き出しています。民家のジェネレーターは区画を割り、家の種類を選び、高さに応じて馬頭壁を設け、家々のあいだに塀で囲まれた小さな庭をはさみ込みます。手作業で配置したのは、船着き場の石段のそばに建つ主役の家だけです。空と、漆喰・石・木材・小石の表面の一部には、Poly Haven の CC0 の実写スカイとスキャンテクスチャを使っています。それ以外のテクスチャとすべてのサウンドも、スクリプトで生成しています。

インターフェースは英語のみで、サウンドは最初のクリックで鳴り始めます。おすすめはデスクトップ版の Chrome、Edge、Safari で、WebGPU のない環境では WebGL2 に切り替わります。初回は 40 MB 強をダウンロードするため、ロード画面がしばらく表示されます。

ブラウザで動く仕組み

ウェブ側は three.js r186 の WebGPU レンダラーと Vite で構築し、モデルは meshopt で圧縮しています。Blender から取り込んだモデルは、マテリアル名をもとに TSL でマテリアルを組み直します。水際のしみ、苔、コースティクス、風化、風による揺れ、窓や提灯が夜に放つ明かりはすべてシェーダーで計算しており、同じ TSL マテリアルは WebGL2 でも動作します。

いちばん力を注いだのは水です。反射、屈折、濁りと吸収、太陽や月のきらめきと月の道、雨の波紋、風によるさざ波のまだら、船の航跡、舳先が押しのける水。空は Poly Haven の実写スカイで、時間帯のあいだをクロスフェードしながら、環境光と太陽・月の方向も与えます。雲の影が町や山並み、水面の上を流れ、運河には低い霧の帯が横たわり、ホタルや漂う光の粒、雨筋も描かれます。

ポストプロセスでは、SSAO（環境光のみに適用）、霧の帯、ブルーム、被写界深度、カラーグレーディング、FXAA を加えます。オートフォーカスはデジタル一眼レフのように画面中央からレイを飛ばして行い（three-mesh-bvh で高速化）、クリックしてピント位置を選ぶこともできます。動作を軽く保つため、シーンはレイヤーに分けています。丸瓦、格子、真鍮の金具といった細部はメインビューでのみ描画し、28 メートルより先では丸ごと非表示にします。運河の底と小石は反射に映さず、石積みと樹木は SSAO のプリパスから外しています。キーライトの影は、ライトが動いたときに描き直し、それ以外は 5 フレームごとに更新します。船のパーツは読み込み時にマテリアルごとに統合し、草と護岸の石はインスタンシングで描画しています。

サウンドはすべて Web Audio でリアルタイムに合成しており、オーディオファイルは 1 つもありません。岸に寄せる水音としずくの音（水辺に近いほど大きくなります）、柳を渡る風、昼の鳥の声、夜のコオロギとカエルの声、遠くの寺の鐘、船に乗っているときの櫂の音、そして音楽として、まばらに爪弾かれるペンタトニックの調べ。