![[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ノイズによる密度の数式」の基礎を直感的に学びます。
ARCHIVE_INDEX / PAGE_11
TOTAL_ITEMS: 648
![[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生成動画とは異なる「リアルタイムレンダリング」の裏側に迫ります。
![[Noise 入門 #42] Three.js × InstancedMesh — 10万のブロックで「最初の大地」を構築する](https://assets.lain-lab.com/images/uploads/noise-intro-42-instanced-mesh.webp)
[Noise 入門 #42] Three.js × InstancedMesh — 10万のブロックで「最初の大地」を構築する
Three.jsのInstancedMeshを使ってMinecraftのようなボクセル地形を生成する方法を解説。FBMノイズを利用し、10万個のブロックを60FPSで描画するパフォーマンス最適化の実装を学びます。
![[Next.js #47] Procedural Solar System VR — WebXR で宇宙のスケールを体感する](https://assets.lain-lab.com/images/uploads/nextjs-47-procedural-solar-system-vr.webp)
[Next.js #47] Procedural Solar System VR — WebXR で宇宙のスケールを体感する
Three.js と WebXR を組み合わせ、プロシージャルな太陽系を VR 空間に構築。カメラのリグ構成、コントローラーによる移動、透明度描画のバグ修正など、没入感を高めるための最適化プロセスを詳解。
![[Noise 入門 #41] 第5集開幕 — 終わらない世界を錬成する（Minecraft的なボクセル地形とチャンクの基礎）](https://assets.lain-lab.com/images/uploads/noise-intro-41-voxel-terrain-chunks.webp)
[Noise 入門 #41] 第5集開幕 — 終わらない世界を錬成する（Minecraft的なボクセル地形とチャンクの基礎）
Noise入門シリーズ第41回、いよいよ第5集「Procedural World編」が開幕。FBMノイズを用いたMinecraftのような無限に広がるボクセル地形の生成原理と、世界を分割管理する「チャンク（Chunk）」の概念を解説します。
![[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」](https://assets.lain-lab.com/images/uploads/nextjs-46-procedural-solar-system-complete.webp)
[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」
GLSLの4DノイズとDomain Warpingを用いて、木星の大赤斑、土星の環、天王星の垂直リング、海王星の大暗斑をプロシージャルに生成。InstancedMeshによる小惑星帯やOrbitControlsの拡張によるシネマティックなカメラ操作も実装し、ブラウザ上に生きた太陽系を完成させます。
![[Noise 入門 #40] 第4集完結 — 太陽系を錬成する（Procedural Solar System）](https://assets.lain-lab.com/images/uploads/noise-intro-40-procedural-solar-system.webp)
[Noise 入門 #40] 第4集完結 — 太陽系を錬成する（Procedural Solar System）
これまで錬成してきた地形、雲海、オーロラ、リングなどのシェーダーを統合し、複数の惑星が軌道を描く「ミニ太陽系」をThree.jsで実装。クラスによる星の管理やFlyControlsを用いた宇宙空間の探索など、プロシージャルな宇宙をブラウザ上に展開する集大成となる記事です。
![[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の実装アプローチをまとめました。