![[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる](https://assets.lain-lab.com/images/uploads/noise-intro-05-fbm.webp)
[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる
Perlin Noise の出力をそのまま使うと“のっぺり”する。その問題を解決し、自然界の複雑さに近づけるのが FBM（Fractal Brownian Motion）。この記事ではアルゴリズムの意味・式の構造・視覚的効果を直感で理解できるように解説します。
ARCHIVE_INDEX / PAGE_23
TOTAL_ITEMS: 700
![[Next.js #14] PMXモデルを“動的にキャラチェンジ”する：File→BlobURL→MMDLoader の完全実装](https://assets.lain-lab.com/images/uploads/nextjs-14-pmx-dynamic-loader.webp)
[Next.js #14] PMXモデルを“動的にキャラチェンジ”する：File→BlobURL→MMDLoader の完全実装
Next.js + React Three Fiber で PMX（MMDモデル）をブラウザから動的読み込みし、歩行アニメ・地形 Raycast・3D UI メニューと統合するキャラチェンジ機能の解説。BlobURL と MMDLoader の相性問題、File API、MMDAnimationHelper、再レンダー対策など、複数テクノロジーを横断した実践的なまとめ。
![[Human x AI] ChatGPT(5.2)との対話録 ～ アイデンティティの維持 ～](https://assets.lain-lab.com/images/uploads/ai-dialogue-2026-02-12.webp)
[Human x AI] ChatGPT(5.2)との対話録 ～ アイデンティティの維持 ～
[Human x AI] ChatGPT(5.2)との対話録 ～ アイデンティティの維持 ～
![[Next.js #13] OBJモデルを“粒子化”：PointCloud＋GLSL揺らぎでモデルを再構築](https://assets.lain-lab.com/images/uploads/nextjs-13-particle-obj.webp)
[Next.js #13] OBJモデルを“粒子化”：PointCloud＋GLSL揺らぎでモデルを再構築
OBJモデルを粒子に変換し、GLSLで揺らぎアニメーションを付けて再構築する手法を Next.js 内で実装。PointCloud・ShaderMaterial・uniform 制御・インスペクタUI（lil-gui）など、WebGL表現の中核をまとめた記事。
![[Noise 入門 #04] Perlin Noise のアルゴリズムを図解で理解する](https://assets.lain-lab.com/images/uploads/noise-intro-04-perlin-noise-algorithm.webp)
[Noise 入門 #04] Perlin Noise のアルゴリズムを図解で理解する
Noise 入門シリーズ第4回。Perlin Noise の内部アルゴリズムを、数学ではなく“図解”で直感的に理解できるよう整理。グリッド、勾配ベクトル、内積計算、fade 補間の手順を踏まえ、次回の FBM 実装に繋がる知識をまとめます。
![[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整](https://assets.lain-lab.com/images/uploads/nextjs-12-r3f-leva-inspector.webp)
[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整
Next.js + React-Three-Fiber で構築した“世界”にインスペクタ機能を追加し、雲のスピード・色、ライト強度、地形スケール、水の揺らぎといったパラメータをリアルタイムに変更できるようにする。Leva の useControls、ShaderMaterial への uniforms 接続、UIが表示されない時の原因など実装上の罠も丁寧に解説。
![[Next.js #11] FBM地形を削って“動く湖”を作る：反射・雲ドーム・水シェーダーの完全統合](https://assets.lain-lab.com/images/uploads/nextjs-11-r3f-fbm-lake-terrain-water-shader.webp)
[Next.js #11] FBM地形を削って“動く湖”を作る：反射・雲ドーム・水シェーダーの完全統合
FBMノイズ地形の生成、円形のくぼみで作る湖、GLSLによる水面シェーダー（FBM波・深度色・縁フェード）、雲ドーム、Reflectorによる鏡面反射、プレイヤー移動まで統合し、Next.js × React-Three-Fiber で“世界づくり”を1つの記事にまとめた実装解説。
![[Noise 入門 #03] ノイズを設計する5つのパラメータ（Frequency / Amplitude / Octave / Lacunarity / Gain）](https://assets.lain-lab.com/images/uploads/noise-intro-03-noise-parameters.webp)
[Noise 入門 #03] ノイズを設計する5つのパラメータ（Frequency / Amplitude / Octave / Lacunarity / Gain）
ノイズの形と性質を完全に決める5つのパラメータ（frequency, amplitude, octave, lacunarity, gain）を詳細に解説。ノイズアート・地形生成・雲・炎・Fog・Shader 実装など、全ての procedural 表現の基礎となる概念を体系化する。Three.js や GLSL 実装へ進む前の決定版ガイド。
![[Noise 入門 #02] ノイズを作る数学の基礎 — グリッド・勾配・補間を理解する](https://assets.lain-lab.com/images/uploads/noise-intro-02-math-basics.webp)
[Noise 入門 #02] ノイズを作る数学の基礎 — グリッド・勾配・補間を理解する
ノイズを実装するうえで必須となる数学の基礎を解説する入門記事。Value Noise と Perlin Noise の違い、グリッド構造、勾配ベクトル、内積、補間関数、frequency・amplitude といった概念を、Three.js・Shader 実装につながる形で分かりやすく整理する。
![[Next.js #10] R3F × GLSL で “動く雲の SkyDome” を作る：FBM ノイズで空を生成](https://assets.lain-lab.com/images/uploads/nextjs-10-r3f-glsl-cloud-sky-fbm.webp)
[Next.js #10] R3F × GLSL で “動く雲の SkyDome” を作る：FBM ノイズで空を生成
Perlin / FBM ノイズで地形を作った前回に続き、R3F と GLSL を用いて雲が流れる SkyDome を構築します。FBM ノイズ、smoothstep、BackSide 描画を活用し、ゲーム空間の空を自作ノイズで描画する手法を詳しく解説します。
![[Next.js #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従](/images/uploads/nextjs-09-noise-terrain-raycast-player-follow.webp)
[Next.js #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従
Next.js(App Router) + R3F 環境で、Perlin/FBM（フラクタルノイズ）を使った地形生成と、Raycaster による地面追従プレイヤー制御を実装する。PlaneGeometry の頂点変形・computeVertexNormals・vertexColors、KeyboardControls による移動、atan2 での回転補間、Raycast の hit 判定と LERP による安定化まで、ゲームエンジン的処理を Web 上で再現する。
![[Noise 入門 #01] ノイズとは何か？— 滑らかな乱数の正体を理解する](https://assets.lain-lab.com/images/uploads/noise-intro-01-what-is-noise.webp)
[Noise 入門 #01] ノイズとは何か？— 滑らかな乱数の正体を理解する
JavaScript・Three.js・Shader へ進む前に、まず『ノイズとは何か？』を徹底的に理解する入門回。自然の“ゆらぎ”を作る数式としてのノイズの本質、ランダムとの違い、周波数や振幅などの最低限の概念を整理する。