![[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る](https://assets.lain-lab.com/images/uploads/nextjs-31-touching-noise-field-threejs-glsl.webp)
[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る
Noise 入門の流れを踏まえ、Three.js × GLSL × Raycasterで“Touching Noise Field”を実装。マウスホバー位置を3D空間上に取得し、その周辺だけノイズの歪みと色変化を強めることで、インタラクティブなノイズ表現を作る。
ARCHIVE_INDEX / PAGE_10
TOTAL_ITEMS: 606
![[Noise 入門 #31] 第4集開幕 — Three.js × GLSLで「触れるノイズ」を実装する](https://assets.lain-lab.com/images/uploads/noise-intro-31-interactive-noise-threejs.webp)
[Noise 入門 #31] 第4集開幕 — Three.js × GLSLで「触れるノイズ」を実装する
Noise 入門シリーズ第31回。これまでの「鑑賞するノイズ」から「体験するノイズ」へ。Three.jsのRaycasterとShaderを連携させ、マウスホバーによる局所的なDomain Warping（空間のねじれ）を実装するインタラクションの基礎を深掘りします。
アプリを作るとは何か？ — バンド演奏に学ぶ、UIと責務の哲学
アプリを作るとは何か？ それは単に画面や機能を増やすことではない。良いバンド演奏のように、各要素が出るべき時に出て、引くべき時に引き、次へ自然に受け渡されることで、初めて体験として完成する。T-SQUARE の演奏美学を手がかりに、UI、責務設計、全体最適について哲学的かつ実践的に掘り下げる。
![[Next.js #30] Triplex + React Three Fiber + WebXR — GUI編集からQuest2実行まで](https://assets.lain-lab.com/images/uploads/nextjs-30-triplex-r3f-webxr-quest2.webp)
[Next.js #30] Triplex + React Three Fiber + WebXR — GUI編集からQuest2実行まで
Triplexを使ってReact Three Fiberの3DシーンをGUIで編集し、そのままWebXRでMeta Quest2に送って体験するまでの流れを解説。R3FのXRプロトタイピングを高速化する開発フローを紹介。
![[Noise 入門 #30] 第3集完結 — 全てを束ねる「Procedural Universe」（プロシージャルな宇宙の錬成）](https://assets.lain-lab.com/images/uploads/noise-intro-30-procedural-universe.webp)
[Noise 入門 #30] 第3集完結 — 全てを束ねる「Procedural Universe」（プロシージャルな宇宙の錬成）
Noise 入門シリーズ第30回。静かな漆黒の空間に100万の星々が渦巻き、色彩豊かな星雲がうねる。FBM、Domain Warping、極座標、そしてGPGPUの全技術を掛け合わせ、圧倒的なスケールの「プロシージャルな宇宙」を錬成する設計図を解き明かします。
![[Three.js #29] Three.js + MMD を VR対応する — WebXRで躓いた点まとめ](https://assets.lain-lab.com/images/uploads/nextjs-29-threejs-webxr-quest2-https-xr-camera.webp)
[Three.js #29] Three.js + MMD を VR対応する — WebXRで躓いた点まとめ
Next.js + Three.js + MMD の時計アプリを Quest 2 単体ブラウザ対応。HTTPS 起動、WebXR 実装、crypto.randomUUID 問題の回避、画面内ログ、frame.getViewerPose() を使った XR カメラ追従修正、Quest Browser 向け Tint Color UI 改修までをまとめます。
![[Noise 入門 #29] GPGPU × Noise — 100万の粒子が描く流体シミュレーション](https://assets.lain-lab.com/images/uploads/noise-intro-29-gpgpu-particles.webp)
[Noise 入門 #29] GPGPU × Noise — 100万の粒子が描く流体シミュレーション
CPUの限界を超え、GPUの真の力を解放するGPGPUの基礎。見えないテクスチャをデータ配列として扱い、Ping-Pongバッファを用いて100万の粒子の状態を毎フレーム更新する「流体シミュレーション」のGLSL×Three.js実装を直感的に解説します。
![[Next.js #28] MMD時計アプリに Wallpaper カスタマイズ機能を追加 — 背景画像・Tint・UI切替](https://assets.lain-lab.com/images/uploads/nextjs-28-threejs-wallpaper-ui-backwall.webp)
[Next.js #28] MMD時計アプリに Wallpaper カスタマイズ機能を追加 — 背景画像・Tint・UI切替
Three.js製MMD時計アプリにWallpaperカスタマイズ機能を実装。背景壁を画像対応し、Tint Color、Texture ON/OFF、壁紙プリセット切替をUIから操作できるようにした。MeshStandardMaterial + map、onBeforeCompile、texture cache、状態管理、画面追従リサイズまで含めて整理。
![[Three.js #27] MMDのMorph検証UIを実装 — Rigパネルで表情を直接確認](https://assets.lain-lab.com/images/uploads/nextjs-27-mmd-rig-panel-morph-ui-threejs.webp)
[Three.js #27] MMDのMorph検証UIを実装 — Rigパネルで表情を直接確認
Three.js + MMD 構成のアプリに Rig パネルを実装し、Bone / Morph 一覧表示、検索、Morph Apply / Reset を追加した開発記録。Morph が効かないように見える原因を調査し、actor.root ではなく actor.mesh への適用で「ウィンク2右」などの表情変化を確認できた過程をまとめる。
![[Noise 入門 #28] Particle System × Curl Noise — 10万の粒子をノイズの“うねり”に乗せる](https://assets.lain-lab.com/images/uploads/noise-intro-28-particle-system-curl-noise.webp)
[Noise 入門 #28] Particle System × Curl Noise — 10万の粒子をノイズの“うねり”に乗せる
3D空間に放たれた10万個のパーティクルを、Curl Noise（回転ノイズ）を用いたベクトル場で制御し、流体シミュレーションなしで美しいうねりや光の軌跡をGLSLとThree.jsで実装する手法を直感的に解説します。
![[Next.js #26] Three.js×MMD：複数モデル表示とactor管理、順番トーク制御を実装](https://assets.lain-lab.com/images/uploads/nextjs-26-multiple-mmd-actors-sequential-talk-threejs.webp)
[Next.js #26] Three.js×MMD：複数モデル表示とactor管理、順番トーク制御を実装
Three.js×MMD時計アプリに複数モデル表示を実装。actor配列による管理、モデル追加・削除UI、talk ON/OFF、lastTalkActorId と pickNextTalkActor を使った順番トーク制御の設計と実装をまとめる。
![[Noise 入門 #27] Normal Recomputation — 歪んだ世界に正しい光と影を取り戻す](https://assets.lain-lab.com/images/uploads/noise-intro-27-normal-recomputation.webp)
[Noise 入門 #27] Normal Recomputation — 歪んだ世界に正しい光と影を取り戻す
Noise 入門シリーズ第27回。頂点をノイズで動かしただけでは、元のツルツルの法線が維持されてしまい光と影が破綻します。近隣頂点のサンプリングと偏微分・外積を用いた「法線再計算（Normal Recomputation）」の数学的アプローチとGLSL実装を深掘りします。