# Webgl Debug

> WebGL デバッグと GPU トレース取得。テクスチャ問題、描画異常、シェーダーバグの調査時に使用 Use when this capability is needed.

- Skill: `tomevault-io/webgl-debug` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/webgl-debug`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/webgl-debug/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/webgl-debug

---


# WebGL Debug Skill

Playwright MCP と Spector.js を使った WebGL デバッグワークフロー。
debug-viewer で VRM の描画問題を調査する際に自動的に使用される。

## 起動条件

以下のような問題が報告されたときに使用:
- テクスチャが正しく表示されない
- 描画が黒い/白い/おかしい
- シェーダーエラー
- GPU パフォーマンス問題

## クイックスタート

```bash
# 1. debug-viewer が起動しているか確認
curl -s -o /dev/null -w "%{http_code}" http://localhost:5173/ 2>/dev/null || echo "not running"
# → 200 なら起動済み、それ以外なら以下で起動

# 2. debug-viewer 起動（未起動の場合、別ターミナルで）
pnpm -F debug-viewer run dev
```

```javascript
// 2. Playwright MCP でブラウザ操作
browser_navigate({ url: "http://localhost:5173/" })
browser_wait_for({ text: "VRM loaded" })

// 3. フレームキャプチャ
browser_evaluate({
  function: "() => { window.__spector.captureNextFrame(document.querySelector('canvas')); return 'started'; }"
})
browser_wait_for({ time: 2 })

// 4. 結果取得
browser_console_messages({ level: "debug" })
```

## 詳細は REFERENCE.md を参照

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/webxr-jp) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->