![[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の実装アプローチをまとめました。
ARCHIVE_INDEX / PAGE_12
TOTAL_ITEMS: 649
![[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 を追加します。高周波ノイズと閾値処理で稲妻の形状を作り、時間ノイズで不規則なフラッシュを制御。さらに、マウスで発生させる台風だけでなく、雲の濃い領域でもランダムに雷が走るように調整し、生きた嵐の表現へ進化させます。
![[Noise 入門 #36] Procedural Lightning — 台風の目に「閃光」を落とす](https://assets.lain-lab.com/images/uploads/noise-intro-36-procedural-lightning.webp)
[Noise 入門 #36] Procedural Lightning — 台風の目に「閃光」を落とす
Noise 入門シリーズ第36回。前回のInteractive Stormに「光」を追加します。Ridgeノイズの閾値処理による稲妻の形状生成、時間軸によるストロボ明滅、そして雲の内部発光を組み合わせ、生きた嵐を完成させる実装手法を図解とコードで直感的に解説します。
![[Next.js #38] Interactive Storm on Sphere Planet — マウスで台風を錬成する Three.js / GLSL 実装](https://assets.lain-lab.com/images/uploads/nextjs-38-interactive-storm-sphere-planet-threejs-glsl.webp)
[Next.js #38] Interactive Storm on Sphere Planet — マウスで台風を錬成する Three.js / GLSL 実装
今回は球体惑星の雲表現をさらに発展させ、マウス位置に応じて局所的な渦と乱流を発生させる Interactive Storm を実装します。Three.js の Raycaster で取得したワールド座標を shader に渡し、FBM / Curl Noise / Domain Warping / 球面接線ベクトル場を組み合わせることで、台風の目を持つ大規模な嵐表現を構築します。