GLSL Shader Programming Skill File Organization : This skill uses split structure. See references/ for advanced shader patterns. 1. Overview This skill provides GLSL shader expertise for creating holographic visual effects in the JARVIS AI Assistant HUD. It focuses on efficient GPU programming for real time rendering. Risk Level : LOW GPU side code with limited attack surface, but can cause performance issues Primary Use Cases : Holographic panel effects with scanlines Animated energy fields and particle systems Data visualization with custom rendering Post processing effects (bloom, glitch, chromatic aberration) 2. Core Responsibilities 2.1 Fundamental Principles 1. TDD First : Write visual regression tests and shader unit tests before implementation 2. Performance Aware : Profile GPU performance, optimize for 60 FPS target 3. Precision Matters : Use appropriate precision qualifiers for performance 4. Avoid Branching : Minimize conditionals in shaders for GPU efficiency 5. Optimize Math : Use built in functions, avoid expensive operations 6. Uniform Safety : Validate uniform inputs before sending to GPU 7. Loop Bounds : Always use constant loop bounds to prevent GPU hangs 8. Memory Access : Optimize texture lookups and varying interpolation 3. Implementation Workflow (TDD) 3.1 Step 1: Write Failing Test First 3.2 Step 2: Implement Minimum to Pass 3.3 Step 3: Refactor with Full Implementation 3.4 Step 4: Run Full Verification 4. Technology Stack & Versions 4.1 GLSL Versions Version Context Features GLSL ES 3.00 WebGL 2.0 Modern features, better precision GLSL ES 1.00 WebGL 1.0 Legacy support 4.2 Shader Setup 5. Performance Patterns 5.1 Avoid Branching Use Mix/Step 5.2 Texture Atlases Reduce Draw Calls 5.3 Level of Detail (LOD) Distance Based Quality 5.4 Uniform Batching Minimize CPU GPU Transfers 5.5 Precision Optimization Use Appropriate Precision 5.6 Cache Texture Lookups 6. Implementation Patterns 6.1 Holographic Panel Shader 6.2 Energy Field Shader 6.3 Data Visualization Shader 7. Security & Performance Standards 7.1 GPU Safety Risk Mitigation Infinite loops Always use constant loop bounds GPU hangs Test shaders with small datasets first Memory exhaustion Limit texture sizes 7.2 Loop Safety Pattern 8. Common Mistakes & Anti Patterns 8.1 Never: Use Dynamic Loop Bounds 8.2 Never: Divide Without Checking Zero 9. Pre Implementation Checklist Phase 1: Before Writing Code [ ] Write shader compilation test [ ] Write uniform accessibility test [ ] Create baseline images for visual regression tests [ ] Define performance targets (FPS, draw calls) [ ] Review existing shaders for reusable patterns Phase 2: During Implementation [ ] All loops have constant bounds [ ] No division by zero possible [ ] Using branchless patterns (mix/step) [ ] Appropriate precision qualifiers [ ] Texture lookups cached [ ] Uniforms batched into vectors/matrices Phase 3: Before Committing [ ] All shader tests pass: npm run test:shaders [ ] Visual regression tests pass: npm run test:visual [ ] Performance benchmark meets targets: npm run bench:shaders [ ] Cross browser compatibility verified [ ] No artifacts at edge cases (UV 0,0 and 1,1) [ ] Smooth animation timing verified 10. Summary GLSL shaders power the visual effects in JARVIS HUD: 1. TDD First : Write tests before shaders compilation, uniforms, visual regression 2. Performance : Use branchless patterns, texture atlases, LOD, precision optimization 3. Safety : Constant loop bounds, guard divisions 4. Testing : Verify across target browsers, benchmark GPU performance Remember : Shaders run on GPU a single bad shader can freeze the entire system. References : references/advanced patterns.md Complex shader techniques

glsl