Procedural Generation

2026-03-21 | lain

Three.jsとInstancedMeshを駆使し、ブラウザ上で数百万〜数千万個のボクセルを描画してGPUを限界まで追い込むベンチマークアプリを開発・公開しました。

カテゴリ： Programming

タグ： #Three.js#WebGL#Benchmark#Procedural Generation#JavaScript

2026-03-24 | lain

Web Workersと3D密度ノイズを駆使して、ブラウザ上で無限に広がる浮遊大陸と立体的な雲を生成。RTX 4070 Tiのパワーを最大限に引き出すWorker Poolの実装から、高度による深淵の演出まで。

カテゴリ： Next.js

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

2026-03-22 | lain

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

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

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

2026-02-10 | lain

Perlin・Simplex・FBM すべてに共通する“ノイズの設計パラメータ”を体系的に理解する回。周波数・振幅・オクターブ・ラキュナリティ・ゲインの5要素を押さえることで、ノイズの世界が一気に読み解けるようになる。

カテゴリ： Procedural

タグ： #Noise#Shader#Three.js#Mathematics#Procedural Generation

2026-02-20 | lain

Babylon.jsでfBmノイズを使った地形生成、法線再計算、沈み込み防止、thin instancesによる草原描画、風揺れシェーダ、DynamicTextureによる地面テクスチャ生成、WebXR移動までをまとめる。

カテゴリ： Babylon.js

タグ： #Babylon.js#WebXR#TypeScript#Procedural Generation#Noise#thin instances#Shader

2026-02-22 | lain

Simplex Noise の理論を GLSL で実装し、高効率な 3D/4D ノイズを実現する方法を解説します。

カテゴリ： Procedural

タグ： #GLSL#Shader#Simplex Noise#Procedural Generation#WebGL

2026-03-29 | lain

Noise入門シリーズ第5集完結。これまで錬成してきた無限のチャンク、バイオーム、ボクセル地形、大気散乱、植生、そして生命の群れ（Boids）のすべてを統合。Three.jsとGLSLを駆使して構築した「終わらない世界」を自らの足で歩き、プロシージャル生成の集大成を体感します。

タグ： #Noise#GLSL#WebGL#Voxel#Procedural Generation

2026-03-29 | lain

Noise入門シリーズ全50回の集大成。これまで個別に開発してきた無限地形、洞窟、植生、Boids、Flow Fieldのすべてを統合。物理エンジンを使わず「数学」だけで当たり判定と接地を実現した、終わらない世界の構築記録。

カテゴリ： Next.js

タグ： #Three.js#Noise#WebGL#GLSL#Procedural Generation#GameDev

カテゴリ：Procedural Generation