![[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)との対話録 ～ アイデンティティの維持 ～
ARCHIVE_INDEX / PAGE_13
TOTAL_ITEMS: 582
![[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 へ進む前に、まず『ノイズとは何か？』を徹底的に理解する入門回。自然の“ゆらぎ”を作る数式としてのノイズの本質、ランダムとの違い、周波数や振幅などの最低限の概念を整理する。
![[Next.js #08]VRM / BVH / PMX を Next.js（R3F）で扱うための互換性と実装整理](https://assets.lain-lab.com/images/uploads/nextjs-08-r3f-vrm-bvh-pmx.webp)
[Next.js #08]VRM / BVH / PMX を Next.js（R3F）で扱うための互換性と実装整理
three-vrm の 0.x/1.x/2.x の違い、BVHLoader の利用条件、PMX(MMD)モデルが glTF/VRM と統合できない理由など、1日で遭遇した互換問題をすべて整理し、Next.js + R3F でキャラクターモデルを扱う際の正しい実装ルートを提示する。
![[Next.js #07] R3FでglTF/VRMを扱うための“橋渡し”基礎まとめ](https://assets.lain-lab.com/images/uploads/nextjs-07-r3f-gltf-vrm-bridge.webp)
[Next.js #07] R3FでglTF/VRMを扱うための“橋渡し”基礎まとめ
バニラThree.jsではglTFもVRMも実装済みの開発者向けに、React Three Fiberで同じ資産を扱うための“橋渡し部分”だけをまとめる。useGLTF・Suspense・再レンダー・VRMの内部構造がReactと衝突する問題点など、R3F特有の地雷と設計思想を端的に解説する。