![[Noise 入門 #35] Interactive Storm — マウスで気象を操り「巨大な台風」を錬成する](https://assets.lain-lab.com/images/uploads/noise-intro-35-interactive-storm.webp)
[Noise 入門 #35] Interactive Storm — マウスで気象を操り「巨大な台風」を錬成する
Three.jsとGLSLを用いて、プロシージャルな雲のFBMノイズにCurl Noiseのベクトル場を局所的に適用。Raycasterを使った3D座標の取得とDomain Warpingの応用により、マウスで大気をかき混ぜて台風を錬成するインタラクションを実装します。
ARCHIVE_INDEX / PAGE_13
TOTAL_ITEMS: 649
【Next.js #37】Three.js + MMD 時計アプリに動画壁紙を実装 — mp4をIndexedDBへ保存してループ再生する
Three.js + MMD ベースの時計アプリに動画壁紙機能を追加。mp4 を drag & drop で IndexedDB に保存し、Wallpaper UI 下に一覧表示、クリックで無音ループ再生、localStorage 連携による起動時復元、動画サムネ生成までを実装した。
【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する
Three.js + GLSL で作成したノイズ惑星を拡張し、Cloud Sphere による流体的な雲表現を追加。4D FBM によるアニメーション雲、地表への影フェイク、バイオーム地形との合成、GUI によるリアルタイム調整までをまとめた実装記事。
![[Noise 入門 #34] Procedural Clouds on Sphere — 惑星を包み込む「生きた雲海」を錬成する](https://assets.lain-lab.com/images/uploads/noise-intro-34-procedural-clouds-sphere.webp)
[Noise 入門 #34] Procedural Clouds on Sphere — 惑星を包み込む「生きた雲海」を錬成する
Noise 入門シリーズ第34回。地形用の球体の外側にもう一つの球体（Cloud Sphere）を配置し、4D FBMノイズで流れる雲を表現します。透過処理（アルファブレンド）の最適化や、GPU上で高速に影をフェイクする空間ハックまで、生きた惑星を錬成する実装手法を図解とコードで解説します。
![[Next.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応](https://assets.lain-lab.com/images/uploads/nextjs-35-threejs-mmd-clock-settings-ui.webp)
[Next.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応
Three.js + MMD + IndexedDB ベースのWeb時計アプリに設定UIを追加。時計色、透明度、壁紙、床のシェーダーパラメータ、VMD/VPDの一覧管理とデフォルト設定を保存・復元できるようにした実装内容を紹介します。
![[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える](https://assets.lain-lab.com/images/uploads/nextjs-34-procedural-biome-planet-threejs-glsl.webp)
[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える
Three.js と GLSL で球体ノイズ地形にバイオームと大気散乱を実装。Next.js プロジェクトの public 配下で運用するほぼバニラ構成として、Height / Slope / Fresnel を組み合わせた惑星デモと、GUI による調整ポイントを整理します。
![[Noise 入門 #33] Procedural Biome と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる](https://assets.lain-lab.com/images/uploads/noise-intro-33-procedural-biome-atmosphere.webp)
[Noise 入門 #33] Procedural Biome と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる
Three.jsとGLSLを用いて、ノイズで生成した惑星に海や森などのバイオームを動的に割り当て、フレネル効果で青い大気を纏わせる実装手法を図解とコードで解説。無機質な星が美しい惑星へと進化する過程を体験しましょう。
![[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える](https://assets.lain-lab.com/images/uploads/nextjs-33-interactive-noise-sphere-click-ripple.webp)
[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える
Next.js プロジェクト内で運用しているほぼバニラ Three.js + GLSL 実装として、球体ノイズ地形とクリック波紋エフェクトを組み合わせたインタラクティブデモを作成。Next.js #31 の平面版からの発展と、Noise 入門 #32 の球体ノイズ実装を接続しながら、Raycaster による接触位置取得、球面法線ベースの波紋表現、背景スカイスフィアの追加までをまとめます。
![[Noise 入門 #32] 球体ノイズとインタラクション — プロシージャルな惑星を「手で回して」探索する](https://assets.lain-lab.com/images/uploads/noise-intro-32-interactive-sphere-planet.webp)
[Noise 入門 #32] 球体ノイズとインタラクション — プロシージャルな惑星を「手で回して」探索する
2Dから3D座標のノイズへ次元を拡張。Three.jsとGLSLを用いてシームレスなノイズ惑星を生成し、Raycasterによる3D座標の取得とVertex Shaderによる地形隆起（Displacement）を組み合わせた「触れる世界」の作り方を直感的に解説します。
![[Next.js #32] Three.js MMDアプリにモデルZIP / 壁紙 / IndexedDB管理を実装 — ローカルアセット基盤の整備](https://assets.lain-lab.com/images/uploads/nextjs-32-threejs-mmd-indexeddb-local-assets.webp)
[Next.js #32] Three.js MMDアプリにモデルZIP / 壁紙 / IndexedDB管理を実装 — ローカルアセット基盤の整備
Three.jsベースのMMD / WebXRアプリに、モデルZIPの展開、PMX検出、Blob処理、IndexedDB保存、モデル一覧、壁紙サムネ一覧、削除UIを実装した開発記録。ローカルアセットをアプリ内で管理するための基盤整備をまとめる。
![[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る](https://assets.lain-lab.com/images/uploads/nextjs-31-touching-noise-field-threejs-glsl.webp)
[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る
Noise 入門の流れを踏まえ、Three.js × GLSL × Raycasterで“Touching Noise Field”を実装。マウスホバー位置を3D空間上に取得し、その周辺だけノイズの歪みと色変化を強めることで、インタラクティブなノイズ表現を作る。
![[Noise 入門 #31] 第4集開幕 — Three.js × GLSLで「触れるノイズ」を実装する](https://assets.lain-lab.com/images/uploads/noise-intro-31-interactive-noise-threejs.webp)
[Noise 入門 #31] 第4集開幕 — Three.js × GLSLで「触れるノイズ」を実装する
Noise 入門シリーズ第31回。これまでの「鑑賞するノイズ」から「体験するノイズ」へ。Three.jsのRaycasterとShaderを連携させ、マウスホバーによる局所的なDomain Warping（空間のねじれ）を実装するインタラクションの基礎を深掘りします。