# Webgl React Integration

> Manage WebGL contexts and 3D scenes declaratively using React reconciliation.

- Skill: `majiayu000/webgl-react-integration` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/webgl-react-integration`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/webgl-react-integration/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/webgl-react-integration

---


# WebGL and React Integration

## Summary
Manage WebGL contexts and 3D scenes declaratively using React reconciliation.

## Key Capabilities
- Map React props to WebGL uniform updates.
- Manage canvas resize and context loss events.
- Integrate DOM overlays with 3D scene coordinates.

## PhD-Level Challenges
- Bridge the imperative render loop with React's scheduler.
- Optimize object creation/destruction for garbage collection.
- Implement raycasting for interaction events.

## Acceptance Criteria
- Render a 3D scene driven by React state.
- Demonstrate performant frame updates (60fps).
- Implement mouse interaction with 3D objects.