webgl_skill

Overview

This skill delivers WebGL shader and effect development guidance for the JARVIS 3D HUD, focused on secure, high-performance GPU rendering. It covers shader compilation, context management, resource limits, and practical patterns for holographic and post-processing effects. Use it to build GPU-accelerated visuals while minimizing security and stability risks.

How this skill works

The skill inspects and prescribes safe WebGL practices: detecting WebGL2 support, validating shader sources, compiling and linking programs with error handling, and tracking GPU resources. It provides patterns for context loss handling, memory budgeting, draw-call batching, and type-safe uniform setting. It also supplies testing and CI recommendations to ensure shaders and resource managers behave correctly.

When to use it

• Building holographic or HUD shaders for JARVIS or similar overlays
• Implementing particle systems, compute-like effects, or post-processing (bloom, glitch)
• Adding runtime safety: context loss recovery and resource limits
• Optimizing runtime performance: batching, instancing, VAOs
• Designing fallbacks when WebGL2 is unavailable

Best practices

• Write tests first for shader compilation, context events, and resource limits
• Enforce strict resource budgets (texture memory, max draw calls, triangle counts)
• Validate all shader inputs and guard compilation/linking with detailed logs
• Handle webglcontextlost and webglcontextrestored to reinitialize safely
• Reuse buffers, use VAOs and instanced draws to minimize state changes

Example use cases

• Holographic fragment shader with scanline and edge-glow effects for HUD elements
• Real-time data visualization using instanced rendering for thousands of points
• Particle systems using batched draws and texture atlases to reduce draw calls
• Post-process pipeline (bloom, color grading, glitch) with fallback to CSS/canvas
• Resource manager that enforces a 256MB texture limit and disposes on shutdown