webgl

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

// Check WebGL support and capabilities
function getWebGLContext(canvas: HTMLCanvasElement): WebGL2RenderingContext | null {
  const gl = canvas.getContext('webgl2', {
    alpha: true,
    antialias: true,
    powerPreference: 'high-performance',
    failIfMajorPerformanceCaveat: true  // Fail if software rendering
  })

  if (!gl) {
    console.warn('WebGL 2.0 not supported')
    return null
  }

  return gl
}

4. Implementation Patterns