WebGL Development Skill File Organization : This skill uses split structure. See references/ for advanced patterns and security examples. 1. Overview This skill provides WebGL expertise for creating custom shaders and visual effects in the JARVIS AI Assistant HUD. It focuses on GPU accelerated rendering with security considerations. Risk Level : MEDIUM Direct GPU access, potential for resource exhaustion, driver vulnerabilities Primary Use Cases : Custom shaders for holographic effects Post processing effects (bloom, glitch) Particle systems with compute shaders Real time data visualization 2. Core Responsibilities 2.1 Fundamental Principles 1. TDD First : Write tests before implementation test shaders, contexts, and resources 2. Performance Aware : Optimize GPU usage batch draws, reuse buffers, compress textures 3. GPU Safety : Implement timeout mechanisms and resource limits 4. Shader Validation : Validate all shader inputs before compilation 5. Context Management : Handle context loss gracefully 6. Performance Budgets : Set strict limits on draw calls and triangles 7. Fallback Strategy : Provide non WebGL fallbacks 8. Memory Management : Track and limit texture/buffer usage 3. Technology Stack & Versions 3.1 Browser Support Browser WebGL 2.0 Notes Chrome 56+ Full support Firefox 51+ Full support Safari 15+ WebGL 2.0 support Edge 79+ Chromium based 3.2 Security Considerations 4. Implementation Patterns 4.1 Safe Shader Compilation 4.2 Context Loss Handling 4.3 Holographic Shader 4.4 Resource Management 4.5 Uniform Validation 5. Implementation Workflow (TDD) 5.1 Step by Step Process 1. Write failing test 2. Implement minimum 3. Refactor 4. Verify 5.2 Testing Context and Resources 6. Performance Patterns 6.1 Buffer Reuse 6.2 Draw Call Batching 6.3 Texture Compression 6.4 Instanced Rendering 6.5 VAO Usage 7. Security Standards 7.1 Known Vulnerabilities CVE Severity Description Mitigation CVE 2024 11691 HIGH Apple M series memory corruption Update browser, OS patches CVE 2023 1531 HIGH Chrome use after free Update Chrome 7.2 OWASP Top 10 Coverage OWASP Category Risk Mitigation A06 Vulnerable Components HIGH Keep browsers updated A10 SSRF LOW Context isolation by browser 7.3 GPU Resource Protection 8. Common Mistakes & Anti Patterns 8.1 Critical Security Anti Patterns Never: Skip Context Loss Handling Never: Unlimited Resource Allocation 8.2 Performance Anti Patterns Avoid: Excessive State Changes 9. Pre Implementation Checklist Phase 1: Before Writing Code [ ] Write failing tests for shaders, context, and resources [ ] Define performance budgets (draw calls <100, memory <256MB) [ ] Identify required WebGL extensions Phase 2: During Implementation [ ] Context loss handling with recovery [ ] Resource limits and memory tracking [ ] Shader validation before compilation [ ] Use VAOs, batch draws, reuse buffers [ ] Instanced rendering for particles Phase 3: Before Committing [ ] Tests pass: npm test run tests/webgl/ [ ] Type check: npm run typecheck [ ] Build: npm run build [ ] Performance verified (draws, memory) [ ] Fallback for no WebGL tested 10. Summary WebGL provides GPU accelerated graphics for JARVIS HUD. Key principles: handle context loss, enforce resource limits, validate shaders, track memory, batch draw calls, minimize state changes. Remember : WebGL bypasses browser sandboxing always protect against resource exhaustion. References : references/advanced patterns.md , references/security examples.md