![[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）の数式を図解とコードで直感的に解説します。
ARCHIVE_INDEX / PAGE_6
TOTAL_ITEMS: 577
![[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 / 球面接線ベクトル場を組み合わせることで、台風の目を持つ大規模な嵐表現を構築します。
![[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の応用により、マウスで大気をかき混ぜて台風を錬成するインタラクションを実装します。
【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上で高速に影をフェイクする空間ハックまで、生きた惑星を錬成する実装手法を図解とコードで解説します。