![[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える](https://humanxai.info/images/uploads/nextjs-34-procedural-biome-planet-threejs-glsl.webp)
[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える
2026-03-12 | lain
Noise 入門 #33 の内容をもとに、Next.js プロジェクト内で Procedural Biome と大気散乱を実装。球体ノイズ地形に海・砂浜・森・雪・岩肌を割り当て、Fresnel で青い大気を重ね、GUI で地形や流れ方向まで調整できる惑星デモとしてまとめます。
カテゴリ：Next.js
![[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds](https://humanxai.info/images/uploads/nextjs-18-r3f-ocean-volumetric-clouds.webp)
[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds
2026-02-16 | lain
Next.js + R3F 実装連載第18回。Three.js公式のWaterシェーダーによる海面表現と、レイマーチングを用いたボリューメトリックな雲を組み合わせ、リアルな自然環境を構築します。