![[Astro #03] Pagefind検索と動的目次（TOC）の実装](https://assets.lain-lab.com/images/uploads/astro-03-toc-pagefind-implementation.webp)
[Astro #03] Pagefind検索と動的目次（TOC）の実装
HugoからAstroへの移行最終局面。全記事のビルドエラーを解消し、クライアントサイド検索と自動目次生成機能を導入した開発記録。
ARCHIVE_INDEX / PAGE_10
TOTAL_ITEMS: 648
![[Next.js #55] Boids × Flow Field — 10万の鳥が「狂気の空」を舞う](https://assets.lain-lab.com/images/uploads/nextjs-55-procedural-boids-flow-field.webp)
[Next.js #55] Boids × Flow Field — 10万の鳥が「狂気の空」を舞う
穏やかな群れを作るはずが、完成したのは「ドラッグ オン ドラグーン」のような絶望の空でした。GPUの限界に挑む10万羽の描画、翼のしなり（Whip）の数式、そしてGLBモデル本来のテクスチャカラーを維持するシェーダーハックをまとめます。
![[Noise 入門 #49] Boids × Flow Field — 風に乗る「鳥の群れ」を空に放つ](https://assets.lain-lab.com/images/uploads/noise-intro-49-boids-flow-field.webp)
[Noise 入門 #49] Boids × Flow Field — 風に乗る「鳥の群れ」を空に放つ
空間を漂う生命の自律性を定義する「Boids」と、環境の物理的なうねりである「Flow Field（Curl Noise）」を融合。Three.jsとGLSLを用いて、風に流されながらも群れをなして舞う鳥たちを実装するプロシージャルな生態系構築の手法を解説します。
![[Astro #02] 530件の記事移行とトラブル対処：カテゴリー統合とMDXエラー](https://assets.lain-lab.com/images/uploads/astro-02-category-mdx-refinement.webp)
[Astro #02] 530件の記事移行とトラブル対処：カテゴリー統合とMDXエラー
532件の全アーカイブをAstroへ最適化。カテゴリー統合、波括弧のエスケープ、そしてUIのレスポンシブ調整までの全工程。
![[Next.js #54] Procedural Wind & Flow — Three.jsで草木を揺らし、雲を流す実装](https://assets.lain-lab.com/images/uploads/nextjs-54-procedural-wind-flow.webp)
[Next.js #54] Procedural Wind & Flow — Three.jsで草木を揺らし、雲を流す実装
Next.jsとThree.jsを用いたプロシージャルワールド開発。FBMノイズを利用した風のベクトル場を生成し、頂点シェーダーで10万本の植物と雲を動かすVFXテクニックの全貌を解説します。
![[Noise 入門 #48] Wind & Flow — 風向ノイズで草木を揺らす](https://assets.lain-lab.com/images/uploads/noise-intro-48-wind-flow-vertex-shader.webp)
[Noise 入門 #48] Wind & Flow — 風向ノイズで草木を揺らす
InstancedMeshで配置された大量の草木に対し、GLSLのVertex Shaderとノイズ関数を用いて自然な風の揺らぎ（Wind & Flow）を実装する手法。Three.jsのonBeforeCompileを活用したプロシージャルなアニメーションの基礎を直感的に学びます。
![[Astro #01] 環境構築・トラブルシューティングのメモ](https://assets.lain-lab.com/images/uploads/astro-01-migration-troubleshooting.webp)
[Astro #01] 環境構築・トラブルシューティングのメモ
Windows 環境での Astro 導入時に直面したパス解決エラーや、Hugo 資産移行時に発生した Shiki のパースエラー、ファイル名問題への対処法をまとめました。
![[Next.js 3D #53] プロシージャルな植生配置とGUIによる動的コントロール — 確率マップで森を錬成する](https://assets.lain-lab.com/images/uploads/nextjs-53-procedural-object-distribution-gui.webp)
[Next.js 3D #53] プロシージャルな植生配置とGUIによる動的コントロール — 確率マップで森を錬成する
ボクセル地形の地表に木や草を自然に群生させる「Object Distribution」の実装記録。lil-gui を導入し、森の広がりや木々の密度をスライダーで直感的に操作できるプロシージャル・デザインの醍醐味を紹介します。
![[Noise 入門 #47] Object Distribution — ノイズを「確率マップ」にして植生を群生させる](https://assets.lain-lab.com/images/uploads/noise-intro-47-object-distribution.webp)
[Noise 入門 #47] Object Distribution — ノイズを「確率マップ」にして植生を群生させる
地形生成の次は植生分布。Three.jsと多重ノイズを用いて、大地の環境に依存した自然な森や平原をプロシージャルに生成する「確率マップ」のテクニックを学びます。InstancedMeshを用いた描画最適化の考え方も併せて解説。
![[Next.js #52] Procedural Caves の実装 — ヒメドローンで未知の地下空間を探索する](https://assets.lain-lab.com/images/uploads/nextjs-52-procedural-caves-drone-exploration.webp)
[Next.js #52] Procedural Caves の実装 — ヒメドローンで未知の地下空間を探索する
Three.jsを用いたプロシージャルなボクセル生成に、3Dノイズを使った洞窟（Perlin Worms）を追加。地下に潜ると暗転するライティング制御や、マウスによるTPS視点のカメラ操作の実装コードを公開します。
![[Noise 入門 #46] Procedural Caves — 3DノイズとPerlin Wormsで「地下世界」を削り出す](https://assets.lain-lab.com/images/uploads/noise-intro-46-procedural-caves-perlin-worms.webp)
[Noise 入門 #46] Procedural Caves — 3DノイズとPerlin Wormsで「地下世界」を削り出す
3Dノイズを活用し、Minecraftのようなボクセル世界に無限に続く洞窟（スイスチーズ・ケーブ、Perlin Worms）をプロシージャル生成する実装手法。密度の閾値判定で空間を削り出す仕組みを解説します。
![[Next.js #51] Web Workersで作る無限の浮遊大陸とフライトシミュレーター](https://assets.lain-lab.com/images/uploads/nextjs-51-procedural-3d-noise-web-workers.webp)
[Next.js #51] Web Workersで作る無限の浮遊大陸とフライトシミュレーター
2Dハイトマップの限界を突破し、3Dノイズによる「密度」の概念を導入。マルチスレッド処理で60FPSを維持しながら、広大な空を自由に飛び回る高密度ボクセル世界の構築手法を解説します。