2つの塔と、柔らかな訪問者。
空間をつくり、雲を育て、
通り抜ける道を見つけよう。
一時停止し、時間を動かして通過の様子を観察しましょう。
接近 → 変形 → 解放考え方 / 柔らかさと構造が出会う
単純な通過が、小さな物語になります。白い雲が淡い塔に近づき、細くなって通り抜け、少し雨を落とし、反対側で膨らむ。青い背景が、柔らかな輪郭を見やすくします。
風景を層ごとにつくります。4つの表示で、カメラ、雲のボリューム、変形、全体の風景を個別に見られます。図でルールを読み、操作で変化を試せます。体験に準備は不要です。サンプルの編集には、JavaScriptとシェーダーの基礎が役立ちます。
変形と雨は、見た目を設計したアニメーションです。流体や天気のシミュレーションではありません。
塔は2つの箱です。上面は暖かなクリーム色で、側面は片方をもう片方より冷たい色にします。窓や雲を加える前から、この3つの色が光の向きを伝えます。
平行投影のカメラは、平行な線をそのまま平行に保ちます。3D位置をカメラの右方向と上方向の軸に投影すると、画面上の位置が求まります。カメラの向きは固定です。遠い塔は高い位置に、手前の塔は低い位置に見えます。
試してみよう： 「空間」を選び、すき間を最小から最大へ変えましょう。塔の形は同じで、間隔だけが変わります。すき間は、このシーンの任意の単位で測っています。
重なった7つの球状のかたまりから始めます。滑らかな最小値で距離場を混ぜ、ひとつの形にします。その場を密度に変えると、空気から濃い内部へ柔らかく移り変わります。重なりによって、硬いつなぎ目のない、ふくらみのある輪郭ができます。
視線に沿って雲をサンプリングし、色と不透明度を積み重ねます。左上の光に向けた密度の確認で、光が遮られる部分を暗くします。控えめな3Dの揺らぎが完全に滑らかな輪郭を崩し、暖かな上面と冷たい下面が立体感を伝えます。
試してみよう： 「立体感」を選び、輪郭の柔らかさを変えましょう。小さな値は境界を鋭く、大きな値は密度の変化を広げます。次に雲の大きさを変えると、かたまりが一体のボリュームとして大きくなります。
通過の方向と、すき間の幅を別々の軸として考えます。雲が塔に近づくと、滑らかな接触の重みで、元の形から縮めた形へ移ります。通り抜けた後は、その重みが小さくなります。
少し上へ持ち上げる動きも加えます。雲が柔らかく感じられ、ふくらむ余地もできます。接触の重みは連続的に変わるので、壁で急に切り替わりません。この表現用のルールは、質量保存や衝突力の計算を行いません。
試してみよう： 「変形」を選び、時間を7.5秒にします。すき間を狭め、幅の縮小率が増えて雲が伸びる様子を見ましょう。「すき間に合わせて変形」を切り替えると、同じ瞬間の形を比べられます。
雲は塔の後ろ、間、前を通るため、描く順番を固定できません。各視線と両方の箱との交差を求め、最も近い不透明な面を雲のサンプリングの終点にします。その前の雲は見え、後ろの雲は隠れます。
雨粒も同じカメラと箱の奥行き判定を使います。接触の重みがある間、小さな青い形が通り道の入口に落ちます。時間に合わせて配置するため、同じ瞬間には同じ並びが現れます。
試してみよう： 「風景」を選び、3秒から11秒まで時間を動かしましょう。雲のひとつのふくらみが塔の後ろに隠れ、前に戻る様子を追います。雨を切り替えて、小さな要素でどれだけ物語を伝えられるか見てください。
雲は15秒で風景を横切ります。位置は一定の速さで変わり、変形は塔への近さに従います。移動と反応を分けることで、単純な動きの中でも、形が空間の感触を伝えられます。
フレームごとの固定量ではなく経過時間を使います。風景は画面外で止まり、動きを減らす設定では静止して始まります。時間を動かすと再生が止まり、どの瞬間も観察できます。ループが始まる前に、雲は画面の端で薄く消えます。建物の間を逆向きには戻りません。
自分で試す / ひとつの雲、ふたつの通り道
7.5秒で止めます。すき間を1.50、雲の大きさを0.65×にし、画面を保存しましょう。丸いままで通れる余地があるはずです。
同じ時間のまま、すき間を0.30、雲を1.25×にします。もう一枚保存し、輪郭、奥行き、雨を比べましょう。最後に変形を無効にすると、どんな手がかりが消えるでしょうか？
通り道へ戻る ↑WebGLシェーダーが塔と雲を描き、Canvas 2Dが図、ラベル、雨粒を加えます。描画ライブラリーや、動画から取り出した画像は使いません。
// Art-directed deformation near the passage.
const contact = 1 - smoothstep(0.45, 2.05, Math.abs(cloudX));
const fit = clamp(gap * 0.90 / (1.36 * cloudSize), 0.22, 1);
const q = mix(1, fit, contact);
const scale = [1 / Math.sqrt(q), 0.70 * (1 + (1 - q) * 0.16), q];
// Evaluate the puff field in these deformed coordinates.
const local = (worldPosition - cloudCentre) / scale;ひとつのHTMLにまとまったサンプルを保存し、ブラウザーで開き、テキストエディターで編集できます。スタイル、画像、モデル、シェーダーを内蔵しています。WebGLが立体の光を描き、利用できない場合もCanvasのプレビューを表示します。
個別のソース： カメラと変形 · ボリュームのシェーダー · 操作と雨粒.