glsl

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

// tests/shaders/holographic-panel.test.ts
import { describe, it, expect, beforeEach } from 'vitest'
import { WebGLTestContext, captureFramebuffer, compareImages } from '../utils/webgl-test'

describe('HolographicPanelShader', () => {
  let ctx: WebGLTestContext

  beforeEach(() => {
    ctx = new WebGLTestContext(256, 256)
  })

  // Unit test: Shader compiles
  it('should compile without errors', () => {
    const shader = ctx.compileShader(holoFragSource, ctx.gl.FRAGMENT_SHADER)
    expect(shader).not.toBeNull()
    expect(ctx.getShaderErrors()).toEqual([])
  })

  // Unit test: Uniforms are accessible
  it('should have required uniforms', () => {
    const program = ctx.createProgram(vertSource, holoFragSource)
    expect(ctx.getUniformLocation(program, 'uTime')).not.toBeNull()
    expect(ctx.getUniformLocation(program, 'uColor')).not.toBeNull()
    expect(ctx.getUniformLocation(program, 'uOpacity')).not.toBeNull()
  })

  // Visual regression test
  it('should render scanlines correctly', async () => {
    ctx.renderShader(holoFragSource, { uTime: 0, uColor: [0, 0.5, 1], uOpacity: 1 })
    const result = captureFramebuffer(ctx)
    const baseline = await loadBaseline('holographic-scanlines.png')
    expect(compareImages(result, baseline, { threshold: 0.01 })).toBeLessThan(0.01)
  })

  // Edge case test
  it('should handle extreme UV values', () => {
    const testCases = [
      { uv: [0, 0], expected: 'no crash' },
      { uv: [1, 1], expected: 'no crash' },
      { uv: [0.5, 0.5], expected: 'no crash' }
    ]
    testCases.forEach(({ uv }) => {
      expect(() => ctx.renderAtUV(holoFragSource, uv)).not.toThrow()
    })
  })
})