![[Babylon.js #13] メビウス帯の継ぎ目バグ修正（上下反転）＋WebXRローラーコースター化](https://humanxai.info/images/uploads/babylonjs-13-mmd-mobius-fix-seam-flip-webxr-coaster.webp)
[Babylon.js #13] メビウス帯の継ぎ目バグ修正（上下反転）＋WebXRローラーコースター化
2026-02-28 | lain
Babylon.js + babylon-mmd で作ったメビウス帯ウォーカーの継ぎ目バグ（上下反転/ロールフリップ）を、前フレームに近い姿勢を選ぶクォータニオン設計で修正。さらに WebXR で位置追従カメラを実装し、VRで“乗れる”チェイス視点に対応します。
カテゴリ：WebXR
![[Babylon.js #04] HTTPS設定からQuest2でのWebXR没入体験まで](https://humanxai.info/images/uploads/babylonjs-04-https-to-webxr-quest2-immersive.webp)
[Babylon.js #04] HTTPS設定からQuest2でのWebXR没入体験まで
2026-02-19 | lain
Vite + mkcertによるHTTPS構築から、Babylon.jsのWebXR初期化、Quest2ブラウザでのVR動作確認までを解説。Secure Contextの理解と実践的な構築手順をまとめる。
![[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する](https://humanxai.info/images/uploads/nextjs-04-r3f-webxr-renderloop.webp)
[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する
2026-02-04 | lain
Next.js(App Router) + R3F + WebXR 環境で必ず発生する“レンダリングループの衝突”を、内部構造から解説する回。R3F の frameloop・advance・state.clock が XR の animationLoop と同期しない理由、useFrame の遅延、XRControllerModelFactory の不整合、Suspense が XR 中で危険な構造、そして正しい setAnimationLoop 併用方法まで網羅する。
![[Shader 入門 #06] VR / WebXR / Unity XR のシェーダー注意点（実戦編）](https://humanxai.info/images/uploads/shader-intro-06-xr-shader-tips.webp)
[Shader 入門 #06] VR / WebXR / Unity XR のシェーダー注意点（実戦編）
2026-01-27 | lain
VR・WebXR・Unity XR で必ず直面するシェーダーの落とし穴を30分で理解する最終回。ステレオレンダリング、透明の破綻、multipass、反射の罠、VR向け軽量化の原則を、Three.js と Unity 両対応で実戦的にまとめた。
![[JavaScript] Quaternion 入門 #06 : WebXR / ゲームで使う実践パターン](https://humanxai.info/images/uploads/javascript-quaternion-06-practical-patterns.webp)
[JavaScript] Quaternion 入門 #06 : WebXR / ゲームで使う実践パターン
2026-01-22 | lain
WebXR やゲーム開発で頻出する Quaternion の実践パターンを整理。視線追従、カメラ操作、キャラクターの向き制御、入力値との付き合い方まで、現場でバグになりやすい要点をまとめる。
![[JavaScript] Three.js / WebXRで一生使い回せるMessageBoxを実装](https://humanxai.info/images/uploads/javascript-threejs-webxr-reusable-messagebox.webp)
[JavaScript] Three.js / WebXRで一生使い回せるMessageBoxを実装
2026-01-11 | lain
Three.jsとWebXR環境で、戦闘・イベント・通知に使い回せるMessageBoxを実装した記録。設計判断と妥協点も含めてまとめた。
![[JavaScript]スマホでサブ的にコーディングする現実解 ─ 開発者向け実践ガイド](https://humanxai.info/images/uploads/javascript-mobile-sub-coding-threejs-webxr.webp)
[JavaScript]スマホでサブ的にコーディングする現実解 ─ 開発者向け実践ガイド
2026-01-11 | lain
PCを主戦場にしつつ、外出先でアイデアを逃さないためのスマホ向けコーディング環境を整理。vscode.dev、PlayCode、Code Serverの現実的な使い分けを解説する。
![[JavaScript] Zone切り替えBGMを自然につなぐサウンド設計（フェード対応）](https://humanxai.info/images/uploads/javascript-zone-bgm-sound-design-fade.webp)
[JavaScript] Zone切り替えBGMを自然につなぐサウンド設計（フェード対応）
2026-01-10 | lain
Zoneやバトル遷移でBGMが不自然に切り替わる問題を、設計の見直しとフェード処理で解消する実装メモ。
![[JavaScript] PlaneGeometryで地形を生成し、登れる世界を作る（山・クレーター・JSONマップ設計）](https://humanxai.info/images/uploads/javascript-threejs-planegeometry-terrain-generation.webp)
[JavaScript] PlaneGeometryで地形を生成し、登れる世界を作る（山・クレーター・JSONマップ設計）
2026-01-05 | lain
Three.jsのPlaneGeometryを使い、平地・山・クレーターを関数で生成し、JSON＋グリッド設計でマップ化、VRで歩ける地形を構築した記録。