[Noise 入門 #41] 第5集開幕 — 終わらない世界を錬成する（Minecraft的なボクセル地形とチャンクの基礎）

2026-03-20 | lain

Noise入門シリーズ第41回、いよいよ第5集「Procedural World編」が開幕。FBMノイズを用いたMinecraftのような無限に広がるボクセル地形の生成原理と、世界を分割管理する「チャンク（Chunk）」の概念を解説します。

カテゴリ： Procedural

タグ： #Noise#Voxel#FBM#Chunk#GameDev

[Next.js #38] Interactive Storm on Sphere Planet — マウスで台風を錬成する Three.js / GLSL 実装

2026-03-14 | lain

Next.js / Three.js / GLSL で球体惑星の雲へ局所的な干渉を加え、マウス操作で巨大な台風を発生させるインタラクションを実装します。Raycasterで取得した球面座標をもとに、FBM雲・Curl Noise・接線方向の渦ベクトルを合成し、台風の目まで持つ気象表現へ発展させます。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Procedural#Noise#FBM#Curl Noise#Raycaster#Domain Warping

【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する

2026-03-13 | lain

前回作成した Procedural Biome Planet をベースに、外側へ Cloud Sphere を追加し、4D FBMノイズで流れる雲海を実装。雲の濃淡表現、地表への影フェイク、Atmosphere と組み合わせた“生きた惑星”表現を Three.js + GLSL で構築した記録。

カテゴリ： Next.js

タグ： #Three.js#GLSL#Noise#FBM#Procedural Generation#Planet#Shader

[Noise 入門 #34] Procedural Clouds on Sphere — 惑星を包み込む「生きた雲海」を錬成する

2026-03-13 | lain

Three.jsとGLSLを用いて、プロシージャルな惑星にFBMノイズを活用した「動く雲海」を実装。地形の上に雲の層を重ね、地表に影を落とすことで生きた気象システムを構築します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#FBM#Shader

[Noise 入門 #30] 第3集完結 — 全てを束ねる「Procedural Universe」（プロシージャルな宇宙の錬成）

2026-03-09 | lain

第3集「Shader実践編」の最終回。これまでに学んだFBM、Domain Warping、極座標、GPGPUの全知識を統合し、ブラウザ上に100万の星々と星雲が渦巻く「プロシージャルな宇宙」をGLSLで錬成します。

カテゴリ： Procedural Shader

タグ： #Noise#GLSL#FBM#Domain Warping#GPGPU#Three.js#Generative Art

[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる

2026-02-12 | lain

Perlin Noise を“自然な地形・雲・水”に変える魔法の技術、Fractal Brownian Motion（FBM）を図解とコードで理解する。Frequency / Amplitude / Octave がどのように積み重なるか、Three.js/Shader で応用するための基礎を整理します。

カテゴリ： Noise

タグ： #PerlinNoise#FBM#WebGL#Shader#Three.js