![[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で描画するパフォーマンス最適化の実装を学びます。
ARCHIVE_INDEX / PAGE_5
TOTAL_ITEMS: 574
![[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の実装アプローチをまとめました。
![[Noise 入門 #39] Procedural Rings — 惑星を彩る塵と氷の軌道](https://assets.lain-lab.com/images/uploads/noise-intro-39-procedural-rings.webp)
[Noise 入門 #39] Procedural Rings — 惑星を彩る塵と氷の軌道
惑星の周囲に広がる美しい「環（Rings）」をThree.jsとGLSLで実装。極座標系（Polar Coordinates）と1Dフラクタルノイズを組み合わせ、宇宙空間に塵と氷の軌道をプロシージャルに生成する手法を図解とコードで直感的に解説します。
![[Next.js #44] Blender × R3F：物理演算による「砕ける演出」の構築](https://assets.lain-lab.com/images/uploads/nextjs-44-r3f-blender-cell-fracture-physics.webp)
[Next.js #44] Blender × R3F：物理演算による「砕ける演出」の構築
BlenderのCell Fractureアドオンによるオブジェクト分割から、Rapierを用いたパフォーマンス重視の物理演算スワップ、GLSLによる動的なノイズ床の実装までを解説します。
![[Next.js #43] Procedural Aurora — 極地の夜空に揺らめくプロシージャルなオーロラを実装](https://assets.lain-lab.com/images/uploads/nextjs-43-procedural-aurora-threejs-glsl.webp)
[Next.js #43] Procedural Aurora — 極地の夜空に揺らめくプロシージャルなオーロラを実装
Next.js環境下でThree.jsとGLSLを用いて、プロシージャルなオーロラを実装する方法を解説。ノイズのStretching、極地マスク、加算合成を用いた第3の球体（Aurora Sphere）の追加と、自然で神秘的なパラメータ調整のコツをまとめます。
![[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）の数式を図解とコードで直感的に解説します。
![[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 を組み合わせ、文明の光と昼夜の境界が動く惑星表現を解説します。