Noise

2026-02-08 | lain

R3F(React Three Fiber) 上で FBM ノイズ地形を生成し、Raycaster で地面の高さを取得してプレイヤーを自然に追従させる。地形生成（頂点Z変形・法線再計算・標高カラー）から、WASD移動＋atan2回転、hit安全処理とLERP補間までを最小構成でまとめる。

カテゴリ： Next.js

タグ： #R3F#Three.js#Noise#Perlin#FBM#Raycast#Terrain#MMD#WebGL

2026-01-26 | lain

シェーダー初心者が最短で“作品に使える表現”へ到達する回。sin波で水面、noiseで炎、depthで透明度、Fresnelで発光（リムライト）を、Three.js（GLSL）とUnity（URP/HLSL）で同じ発想のまま実装する。

タグ： #GLSL#HLSL#URP#Water#Noise#Fresnel#Depth

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-13 | lain

Domain Warping は“ノイズの入力座標そのものを歪ませる”技術。FBMと組み合わせることで、渦・煙・雲・ブラックホールのような自然構造を生み出せる。本記事では図解と数式で直感的に理解する。

カテゴリ： Procedural

タグ： #Noise#Domain Warping#FBM#Perlin#Shader#Three.js#WebGL

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

2026-02-09 | lain

Perlin・Simplex に共通する“ノイズの根本数学”。グリッド、勾配ベクトル、内積、補間、frequency・amplitude の基礎を徹底的に整理する回。

カテゴリ： Procedural

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

2026-02-14 | lain

Domain Warping を Three.js + GLSL で実装する実践回。ノイズを“値の揺らぎ”から“空間変形アルゴリズム”へと引き上げ、FBMとの組み合わせ、strength制御、時間拡張までを体系的に解説します。

カテゴリ： Procedural

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

2026-02-15 | lain

ノイズは単なる「ザラザラした模様」ではない。適切な数学（Curl演算子）を通すことで、それは「流体」へと進化する。重たい物理演算を使わずに、煙や水流のような「圧縮されない滑らかな動き」を作る Curl Noise のアルゴリズムと実装を解説。

タグ： #Noise#GLSL#Three.js#Curl Noise#Vector Field#Fluid

2026-02-16 | lain

平面（Surface）の世界から体積（Volume）の世界へ。これまでの知識（FBM、Warping、Curl）を総動員し、レイマーチングを用いて「中に入って飛べる雲」を数学的に彫り出す方法を解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Raymarching#Three.js#Volumetric

2026-02-18 | lain

「表現編」スタート。静止した大地から、動き続ける海へ。ノイズと数学的な波（Gerstner Wave）を組み合わせ、リアルに波打つ水面を構築する方法を解説します。

カテゴリ： Three.js Shader

タグ： #Noise#GLSL#Procedural#Water

カテゴリ：Noise