【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する

はじめに

前回の記事では、Three.js + GLSL を使って、バイオームカラー付きの Procedural Biome Planet を実装しました。

  • 海
  • 砂地
  • 森林
  • 岩場
  • 雪原

といった色分けを、ノイズと標高差、傾斜情報を使って球体上へ割り当てることで、単なる色付きの球ではなく、地形らしい表情を持つ惑星を生成するところまで進みました。

ただ、その段階ではまだ「地形のある球体」であって、惑星としての空気感までは十分ではありませんでした。 そこで今回は、今朝書いた Noise 入門 #34 の内容をベースに、惑星の外側へもう一つ球体を重ねて Cloud Sphere を構成し、流れる雲海を追加しました。

これによって、見た目は一気に変わります。 地表だけでは静的に見えていた惑星が、雲の流れと影によって、呼吸しているような“生きた惑星” に近づきました。

動画（PC）：

関連記事

今回の記事は、以下2本の流れを合流させた続編です。

そして前回の Next.js 記事系の流れとしては以下です。

今回は MMD や UI 系ではなく、再び ノイズ・シェーダー・惑星表現 側に戻ってきた回になります。

今回やったこと

今回の主な追加実装は次の通りです。

  • 地形用の惑星球体の外側に Cloud Sphere を追加
  • 4D FBM ノイズ で雲が流れるアニメーションを実装
  • 雲の濃淡を使って、白一色ではない立体感のある雲に調整
  • 雲のノイズを地表側でも参照し、地表への影フェイク を追加
  • Atmosphere と重ねて、惑星らしい外周の空気感を強化
  • GUI から雲量・風速・色・影の強さなどをリアルタイム調整可能に整理

単純に白い透明レイヤーを上に載せただけではありません。 雲そのものの表現 と 地表との相互作用 をセットで入れたのが今回のポイントです。

なぜ Cloud Sphere が必要だったのか

前回の地形惑星は、ノイズによる地形の起伏やバイオーム表現としては十分に面白いものでした。 ただ、静止画としては綺麗でも、回転させたときに「地形の付いた球」という印象が少し残ります。

ここで大きいのが、惑星表現には“表面以外の層”が必要 だという点です。

地球を見ても、印象を決めているのは地表だけではありません。

  • 雲
  • 大気
  • 光の回り込み
  • 夜側への落ち方
  • 影の動き

こうした要素が合わさって初めて「惑星らしさ」が生まれます。

特に雲は強いです。 地表が同じでも、雲が流れているだけで一気にスケール感が出ます。 さらに、その雲が地表へ影を落としているように見えると、視覚的な説得力が大幅に上がります。

実装方針

今回の構成はかなりシンプルです。

  1. 内側に地形用の惑星球体を置く
  2. その少し外側に、やや大きい Cloud Sphere を重ねる
  3. Cloud Sphere 側で 4D FBM ノイズを流して雲を生成
  4. 同じ雲ノイズの考え方を地表側でも使い、影っぽい暗がりを加算する
  5. Atmosphere を外周に重ねる

このように、球体を複数レイヤーで積む設計 にすると見通しが良くなります。

  • 地表は地表の責務
  • 雲は雲の責務
  • 大気は大気の責務

と分離できるので、今後の拡張もしやすいです。

Cloud Sphere の実装

Cloud Sphere は、惑星本体よりわずかに大きい半径の球体です。 この球体に対して、時間軸を含んだ 4D FBM ノイズ を使い、雲密度を計算します。

4D にする理由は、時間変化を自然に扱うためです。 3D ノイズを単にスクロールさせる方法でも雲は流せますが、4D 側へ時間を入れると、より有機的な変化を作りやすくなります。

雲の基本イメージ

  • ノイズ値が高い場所だけ雲を出す
  • 閾値付近では smoothstep でなめらかに立ち上げる
  • 雲の中心と縁で色味を少し変える
  • アルファは雲密度と連動させる
  • 時間で少しずつ形が変化する

これにより、ベタっとした白塗りではなく、 厚い部分・薄い部分・縁のにじみ がある雲になります。

雲色の分離

今回の実装では、雲色を単一の白に固定せず、明るい色と暗い色の2系統を持たせています。

  • 明るい雲色
  • 影を含んだ暗い雲色

この2色を、雲ノイズから導いたシェーディング係数でブレンドすることで、雲に厚みが出ます。 これがあるだけで、単なる透明テクスチャを貼った見た目からかなり脱却できます。

地表への影フェイク

今回かなり効いているのがここです。

Cloud Sphere 側だけで雲を描くと、雲は確かに見えます。 ただし、地表との関係が薄いと「上に白いレイヤーがある」感じで終わってしまいます。

そこで今回は、地表シェーダー側でも雲ノイズの考え方を参照し、 地表に落ちる雲影っぽい暗がり を追加しました。

もちろん本格的にやるなら、雲ボリュームやライト空間を使った本物の投影処理が必要になります。 しかしそれはコストが高く、今回のような軽量なリアルタイムデモでは重すぎます。

そのため今回は、以下のような方向で実装しています。

  • ライト方向へ少しずらした位置を使って雲ノイズを参照
  • 雲が多い場所では地表色を少し暗くする
  • 影の強さは GUI から調整可能にする

これだけでも、かなり印象が変わります。 雲が「ただ見えている」だけでなく、地表に影響を与えている存在 になります。

地形との相性

前回作った地形惑星には、すでに以下の要素がありました。

  • 標高差による色分け
  • 海と陸の切り替え
  • 砂地、森林、岩、雪のバイオーム色
  • 傾斜による岩場補正
  • フレネルを使った Atmosphere

この上に Cloud Sphere を足すことで、 地表単体ではやや抽象的だった見た目が、急に「気候を持つ星」に寄ってきます。

特に海と雲の相性は良く、青い海面の上を白い雲が流れるだけで、視覚的にはかなり強いです。 逆に言うと、雲の表現が入った今、次に重要になるのは地表の名所化だとも感じました。

現状の惑星は十分綺麗ですが、地形そのものはまだ比較的均質です。 今後はさらに以下のような特徴を足すと、より面白い惑星になります。

  • 巨大クレーター
  • 深い亀裂
  • 火山的な山体
  • 特定地点だけ突出したランドマーク地形
  • 緯度や気候帯による偏り

雲が強くなった分、地表側も「記憶に残る形」を持たせたくなります。

GUI で調整できるようにした項目

今回のデモでは、見た目の試行錯誤をしやすくするために GUI を整理しました。

Render Settings

  • wireframe
  • Planet Rotation

Procedural Clouds

  • Wind (Rotation)
  • Cloud Scale
  • Morph Speed
  • Cloud Cover
  • Shadow Strength
  • Cloud Color
  • Cloud Dark Color

Terrain Generation

  • Displacement
  • Terrain Speed

Biome Colors

  • waterDeep
  • waterShallow
  • sand
  • forest
  • snow
  • rock

Atmosphere

  • atmosphere
  • atmospherePower

この構成にしておくと、 地形・雲・大気を独立して追い込みやすい ので、デモとしても記事用としても扱いやすくなります。

実装して感じたこと

今回の実装で一番大きかったのは、 地表だけで完結させようとしない方が惑星は良く見える ということでした。

つい地形ノイズの精度やバイオーム分けばかりを詰めたくなりますが、 実際の見た目を支配するのは、雲や大気を含めたレイヤー構造です。

また、雲は表面装飾ではなく、時間変化を持つ存在 として入れる価値が高いです。 静止している惑星より、雲がゆっくりと流れている惑星の方が、圧倒的に「生きている」感じが出ます。

さらに、地表への影フェイクも効きました。 本物の物理ベースな影ではなくても、視覚的な相互作用が少し入るだけで、完成度はかなり上がります。

今後の拡張候補

今回の段階で、惑星としての見栄えはかなり良くなりました。 ただし、ここから先にやりたいこともはっきりしています。

1. 雲の気候帯を入れる

今は比較的全体に均一に雲が出やすいので、

  • 赤道付近は厚め
  • 極地は薄め
  • 乾燥帯では雲を減らす

といった偏りを入れると、さらに惑星らしくなります。

2. 地形と雲の相関を強める

  • 高山付近で雲が発生しやすい
  • 海上で厚い雲が出る
  • 乾燥地帯では晴れやすい

といったルールを入れると、世界としての整合性が上がります。

3. ランドマーク地形を増やす

今後はノイズだけで均質に起伏を作るだけでなく、

  • クレーター
  • 火山
  • 深い峡谷
  • 巨大な山脈

のような、視覚的に覚えやすい地形も追加したいところです。

4. 夜側表現の強化

  • 夜側の色味
  • 都市光のようなフェイク
  • 雲と夜の相性調整

まで入ると、惑星としてさらに映えます。

まとめ

今回は、前回作成した Procedural Biome Planet をベースに、 その外側へ Cloud Sphere を追加して、流れる雲海をまとった惑星へ拡張しました。

実装した要点は以下です。

  • 地形球の外側に Cloud Sphere を追加
  • 4D FBM ノイズで雲を流す
  • 雲色の濃淡を分けて厚みを出す
  • 雲ノイズを地表側でも使い、影フェイクを追加
  • Atmosphere と組み合わせて惑星らしさを強化
  • GUI で雲・地形・色・大気をリアルタイム調整可能にした

地形だけだった惑星に、 雲、大気、影というレイヤーが加わることで、見た目の説得力はかなり上がりました。

まだ地表のランドマーク性や気候帯の設計には伸びしろがありますが、 今回の実装によって、単なるノイズ球から“生きた惑星”へ一歩進めた という感触があります。

ノイズの面白さは、形を作るだけでは終わりません。 時間変化、層構造、相互作用を加えることで、世界そのものを育てていけるのが強いところです。

次はこの雲惑星をさらに発展させて、 もっと記憶に残る地形や、気候差のある惑星へ繋げていこうと思います。