![[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」](https://assets.lain-lab.com/images/uploads/nextjs-46-procedural-solar-system-complete.webp)
[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」
GLSLの4DノイズとDomain Warpingを用いて、木星の大赤斑、土星の環、天王星の垂直リング、海王星の大暗斑をプロシージャルに生成。InstancedMeshによる小惑星帯やOrbitControlsの拡張によるシネマティックなカメラ操作も実装し、ブラウザ上に生きた太陽系を完成させます。
ARCHIVE_INDEX / PAGE_8
TOTAL_ITEMS: 607
![[Noise 入門 #40] 第4集完結 — 太陽系を錬成する（Procedural Solar System）](https://assets.lain-lab.com/images/uploads/noise-intro-40-procedural-solar-system.webp)
[Noise 入門 #40] 第4集完結 — 太陽系を錬成する（Procedural Solar System）
これまで錬成してきた地形、雲海、オーロラ、リングなどのシェーダーを統合し、複数の惑星が軌道を描く「ミニ太陽系」をThree.jsで実装。クラスによる星の管理やFlyControlsを用いた宇宙空間の探索など、プロシージャルな宇宙をブラウザ上に展開する集大成となる記事です。
![[Next.js #45] Procedural Rings — 1Dノイズと極座標で描く惑星の環と影の同期](https://assets.lain-lab.com/images/uploads/nextjs-45-procedural-rings-threejs-glsl.webp)
[Next.js #45] Procedural Rings — 1Dノイズと極座標で描く惑星の環と影の同期
Next.js環境のフロントエンドで、GLSLを用いた美しい「惑星の環（Rings）」をプロシージャルに描画します。1Dフラクタルノイズによる微細な塵の表現と、外積（Cross Product）を活用して惑星本体とリングの影を同期させるFake Shadowの実装アプローチをまとめました。
![[Noise 入門 #39] Procedural Rings — 惑星を彩る塵と氷の軌道](https://assets.lain-lab.com/images/uploads/noise-intro-39-procedural-rings.webp)
[Noise 入門 #39] Procedural Rings — 惑星を彩る塵と氷の軌道
惑星の周囲に広がる美しい「環（Rings）」をThree.jsとGLSLで実装。極座標系（Polar Coordinates）と1Dフラクタルノイズを組み合わせ、宇宙空間に塵と氷の軌道をプロシージャルに生成する手法を図解とコードで直感的に解説します。
![[Next.js #44] Blender × R3F：物理演算による「砕ける演出」の構築](https://assets.lain-lab.com/images/uploads/nextjs-44-r3f-blender-cell-fracture-physics.webp)
[Next.js #44] Blender × R3F：物理演算による「砕ける演出」の構築
BlenderのCell Fractureアドオンによるオブジェクト分割から、Rapierを用いたパフォーマンス重視の物理演算スワップ、GLSLによる動的なノイズ床の実装までを解説します。
![[Next.js #43] Procedural Aurora — 極地の夜空に揺らめくプロシージャルなオーロラを実装](https://assets.lain-lab.com/images/uploads/nextjs-43-procedural-aurora-threejs-glsl.webp)
[Next.js #43] Procedural Aurora — 極地の夜空に揺らめくプロシージャルなオーロラを実装
Next.js環境下でThree.jsとGLSLを用いて、プロシージャルなオーロラを実装する方法を解説。ノイズのStretching、極地マスク、加算合成を用いた第3の球体（Aurora Sphere）の追加と、自然で神秘的なパラメータ調整のコツをまとめます。
![[Noise 入門 #38] Procedural Aurora — 磁力線とノイズが織りなす極地の光のカーテン](https://assets.lain-lab.com/images/uploads/noise-intro-38-procedural-aurora.webp)
[Noise 入門 #38] Procedural Aurora — 磁力線とノイズが織りなす極地の光のカーテン
Three.jsとGLSLを用いて、惑星の極地に揺らめく「オーロラ」をプロシージャルに生成する実装手法。ノイズ座標系の異方性（Stretching）、Domain Warpingによるうねりの表現、極地マスク（Polar Mask）の数式を図解とコードで直感的に解説します。
![[Next.js #42] Three.js HTMLMesh で既存の HTML UI を WebXR 空間へ移植](https://assets.lain-lab.com/images/uploads/nextjs-42-threejs-htmlmesh-webxr-vr-ui-refactoring.webp)
[Next.js #42] Three.js HTMLMesh で既存の HTML UI を WebXR 空間へ移植
Three.js の HTMLMesh と InteractiveGroup を活用し、Quest 2 などの WebXR 環境で既存の HTML UI を操作可能にする方法を解説します。UI のモジュール化から VR コントローラーによる表示トグル、ファイル読み込みの制約回避まで。
![[Next.js #41] Procedural Night Lights on Storm Planet — 昼夜境界を動かし、文明の灯りが浮かぶ惑星を描く](https://assets.lain-lab.com/images/uploads/nextjs-41-procedural-night-lights-storm-planet-threejs-glsl.webp)
[Next.js #41] Procedural Night Lights on Storm Planet — 昼夜境界を動かし、文明の灯りが浮かぶ惑星を描く
Three.js / GLSL で作った Storm Planet に Procedural Night Lights を実装。Voronoi Noise による都市の灯り、smoothstep による twilight 制御、uLightDir の uniform 化による可動 Terminator を組み合わせ、文明の光と昼夜の境界が動く惑星表現を解説します。
![[Noise 入門 #37] Procedural Night Lights — ノイズが描く「文明の灯火」と夜の境界線](https://assets.lain-lab.com/images/uploads/noise-intro-37-procedural-night-lights.webp)
[Noise 入門 #37] Procedural Night Lights — ノイズが描く「文明の灯火」と夜の境界線
Three.jsとGLSLを用いて、惑星の昼夜の境界線（Terminator）を計算し、Voronoi Noiseで作る都市網の幾何学パターンを陸地にだけ適用する方法を図解とコードで直感的に解説。荒ぶる自然と静かに瞬く文明の境界線を描き出します。
![[Next.js #40] MMD Clock AI Talk — LM Studio × VOICEVOX × MMDで「会話する時計アプリ」を作る](https://assets.lain-lab.com/images/uploads/nextjs-40-mmd-clock-ai-talk-lmstudio-voicevox.webp)
[Next.js #40] MMD Clock AI Talk — LM Studio × VOICEVOX × MMDで「会話する時計アプリ」を作る
Next.jsのMMD時計アプリに、LM StudioのローカルLLM、VOICEVOX、吹き出し表示、前方移動演出を統合し、キャラクターと会話できる仕組みを構築した実装記録です。
![[Next.js #39] Procedural Lightning on Storm Planet — 球体惑星に雷を落とし、濃い雲でランダム発火させる](https://assets.lain-lab.com/images/uploads/nextjs-39-procedural-lightning-storm-planet-threejs-glsl.webp)
[Next.js #39] Procedural Lightning on Storm Planet — 球体惑星に雷を落とし、濃い雲でランダム発火させる
Next.js連載第39回。前回の Interactive Storm を拡張し、球体惑星の雲レイヤーに Procedural Lightning を追加します。高周波ノイズと閾値処理で稲妻の形状を作り、時間ノイズで不規則なフラッシュを制御。さらに、マウスで発生させる台風だけでなく、雲の濃い領域でもランダムに雷が走るように調整し、生きた嵐の表現へ進化させます。