Procedural // PROTOCOL.LAIN

[ CATEGORY / Procedural ]

MATCHED_ITEMS: 60

[2026/4/8]

[Noise 入門 #60] 第6集完結 — 神領域のオーディオ・ビジュアル・アート

Noise入門シリーズ第60回。Web Audio APIを用いた音の解析データ（低音・高音）をGLSLに流し込み、Domain Warpingやプラズマ表現と連動させる手法を解説。音と数式が完全に同期する「神領域のアート」をThree.js上で実装します。

[2026/4/7]

[Noise 入門 #59] 次元崩壊グリッチ（Post-Processing Audio Glitch） — 音の衝撃で世界がバグるサイバーパンク・エフェクト

Web Audio APIとThree.jsのポストプロセスを連携させ、音の強さに反応してUV座標を引き裂くAudio-Reactiveなグリッチエフェクトの実装手法を直感的にまとめます。

[2026/4/6]

[Noise 入門 #58] Curl Noise × Audio — 音に乗って舞うパーティクル

Noise 入門シリーズ第58回。GPGPUによる100万のパーティクルとCurl Noiseのベクトル場に音楽データを流し込み、音の波形で流体を制御するオーディオ・ビジュアル・アートの錬成方法をGLSLコードと共に直感的に解説します。

[2026/4/5]

[Noise 入門 #57] Audio-Reactive Domain Warping — 音で歪む空間

Noise入門シリーズ第57回。Web Audio APIで取得した低音や高音のデータをGLSLへ流し込み、Domain Warpingの強度やノイズの細かさを動的に制御。音楽と数式が連動して空間が崩壊する、サイケデリックな視覚表現のチューニング方法を直感的にまとめます。

[2026/4/4]

[Noise 入門 #56] Audio Analysis & FFT — 音響解析の基礎とノイズへの接続

Noise 入門シリーズ第56回。ここから音とノイズが融合する第6集へ突入。ブラウザ上で音を「数式」に変換するFFTの仕組みと、解析したデータをThree.js経由でGLSLに渡し、Audio-Reactiveな世界を作るための土台を作ります。

[2026/4/3]

[Noise 入門 #55] 魔法文字とグリフ（Procedural Alien Runes）— 極座標とVoronoiが描く未知の言語

Three.jsとGLSLを用いて、数式から意味ありげなシンボルを絞り出すアプローチ。Voronoiのセル境界と空間の円環的な歪みを掛け合わせ、インタラクティブな魔法文字を錬成するプロセスを直感的に学びます。

[2026/4/2]

[Noise 入門 #54] プロシージャル・プラズマとエネルギーシールド — ノイズの等高線とフレネルが描くSF的力場

Noise 入門シリーズ第54回。モヤモヤとした連続的なノイズを「鋭利で幾何学的なSF的エフェクト」へと変換するテクニック。サイン波による等高線（Contour）の抽出と、立体感を強調するフレネル効果を用いて、インタラクティブなエネルギーシールドを実装します。

[2026/4/1]

[Noise 入門 #53] Liquid Metal（液体金属）とRaymarchingの融合 — 数式で「T-1000」を錬成する

Three.jsとGLSLを用いて、SDFとFBMノイズを融合。Raymarchingによる完璧な法線計算と環境反射を駆使し、ポリゴンでは不可能な「ちぎれては融合する流体」のプロシージャル表現を解説します。

[2026/3/31]

[Noise 入門 #52] チューリング・パターン（Reaction-Diffusion） — 数式が描く「生命の模様」

Perlin Noiseなどの静的な関数とは異なる、時間経過で成長するReaction-Diffusion（反応拡散系）のアルゴリズム。チューリング・パターンの仕組みと、Ping-Pongバッファを用いたGLSLでの実装概念を直感的にまとめます。

[2026/3/30]

[Noise 入門 #51] 量子揺らぎ（Quantum Fluctuation）と空間崩壊

Noise入門シリーズ第51回。実装から鑑賞へシフトする第6集スタート。物理法則を無視した再帰的な座標のねじれを用いて、未知のエネルギーの渦や空間崩壊のVFXをThree.jsとShaderで表現するロジックを解説します。

[2026/3/29]

[Noise 入門 #50] 第5集完結 — 終わらない世界を歩く（Procedural Worldの統合）

Noise入門シリーズ第50回。第5集「Procedural World編」の完結編として、個別に作成した生成アルゴリズムやShaderをすべて結合し、無限に広がるプロシージャルな箱庭を構築・探索する手法を解説します。

[2026/3/28]

[Noise 入門 #49] Boids × Flow Field — 風に乗る「鳥の群れ」を空に放つ

空間を漂う生命の自律性を定義する「Boids」と、環境の物理的なうねりである「Flow Field（Curl Noise）」を融合。Three.jsとGLSLを用いて、風に流されながらも群れをなして舞う鳥たちを実装するプロシージャルな生態系構築の手法を解説します。

[2026/3/27]

[Noise 入門 #48] Wind & Flow — 風向ノイズで草木を揺らす

InstancedMeshで配置された大量の草木に対し、GLSLのVertex Shaderとノイズ関数を用いて自然な風の揺らぎ（Wind & Flow）を実装する手法。Three.jsのonBeforeCompileを活用したプロシージャルなアニメーションの基礎を直感的に学びます。

[2026/3/26]

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

地形生成の次は植生分布。Three.jsと多重ノイズを用いて、大地の環境に依存した自然な森や平原をプロシージャルに生成する「確率マップ」のテクニックを学びます。InstancedMeshを用いた描画最適化の考え方も併せて解説。

[2026/3/25]

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

3Dノイズを活用し、Minecraftのようなボクセル世界に無限に続く洞窟（スイスチーズ・ケーブ、Perlin Worms）をプロシージャル生成する実装手法。密度の閾値判定で空間を削り出す仕組みを解説します。

[2026/3/24]

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

Noise 入門シリーズ第45回。Three.jsでの重いノイズ計算をWeb Workersで非同期化し、60FPSを維持する方法を解説。さらに、オーバーハングや洞窟といった複雑な地形を生み出す「3Dノイズによる密度の数式」の基礎を直感的に学びます。

[2026/3/23]

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

Three.jsのInstancedMeshで生成したボクセル地形を無限に広げるChunk Managerの実装。カメラの移動に合わせてチャンクを動的に読み込み・破棄し、Mapを用いたキャッシュ戦略でパフォーマンスを最適化する、プロシージャル世界の基盤構築を学びます。

[2026/3/21]

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

Three.jsのInstancedMeshを活用し、ノイズから生成した地形に色を与えるバイオームの実装と、シード値によるランダム生成、さらに無限の世界を描画するためのチャンク（Chunk）の概念を図解とコードで直感的に解説します。

[2026/3/21]

[Noise 入門 #42] Three.js × InstancedMesh — 10万のブロックで「最初の大地」を構築する

Three.jsのInstancedMeshを使ってMinecraftのようなボクセル地形を生成する方法を解説。FBMノイズを利用し、10万個のブロックを60FPSで描画するパフォーマンス最適化の実装を学びます。

[2026/3/20]

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

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

[2026/3/19]

[Noise 入門 #40] 第4集完結 — 太陽系を錬成する（Procedural Solar System）

これまで錬成してきた地形、雲海、オーロラ、リングなどのシェーダーを統合し、複数の惑星が軌道を描く「ミニ太陽系」をThree.jsで実装。クラスによる星の管理やFlyControlsを用いた宇宙空間の探索など、プロシージャルな宇宙をブラウザ上に展開する集大成となる記事です。

[2026/3/18]

[Noise 入門 #39] Procedural Rings — 惑星を彩る塵と氷の軌道

惑星の周囲に広がる美しい「環（Rings）」をThree.jsとGLSLで実装。極座標系（Polar Coordinates）と1Dフラクタルノイズを組み合わせ、宇宙空間に塵と氷の軌道をプロシージャルに生成する手法を図解とコードで直感的に解説します。

[2026/3/17]

[Noise 入門 #38] Procedural Aurora — 磁力線とノイズが織りなす極地の光のカーテン

Three.jsとGLSLを用いて、惑星の極地に揺らめく「オーロラ」をプロシージャルに生成する実装手法。ノイズ座標系の異方性（Stretching）、Domain Warpingによるうねりの表現、極地マスク（Polar Mask）の数式を図解とコードで直感的に解説します。

[2026/3/16]

[Noise 入門 #37] Procedural Night Lights — ノイズが描く「文明の灯火」と夜の境界線

Three.jsとGLSLを用いて、惑星の昼夜の境界線（Terminator）を計算し、Voronoi Noiseで作る都市網の幾何学パターンを陸地にだけ適用する方法を図解とコードで直感的に解説。荒ぶる自然と静かに瞬く文明の境界線を描き出します。

[2026/3/15]

[Noise 入門 #36] Procedural Lightning — 台風の目に「閃光」を落とす

Noise 入門シリーズ第36回。前回のInteractive Stormに「光」を追加します。Ridgeノイズの閾値処理による稲妻の形状生成、時間軸によるストロボ明滅、そして雲の内部発光を組み合わせ、生きた嵐を完成させる実装手法を図解とコードで直感的に解説します。

[2026/3/14]

[Noise 入門 #35] Interactive Storm — マウスで気象を操り「巨大な台風」を錬成する

Three.jsとGLSLを用いて、プロシージャルな雲のFBMノイズにCurl Noiseのベクトル場を局所的に適用。Raycasterを使った3D座標の取得とDomain Warpingの応用により、マウスで大気をかき混ぜて台風を錬成するインタラクションを実装します。

[2026/3/13]

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

Noise 入門シリーズ第34回。地形用の球体の外側にもう一つの球体（Cloud Sphere）を配置し、4D FBMノイズで流れる雲を表現します。透過処理（アルファブレンド）の最適化や、GPU上で高速に影をフェイクする空間ハックまで、生きた惑星を錬成する実装手法を図解とコードで解説します。

[2026/3/12]

[Noise 入門 #33] Procedural Biome と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる

Three.jsとGLSLを用いて、ノイズで生成した惑星に海や森などのバイオームを動的に割り当て、フレネル効果で青い大気を纏わせる実装手法を図解とコードで解説。無機質な星が美しい惑星へと進化する過程を体験しましょう。

[2026/3/11]

[Noise 入門 #32] 球体ノイズとインタラクション — プロシージャルな惑星を「手で回して」探索する

2Dから3D座標のノイズへ次元を拡張。Three.jsとGLSLを用いてシームレスなノイズ惑星を生成し、Raycasterによる3D座標の取得とVertex Shaderによる地形隆起（Displacement）を組み合わせた「触れる世界」の作り方を直感的に解説します。

[2026/3/9]

[Noise 入門 #31] 第4集開幕 — Three.js × GLSLで「触れるノイズ」を実装する

Noise 入門シリーズ第31回。これまでの「鑑賞するノイズ」から「体験するノイズ」へ。Three.jsのRaycasterとShaderを連携させ、マウスホバーによる局所的なDomain Warping（空間のねじれ）を実装するインタラクションの基礎を深掘りします。

[2026/3/9]

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

Noise 入門シリーズ第30回。静かな漆黒の空間に100万の星々が渦巻き、色彩豊かな星雲がうねる。FBM、Domain Warping、極座標、そしてGPGPUの全技術を掛け合わせ、圧倒的なスケールの「プロシージャルな宇宙」を錬成する設計図を解き明かします。

[2026/3/8]

[Noise 入門 #29] GPGPU × Noise — 100万の粒子が描く流体シミュレーション

CPUの限界を超え、GPUの真の力を解放するGPGPUの基礎。見えないテクスチャをデータ配列として扱い、Ping-Pongバッファを用いて100万の粒子の状態を毎フレーム更新する「流体シミュレーション」のGLSL×Three.js実装を直感的に解説します。

[2026/3/7]

[Noise 入門 #28] Particle System × Curl Noise — 10万の粒子をノイズの“うねり”に乗せる

3D空間に放たれた10万個のパーティクルを、Curl Noise（回転ノイズ）を用いたベクトル場で制御し、流体シミュレーションなしで美しいうねりや光の軌跡をGLSLとThree.jsで実装する手法を直感的に解説します。

[2026/3/6]

[Noise 入門 #27] Normal Recomputation — 歪んだ世界に正しい光と影を取り戻す

Noise 入門シリーズ第27回。頂点をノイズで動かしただけでは、元のツルツルの法線が維持されてしまい光と影が破綻します。近隣頂点のサンプリングと偏微分・外積を用いた「法線再計算（Normal Recomputation）」の数学的アプローチとGLSL実装を深掘りします。

[2026/3/5]

[Noise 入門 #26] Vertex Shaderによる頂点変形（Displacement） — ノイズで立体を鼓動させる

3Dモデルに生命を吹き込むVertex ShaderでのDisplacement手法。頂点の法線ベクトルを利用してノイズで立体を変形させる原理と、Three.jsでの実装方法を図解とGLSLコードで直感的に解説。

[2026/3/4]

[Noise 入門 #25] Three.js × GLSL の架け橋 — ShaderMaterial と EffectComposer でノイズをブラウザに解き放つ

Noise 入門シリーズ第25回。純粋なGLSLコードをThree.jsに統合し、インタラクティブなノイズ表現を実現するエンジニアリングの基礎を学びます。ShaderMaterialによるマテリアル制御、Uniformsによる時間同期、EffectComposerを用いたポストプロセスのセットアップまでを体系的に整理します。

[2026/3/3]

[Noise 入門 #24] Post-Processing × Noise — 世界を歪める「空間ハック」の魔法（水中の揺らぎ・陽炎・グリッチ）

Noise 入門シリーズ第24回。空間内のオブジェクトではなく、レンダリングされた画面全体（カメラ）に対してノイズを適用する「ポストプロセス」の世界へ。UV座標のサンプリング偽装を用いて、水中、陽炎、次元が崩壊するグリッチエフェクトをGLSLで実装する手法を直感的に解説します。

[2026/3/2]

[Noise 入門 #23] 極座標 × 4D Noise — GLSLで「プロシージャルな魔法陣」を展開する

Shaderにおける極座標（Polar Coordinates）の基礎から、4D Simplex Noiseを用いた円環状のオーラ生成まで。幾何学的な秩序とノイズの揺らぎを掛け合わせ、脈打つようなプロシージャル魔法陣をGLSLで実装する手法を詳しく解説します。

[2026/3/1]

[Noise 入門 #22] Domain Warping の真骨頂 — GLSLで空間をねじ曲げ「ブラックホール」を錬成する

Shaderで空間を歪曲し、重力レンズ効果や事象の地平面、降着円盤を表現。FBMとDomain Warpingを用いてブラックホールをプロシージャルに錬成するGLSLの実践的な解説です。

[2026/2/28]

[Noise 入門 #21] Shader 実践編開幕 — 4DノイズとGLSLで「プロシージャルな炎」を錬成する

Noise 入門シリーズ第21回。いよいよ第3集「Shader（GLSL）実践編」がスタート。これまで学んだノイズの数学とアルゴリズム（FBM、4D Noise）を総動員し、GPUの力で画面上に「燃え盛るプロシージャルな炎」を実装する方法を直感的に解説します。

[2026/2/27]

[Noise 入門 #20] Shaderの最適化とミクロなディテール — 遠景のLODと近景のBump Mapping

手続き型ノイズを用いた地形や世界の生成において、計算負荷を下げるLODと、ポリゴン数を増やさずに近景の微細な凹凸を表現するBump Mappingの考え方を解説。これにてアルゴリズム編は完結し、次なるShader実践編へと繋がります。

[2026/2/26]

[Noise 入門 #19] Procedural Material — ノイズをマスクにした質感の動的ブレンド

前回のProcedural Lightingで立体化したノイズ地形に、GLSLのmix関数を用いて生態系（バイオーム）を構築します。高さ（Height）と法線のY成分（傾き）を基準にした質感のブレンド手法を直感的に学びます。

[2026/2/25]

[Noise 入門 #18] Procedural Lighting — ノイズから法線を捏造し、光と影をシミュレーションする

ノイズの勾配から法線マップを捏造し、GLSLで光と影をシミュレーションするProcedural Lightingの実装手法。中心差分法を用いた法線計算とランバート反射について図解とコードで直感的に解説します。

[2026/2/24]

[Noise 入門 #17] 4D Voronoi × Simplex Noise — 動く細胞とノイズの融合（Noise Blending）

Noise 入門シリーズ第17回。静止したVoronoi（細胞）を時間経過で動かす4D化のアプローチと、Simplex Noiseを使ったDomain Warpingによる「ノイズの融合（Noise Blending）」の仕組みを解説。生物的な鼓動と無機物が交差するプロシージャル表現をGLSLで実装します。

[2026/2/23]

[Noise 入門 #16] 4D Simplex Noise × FBM × Domain Warping — 時間を与えられたノイズが「炎」と「プラズマ」になる瞬間

Noise 入門シリーズ第16回。基礎・アルゴリズム編を抜け、いよいよShaderを用いた実践的な応用レイヤーへ。4DノイズにFBMの複雑さとDomain Warpingの空間のねじれを掛け合わせ、静止したノイズを視覚的な「魔法（VFX）」へと昇華させるプロセスをまとめます。

[2026/2/22]

[Noise 入門 #15] Simplex Noise を GLSL で実装する — 空間と時間を歪める 4D の魔法

Noise 入門シリーズ第15回。Simplex Noise のアルゴリズムを GPU（GLSL）で動かすための具体的な実装手法を解説。空間を歪ませる Skewing 係数の意味から、3D、そして時間をパラメータに加えた 4D ノイズまで、パフォーマンスを維持したまま滑らかなアニメーションを実現する技術をまとめます。

[2026/2/21]

[Noise 入門 #14] Simplex Noise — Perlin Noiseを過去にした「正三角形」の魔法

Noise 入門シリーズ第14回。高次元での計算コストを抑え、より自然な結果を生み出すSimplex Noiseのアルゴリズムを解説。空間を歪ませるSkewingなど、数学的な魔法の構造に迫ります。

[2026/2/20]

[Noise 入門 #13] Voronoi Noiseの実践 — 数式で「岩肌」「ひび割れ」「クリスタル」を錬成する

Noise 入門シリーズ第13回。前回学んだVoronoiの概念をShader（GLSL）の実装へと落とし込みます。F1とF2の組み合わせによるテクスチャ表現のバリエーションや、Domain Warpingとの融合による有機的な質感作りまでを網羅。

[2026/2/19]

[Noise 入門 #12] Voronoi / Worley Noise — 「距離」が描く細胞の幾何学

「一番近い点はどこか？」というシンプルな問いから生まれる幾何学的なパターン。Voronoi/Worley Noiseのアルゴリズム、距離関数の違い、そしてF1/F2を用いた質感表現の基礎を直感的に理解できるよう整理します。

[2026/2/18]

[Noise 入門 #11] Procedural Water — ノイズで海面を波立たせる（Gerstner Wave vs Noise）

Noise 入門シリーズ第11回。手続き型で生成する水面表現の核心に迫ります。FBMによるランダムな揺らぎと、Gerstner Waveによる物理的な『尖り』を持つ波の作り方を比較・融合し、Shaderで海を作る手法をまとめます。

[2026/2/17]

[Noise 入門 #10] Procedural Terrain Generation — 数学で大地を隆起させる

Perlin NoiseとFBMをVertex Shader（頂点シェーダー）に適用し、平面をリアルタイムに隆起させて山岳地帯を作ります。単なる波打ちを「山」に変えるRidge Noiseのテクニックや、高度・傾斜に基づくバイオーム塗り分けなど、プロシージャルな世界生成の基礎を実装します。

[2026/2/16]

[Noise 入門 #09] Volumetric Clouds — ノイズで空に雲を浮かべる（レイマーチング基礎）

Noise 入門シリーズ第9回。ボリューメトリック・レンダリングの基礎となるレイマーチングの手法を学びます。3D FBM による密度生成、Beer's Law を用いた光の減衰計算など、ノイズを『空間の密度』として扱う技術を体系的に整理します。

[2026/2/15]

[Noise 入門 #08] Curl Noise — ノイズは“流れ”になる。流体シミュレーションを使わずに流体を作る

Noise 入門シリーズ第8回。静止したノイズを「動き（ベクトル場）」に変換する Curl Noise (回転ノイズ) を解説。スカラー場、勾配、Curl演算子を用いて、発散ゼロ（Divergence Free）の流体挙動をGLSLで実装する方法をまとめます。

[2026/2/14]

[Noise 入門 #07] Three.js + GLSLでDomain Warpingを実装する — 数式を世界に変換する

Noise 入門シリーズ第7回。Domain Warping を Shader で実装し、Three.js 上で動かします。理論からGPUコードへの変換、FBMとの融合、strengthパラメータの効果、時間拡張（4D化）までを整理し、ノイズを“世界生成アルゴリズム”として扱います。

[2026/2/13]

[Noise 入門 #06] Domain Warping — 座標をねじると世界が壊れる

Noise 入門シリーズ第6回。Domain Warping（ドメインワーピング）の仕組みを、座標変形という視点から図解で解説。通常ノイズとの違い、FBMとの組み合わせ、strengthパラメータの効果、3D/時間拡張まで体系的に整理します。

[2026/2/12]

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

Perlin Noise の出力をそのまま使うと“のっぺり”する。その問題を解決し、自然界の複雑さに近づけるのが FBM（Fractal Brownian Motion）。この記事ではアルゴリズムの意味・式の構造・視覚的効果を直感で理解できるように解説します。

[2026/2/11]

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

Noise 入門シリーズ第4回。Perlin Noise の内部アルゴリズムを、数学ではなく“図解”で直感的に理解できるよう整理。グリッド、勾配ベクトル、内積計算、fade 補間の手順を踏まえ、次回の FBM 実装に繋がる知識をまとめます。

[2026/2/10]

[Noise 入門 #03] ノイズを設計する5つのパラメータ（Frequency / Amplitude / Octave / Lacunarity / Gain）

ノイズの形と性質を完全に決める5つのパラメータ（frequency, amplitude, octave, lacunarity, gain）を詳細に解説。ノイズアート・地形生成・雲・炎・Fog・Shader 実装など、全ての procedural 表現の基礎となる概念を体系化する。Three.js や GLSL 実装へ進む前の決定版ガイド。

$[Noise 入門 #02] ノイズを作る数学の基礎 — グリッド・勾配・補間を理解する$

[2026/2/9]

[Noise 入門 #02] ノイズを作る数学の基礎 — グリッド・勾配・補間を理解する

ノイズを実装するうえで必須となる数学の基礎を解説する入門記事。Value Noise と Perlin Noise の違い、グリッド構造、勾配ベクトル、内積、補間関数、frequency・amplitude といった概念を、Three.js・Shader 実装につながる形で分かりやすく整理する。

[2026/2/8]

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

JavaScript・Three.js・Shader へ進む前に、まず『ノイズとは何か？』を徹底的に理解する入門回。自然の“ゆらぎ”を作る数式としてのノイズの本質、ランダムとの違い、周波数や振幅などの最低限の概念を整理する。