カテゴリ：GLSL

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

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

2026-03-08 | lain

Noise 入門シリーズ第29回。GPGPUを活用し、100万個のパーティクルをCurl Noiseのベクトル場に乗せて流体シミュレーションを行う実装手法を解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#GPGPU#Particle System

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

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

2026-03-07 | lain

Noise入門シリーズ第28回。静的なメッシュから独立した「点」の集合へ。Curl NoiseとGLSLを用いて、10万のパーティクルを流体のようにうねらせる魔法のような視覚表現を実装します。

カテゴリ： Procedural

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

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

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

2026-03-06 | lain

Vertex Shaderでノイズ変形（Displacement）させた立体に、偏微分と外積を用いて「正しい法線」を再計算（捏造）し、破綻した光と影を取り戻す手法を解説します。

カテゴリ： Procedural Shader

タグ： #Noise#GLSL#Three.js#Math#3D

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

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

2026-03-05 | lain

Noise 入門シリーズ第26回。ピクセルを塗るFragment Shaderから、立体を直接歪めるVertex Shaderの世界へ。法線（Normal）に沿った頂点移動の基本と、分割数の罠、そしてThree.js + GLSLを用いたリアルタイムな3Dモデルの変形（Displacement）を解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#Vertex Shader#Displacement

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

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

2026-03-04 | lain

数式としてのノイズを、ブラウザ上で美しく統治する。Three.jsのShaderMaterialとEffectComposerを用いて、数学をWebエンジニアリングへと昇華させる具体的な実装手法を解説。

カテゴリ： Procedural

タグ： #Three.js#GLSL#WebGL#ShaderMaterial#Post-processing

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

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

2026-03-03 | lain

ポストプロセス（Post-Processing）とノイズを組み合わせ、画面全体を歪ませる手法を解説。水中の揺らぎ、陽炎（Heat Haze）、グリッチエフェクトなど、レンダリング結果そのものをハックするShaderの実装に迫ります。

カテゴリ： Procedural

タグ： #Noise#Shader#GLSL#Post-Processing#WebGL

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

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

2026-03-02 | lain

Noise 入門シリーズ第23回。直交座標から極座標へ視点を移し、GLSLで「プロシージャルな魔法陣 / ノイズオーラ」を実装。数式の秩序と4Dノイズの混沌を融合させ、円環状の美しいエフェクトを錬成する手法を図解とコードで解説します。

カテゴリ： Procedural Shader

タグ： #Noise#GLSL#WebGL#Polar Coordinates#VFX

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

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

2026-03-01 | lain

Noise 入門シリーズ第22回。Domain Warpingの真骨頂として、GLSLを用いたPost-Processing（後処理）エフェクトで空間そのものをねじ曲げ、光を飲み込む「ブラックホール」を実装する手法を解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Shader#Math#VFX

[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現

[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現

2026-03-01 | lain

ノイズ連載21回分の集大成。ドメイン・ワーピングとカスタムシェーダーを組み合わせ、ライブラリ不要の爆発的な視覚エフェクトを実装します。

カテゴリ： Next.js

タグ： #React Three Fiber#GLSL#Noise#Three.js#Web Graphics