Three.js

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

2025-12-17 | lain

GLB形式の3Dモデルを作成し、Three.jsで読み込んでアニメーションを制御する方法。カメラの向きに合わせたキャラクターの移動処理も解説。

タグ： #Three.js#GLB#アニメーション#キャラクター移動#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-14 | lain

React Three Fiberで複数のGLTFモデルを横スライド切替できる3Dビューアを実装。モデルの自動センタリング、スケール正規化、Box3による接地処理、lerpによるスムーズ移動、ドラッグ操作の仕組みまで整理する。

カテゴリ： Next.js

タグ： #React Three Fiber#R3F#GLTF#Three.js#3D Viewer

2026-03-12 | lain

Noise 入門 #33 の内容をもとに、Next.js プロジェクト内で Procedural Biome と大気散乱を実装。球体ノイズ地形に海・砂浜・森・雪・岩肌を割り当て、Fresnel で青い大気を重ね、GUI で地形や流れ方向まで調整できる惑星デモとしてまとめます。

カテゴリ： Next.js

タグ： #Three.js#GLSL#Noise#Procedural#Shader#Planet#Biome

カテゴリ：Three.js