![[Astro #80] Three.jsにおける3Dアセット最適化、地上敵AIの動的地形追従、およびWebXRのAボタン拡張](https://assets.lain-lab.com/images/uploads/astro-80-threejs-asset-optimization-dacker-terrain-following-and-webxr-gamepad.webp)
WebGLおよびWebXRシューティングゲームの描画負荷を削減するため、Blenderによる複数パーツの1オブジェクト結合（ドローコール削減）と10分の1デシメートを実施。さらに、画面両端のマスコットアバターのボーン演算を最初の1フレームで固定するフリーズハックを導入し、毎フレームのスキニング負荷を完全に排除しました。本記事では、ソリッドな地形ブロックをリアルタイムに走査して自動昇降する地上敵ダッカー型AIの実装、ゲーム全体の敵弾速を一元管理するグローバルパラメータの設計、およびWebXR Gamepad APIを使用したAボタンでのパワーアップ発動とチャタリング防衛Refの配線について解説します。
![[Astro #79] Three.jsで実装する軽量な地形這行ミサイル物理と多段階パワーアップインフラ](https://assets.lain-lab.com/images/uploads/astro-79-threejs-lightweight-terrain-following-missile-physics-and-multi-stage-power-up.webp)
WebGLシューティングゲームにおける、軽量な地形這行ミサイル（FALL/SLIDE/CLIMB）のステートマシン物理と、グラディウス準拠の2段階パワーアップ（同時連射・上限MAX時のUI非表示および自動スキップ機能）、地形の継ぎ目対策やチャタリングを防ぐ自爆処理の最適化手法をまとめました。
![[Astro #78] Three.jsで創る電脳魔女STG：動的クレジット案内板・プロシージャル床・星ハート爆散物理の実装](https://assets.lain-lab.com/images/uploads/astro-78-threejs-cyber-witch-stg-credit-board-procedural-floor-and-particle-burst.webp)
Three.jsとReact Three Fiberを用いたSTG開発において、データ駆動型の動的クレジット看板、プロシージャルな千鳥貼りフローリング床、自機と障害物の衝突クランプ物理、および星型・ハート型の高輝度爆散パーティクルシステムを実装したプロセスを技術的に詳述します。
![[Astro #77] Three.jsで創る電脳魔女STG：プロシージャル夜空背景のコンポーネント化とマスコットのライティング制御](https://assets.lain-lab.com/images/uploads/astro-77-threejs-cyber-witch-stg-procedural-backdrop-and-mascot-lighting.webp)
Three.js（React Three Fiber）を用いたSTG開発記第77弾。劇場の床の拡張から、SystemAssets.jsonによるライセンス管理インフラの構築、数式（サイン波・モジュロ）を用いた完全シームレスな夜空背景のプロシージャル生成と別ファイルへの外出しリファクタリングまでを徹底解説。
![[Astro #76] Three.jsで作るサイバー魔女STG：データ駆動型タイムラインと音響インフラの完全移行](https://assets.lain-lab.com/images/uploads/astro-76-threejs-cyber-witch-stg-data-driven-timeline-and-audio-infrastructure.webp)
React Three Fiber環境下でのSTGエンジン構築。リプルレーザーの描画最適化から始まり、Z字型クランク編隊の数学的実装、Stage1.jsonによるタイムライン制御、Rキーリセットにおける時間軸バグの克服、そしてWebAudioベースのAudioControllerによる遅延ゼロ連射SEの実装までをロジカルに解説します。
![[Astro #75] three-mesh-bvhでハイポリ地形のレイキャスト問題を根絶。テストコード混入バグとボスイベント欠落の修正](https://assets.lain-lab.com/images/uploads/astro-75-three-mesh-bvh-raycaster-fix-and-bug-fixes.webp)
Three.js / React Three Fiber環境におけるMeshBVH（境界ボリューム階層）の導入によるレイキャスト高速化、ENEMY_BUNYAテストコード混入によるエンディング誤起動バグ、BOSS_HACKLOAD接触イベント欠落、箒モードの移動速度逆転バグの修正内容を解説。
![[Astro #74] RPG完成。ラスボス暗黒魔法エフェクトとネオングローダメージポップアップの実装](https://assets.lain-lab.com/images/uploads/astro-74-final-boss-dark-magic-and-glow-damage-popup-implementation.webp)
Three.jsおよびReact Three Fiber環境下における、ラスボス戦の演出強化ハック。人魂の高速公転収束、AnimationMixerの単発再生制御、高解像度発光文字ビルボード、depthTest無効化による最前面描画、CameraHUDを用いた正面ロック防衛インフラの実装内容を解説。
![[Astro #73] ストーリー進行・ボス戦実装・ハイポリモデルのレイキャスター問題解決](https://assets.lain-lab.com/images/uploads/astro-73-story-boss-battle-and-raycaster-optimization.webp)
ストーリー進行システムとボス戦・NPCダイアログUIを実装。高ポリゴンモデルのレイキャスター最適化とバトルバグ修正。
![[Astro #72] 3D RPG開発：データ駆動型シナリオ・ワープインフラ構築と3D数学回転バグの完全打破](https://assets.lain-lab.com/images/uploads/astro-72-3d-rpg-data-driven-scenario-warp-infrastructure-and-3d-math-rotation-fix.webp)
Reactの宣言的UIとデータ駆動設計を融合させ、3D RPGのイベントインフラを構築。さらにR3F環境でのワールド回転軸のねじれバグをapplyAxisAngleでねじ伏せ、AudioControllerに完全マージした開発ドキュメント。
![[Astro #71] WebGL 3Dエフェクトの軌道修正、オーディオ同期、およびモバイル用バーチャルコントローラーの実装](https://assets.lain-lab.com/images/uploads/astro-71-webgl-3d-effect-orbital-correction-audio-sync-and-mobile-virtual-controller.webp)
Three.jsおよびReact Three Fiberを使用したWeb3Dゲーム開発において、グローバル座標系でのステージ回転角適用による魔法エフェクトの軌道修正、発射・着弾SEのフレーム単位の同期、CSSメディアクエリと仮想入力によるスマホ対応ゲームパッドの動的実装について技術的な詳細をまとめました。
![[Astro #70] WebGLデータ駆動型ADVにおけるストラテジーパターンの統合と床抜けバグの修正](https://assets.lain-lab.com/images/uploads/astro-70-webgl-data-driven-adv-strategy-pattern-and-collision-bug-fix.webp)
WebGL/Three.jsを用いたデータ駆動型ADV・バトルシステムにおいて、敵の特殊攻撃をストラテジーパターンレジストリへ移行しコンポーネントを疎結合化。また、ロードラグによる地形コライダーの判定漏れを防ぎ床抜けバグを修正する、Y軸着地マージン同期インフラの実装手法を解説します。
![[Astro #69] WebXRにおける全方位暗転制御と法線スロープフィルタによるホバリング物理の実装](https://assets.lain-lab.com/images/uploads/astro-69-webxr-sphere-fade-and-slope-filter-hover-physics.webp)
WebXR環境におけるNearプレーンカリングとリグ移動に伴う暗転漏れの不具合を内側描画の真球オブジェクトへの置換で解決。さらに移動速度向上に伴う地形起伏でのスタック問題をポリゴン法線を利用したスロープフィルタで解消し、バトルUIの動的拡張と敵の特殊攻撃パラメータの実装を行いました。