Procedural

[Noise 入門 #04] Perlin Noise のアルゴリズムを図解で理解する

2026-02-11 | lain

Perlin Noise を“図解”で理解するための基礎記事。グリッド・勾配ベクトル・内積・補間の4ステップで、ノイズがどのように滑らかさを生み出すのかを丁寧に解説します。

カテゴリ： Procedural

タグ： #Noise#Perlin#Simplex#Shader#Three.js#WebGL

[Noise 入門 #01] ノイズとは何か？— 滑らかな乱数の正体を理解する

2026-02-08 | lain

ゲーム開発・CG制作で使われる“ノイズ”の正体を、ランダムとの違いから基礎レベルで理解する。Perlin/Simplex 以前に知るべき核となる概念を解説。

カテゴリ： Procedural

タグ： #Noise#Math#Three.js#Shader

[Noise 入門 #47] Object Distribution — ノイズを「確率マップ」にして植生を群生させる

2026-03-26 | lain

Noise 入門シリーズ第47回。ボクセル地形にランダムではなく自然な「群生」を作るため、ノイズを確率マップ（Probability Map）として扱い、草木を配置する数学的アプローチを解説します。

カテゴリ： Procedural

タグ： #Noise#Math#Three.js#Voxel

[Noise 入門 #46] Procedural Caves — 3DノイズとPerlin Wormsで「地下世界」を削り出す

2026-03-25 | lain

Noise 入門シリーズ第46回。3Dノイズによる「密度」の数式と、地下に複雑に絡み合うトンネルを形成する「Perlin Worms（パーリンの虫）」のアルゴリズムを用いて、プロシージャルな洞窟を錬成する手法を直感的に解説します。

カテゴリ： Procedural Algorithm

タグ： #Noise#Voxel#3D#Math

[Noise 入門 #45] Web Workers と 3D Noise — 非同期生成と「密度」で空間を定義する

2026-03-24 | lain

チャンク生成時のカクつきを解消するWeb Workersの導入と、2Dのハイトマップから3Dの「密度（Density）」を用いた地形生成へのパラダイムシフトを解説します。

カテゴリ： Procedural

タグ： #Noise#Three.js#Web Workers#3D#Optimization

[Noise 入門 #44] Chunk Manager の実装 — 無限の世界を動的に生成・管理する

2026-03-23 | lain

Noise入門シリーズ第44回。前回のバイオーム実装を拡張し、Three.jsとOOP（オブジェクト指向）を用いて無限に広がる世界を動的に生成・破棄する「チャンクマネージャー」の設計と実装手法を解説します。

カテゴリ： Procedural

タグ： #Noise#Three.js#Voxel#Optimization

[Next.js 49] InstancedMeshの表現力拡張 — シード生成・レトロパレット・動的ライティング

2026-03-22 | lain

前回のInstancedMeshを用いた100万ブロックの描画テストに続き、今回は「色」と「時間」の概念を導入。シード値による地形生成（Mulberry32）、Y座標ベースのバイオーム表現（C64風レトロパレット）、そしてライトの円軌道アニメーションによる動的ライティングの実装と最適化手法を解説します。

カテゴリ： Next.js Procedural

タグ： #Three.js#Voxel#WebGL#Noise

[Noise 入門 #43] バイオームと無限の生成 — InstancedMeshに色彩とチャンクを宿す

2026-03-22 | lain

Noise入門シリーズ第43回。InstancedMeshで生成したボクセル地形の高さ（Y座標）を利用してバイオーム（海、砂浜、森、雪山）を塗り分ける方法と、無限の世界を生成するチャンクシステムの基礎概念を解説します。

カテゴリ： Procedural Noise 入門

タグ： #Noise#Three.js#Voxel#Procedural Generation

[Next.js #48] Three.js × InstancedMeshによる400万ボクセル描画

2026-03-21 | lain

Noise入門シリーズで解説したInstancedMeshによるボクセル生成をNext.js環境に実装。当初の目標だった10万個を大きく超え、所有するRTX 4070 Tiの限界である「400万個（2000×2000）」のブロック描画とシャドウ処理の限界負荷テストを実行した記録です。

カテゴリ： Next.js Procedural

タグ： #Three.js#Noise#Voxel#Optimization#GPU

カテゴリ：Procedural