![[Astro #01] 環境構築・トラブルシューティングのメモ](https://assets.lain-lab.com/images/uploads/astro-01-migration-troubleshooting.webp)
[Astro #01] 環境構築・トラブルシューティングのメモ
Windows 環境での Astro 導入時に直面したパス解決エラーや、Hugo 資産移行時に発生した Shiki のパースエラー、ファイル名問題への対処法をまとめました。
ARCHIVE_INDEX / PAGE_4
TOTAL_ITEMS: 574
![[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を維持しながら、広大な空を自由に飛び回る高密度ボクセル世界の構築手法を解説します。
![[Noise 入門 #45] Web Workers と 3D Noise — 非同期生成と「密度」で空間を定義する](https://assets.lain-lab.com/images/uploads/noise-intro-45-web-workers-3d-noise.webp)
[Noise 入門 #45] Web Workers と 3D Noise — 非同期生成と「密度」で空間を定義する
Noise 入門シリーズ第45回。Three.jsでの重いノイズ計算をWeb Workersで非同期化し、60FPSを維持する方法を解説。さらに、オーバーハングや洞窟といった複雑な地形を生み出す「3Dノイズによる密度の数式」の基礎を直感的に学びます。
![[Next.js #50] 無限のボクセル世界を飛ぶ — フライトシミュレーターとボクセル雲の実装](https://assets.lain-lab.com/images/uploads/nextjs-50-procedural-flight-simulator.webp)
[Next.js #50] 無限のボクセル世界を飛ぶ — フライトシミュレーターとボクセル雲の実装
Three.jsとノイズ関数を用いて生成した無限地形の上空を、WASD操作で飛行するシミュレーターの実装手法。クォータニオンを用いたジンバルロックのない旋回ロジックや、InstancedMeshによるボクセル雲（CloudChunk）の生成を統合します。
![[Noise 入門 #44] Chunk Manager の実装 — 無限の世界を動的に生成・管理する](https://assets.lain-lab.com/images/uploads/noise-intro-44-chunk-manager.webp)
[Noise 入門 #44] Chunk Manager の実装 — 無限の世界を動的に生成・管理する
Three.jsのInstancedMeshで生成したボクセル地形を無限に広げるChunk Managerの実装。カメラの移動に合わせてチャンクを動的に読み込み・破棄し、Mapを用いたキャッシュ戦略でパフォーマンスを最適化する、プロシージャル世界の基盤構築を学びます。
![[Next.js 49] InstancedMeshの表現力拡張 — シード生成・レトロパレット・動的ライティング](https://assets.lain-lab.com/images/uploads/nextjs-49-instanced-mesh-biomes.webp)
[Next.js 49] InstancedMeshの表現力拡張 — シード生成・レトロパレット・動的ライティング
Three.jsのInstancedMeshを使って生成したボクセル地形に対し、setColorAtによるバイオームの塗り分け、Mulberry32を用いた文字列からのシード地形生成、DirectionalLightのアニメーションによる昼夜サイクル風の演出を追加する具体的なコードとその仕組みを解説します。
![[Noise 入門 #43] バイオームと無限の生成 — InstancedMeshに色彩とチャンクを宿す](https://assets.lain-lab.com/images/uploads/noise-intro-43-biome-chunks.webp)
[Noise 入門 #43] バイオームと無限の生成 — InstancedMeshに色彩とチャンクを宿す
Three.jsのInstancedMeshを活用し、ノイズから生成した地形に色を与えるバイオームの実装と、シード値によるランダム生成、さらに無限の世界を描画するためのチャンク（Chunk）の概念を図解とコードで直感的に解説します。
![[Next.js #48] Three.js × InstancedMeshによる400万ボクセル描画](https://assets.lain-lab.com/images/uploads/nextjs-48-instanced-mesh-limit-test.webp)
[Next.js #48] Three.js × InstancedMeshによる400万ボクセル描画
Three.jsのInstancedMeshを用いて400万個のボクセルを生成し、FPSとGPU負荷を計測。Next.js環境でのパフォーマンスチューニングと、AI生成動画とは異なる「リアルタイムレンダリング」の裏側に迫ります。