![[Babylon.js #02] 自作MMDモデルをWebGPUでアニメーション (pmx / vmd converter)](https://assets.lain-lab.com/images/uploads/babylonjs-02-mmd-webgpu-bpmx.webp)
[Babylon.js #02] 自作MMDモデルをWebGPUでアニメーション (pmx / vmd converter)
Babylon.jsとWebGPUでMMDモデルを表示する際に直面するシェーダーエラー、Tポーズで固まる問題、そしてアニメーションが途中で止まる「15秒の壁」。これらをbpmxLoaderとフレーム数スキャンロジックで解決し、影とBloomで仕上げるまでの全記録。
ARCHIVE_INDEX / PAGE_12
TOTAL_ITEMS: 582
![[Babylon.js #01] 環境構築とWebGPUの夜明け（Hello World）](https://assets.lain-lab.com/images/uploads/babylonjs-01-setup-helloworld.webp)
[Babylon.js #01] 環境構築とWebGPUの夜明け（Hello World）
2026年版Babylon.js入門。Viteを使用した高速な開発環境の構築から、必要なパッケージのインストール、そしてWebGPUEngineを使用した「Hello World」までの手順をステップバイステップで解説します。
![[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds](https://assets.lain-lab.com/images/uploads/nextjs-18-r3f-ocean-volumetric-clouds.webp)
[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds
React Three Fiber で自然環境を構築する実装解説。three/addons/objects/Water.js を extend して使用する方法、およびカスタムシェーダーで 3D FBM とレイマーチングを実装し、厚みのある雲を描画する手法を詳細に解説します。
![[Noise 入門 #09] Volumetric Clouds — ノイズで空に雲を浮かべる（レイマーチング基礎）](https://assets.lain-lab.com/images/uploads/noise-intro-09-volumetric-clouds.webp)
[Noise 入門 #09] Volumetric Clouds — ノイズで空に雲を浮かべる（レイマーチング基礎）
Noise 入門シリーズ第9回。ボリューメトリック・レンダリングの基礎となるレイマーチングの手法を学びます。3D FBM による密度生成、Beer's Law を用いた光の減衰計算など、ノイズを『空間の密度』として扱う技術を体系的に整理します。
![[Noise 入門 #08] Curl Noise — ノイズは“流れ”になる。流体シミュレーションを使わずに流体を作る](https://assets.lain-lab.com/images/uploads/noise-intro-08-curl-noise.webp)
[Noise 入門 #08] Curl Noise — ノイズは“流れ”になる。流体シミュレーションを使わずに流体を作る
Noise 入門シリーズ第8回。静止したノイズを「動き（ベクトル場）」に変換する Curl Noise (回転ノイズ) を解説。スカラー場、勾配、Curl演算子を用いて、発散ゼロ（Divergence Free）の流体挙動をGLSLで実装する方法をまとめます。
![[Next.js #17] R3Fでドラッグ操作可能なルービックキューブを実装する](https://assets.lain-lab.com/images/uploads/nextjs-17-r3f-rubiks-cube-drag-physics.webp)
[Next.js #17] R3Fでドラッグ操作可能なルービックキューブを実装する
54要素の配列管理に挫折した状態から、物理空間での制御へとパラダイムシフト。R3Fの `attach` を用いた動的グループ化や、法線ベクトルと外積による直感的なドラッグ判定ロジックを詳解します。
![[Next.js #16] R3FでGLTFモデルを横スライド切替する3Dビューアを実装する](https://assets.lain-lab.com/images/uploads/nextjs16-r3f-gltf-viewer.webp)
[Next.js #16] R3FでGLTFモデルを横スライド切替する3Dビューアを実装する
Next.js + React Three Fiberで、GLTFモデルを横にスライド切替できる3Dギャラリービューアを構築する。モデルごとのスケール差を吸収する正規化処理、Box3による接地、lerpによる滑らかな遷移、UIレイヤー分離設計を解説。
![[Noise 入門 #07] Three.js + GLSLでDomain Warpingを実装する — 数式を世界に変換する](https://assets.lain-lab.com/images/uploads/noise-intro-07-domain-warping-shader.webp)
[Noise 入門 #07] Three.js + GLSLでDomain Warpingを実装する — 数式を世界に変換する
Noise 入門シリーズ第7回。Domain Warping を Shader で実装し、Three.js 上で動かします。理論からGPUコードへの変換、FBMとの融合、strengthパラメータの効果、時間拡張（4D化）までを整理し、ノイズを“世界生成アルゴリズム”として扱います。
![[Next.js #15] Next.js + R3F で 5万本の草原を生成する – InstancedMesh + GPUシェーダー](https://assets.lain-lab.com/images/uploads/nextjs-15-r3f-gpu-grass-system.webp)
[Next.js #15] Next.js + R3F で 5万本の草原を生成する – InstancedMesh + GPUシェーダー
Next.js + React Three Fiber を使い、InstancedMesh とカスタムシェーダーで 5万本の草を描画。GPUでの風アニメーション、FBMによる地形生成、疑似法線ライティングまで解説。
![[Noise 入門 #06] Domain Warping — 座標をねじると世界が壊れる](https://assets.lain-lab.com/images/uploads/noise-intro-06-domain-warping.webp)
[Noise 入門 #06] Domain Warping — 座標をねじると世界が壊れる
Noise 入門シリーズ第6回。Domain Warping（ドメインワーピング）の仕組みを、座標変形という視点から図解で解説。通常ノイズとの違い、FBMとの組み合わせ、strengthパラメータの効果、3D/時間拡張まで体系的に整理します。
![[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる](/images/uploads/noise-intro-05-fbm.webp)
[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる
Perlin Noise の出力をそのまま使うと“のっぺり”する。その問題を解決し、自然界の複雑さに近づけるのが FBM（Fractal Brownian Motion）。この記事ではアルゴリズムの意味・式の構造・視覚的効果を直感で理解できるように解説します。
![[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、再レンダー対策など、複数テクノロジーを横断した実践的なまとめ。