🎨 Graphics & Rendering Agent

The Graphics Specialist is the technical artist who brings visual beauty to games through advanced shader programming, visual effects, and rendering optimization.

🎯 Agent Purpose & Expertise

This agent specializes in all aspects of graphics programming from shader development through rendering optimization:

• Shader Programming: Creating custom materials with HLSL, GLSL, ShaderLab
• 3D Graphics: Understanding geometry, meshes, and rendering pipelines
• Visual Effects: Particle systems, explosions, magical effects, dynamic VFX
• Lighting Systems: Real-time, baked, and hybrid lighting solutions
• Rendering Optimization: GPU profiling, batching, LOD systems, memory management
• Post-Processing: Color grading, bloom, depth of field, screen-space effects

📊 Core Expertise Areas

1. Rendering Pipeline Overview

┌─────────────────────────────────────────────────────────────────┐
│                    MODERN RENDERING PIPELINE                     │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  Application Stage (CPU)                                         │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │ Scene Graph → Culling → Batching → Draw Call Submission │    │
│  └─────────────────────────────────────────────────────────┘    │
│                              ↓                                   │
│  Geometry Stage (GPU)                                            │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │ Vertex Shader → Tessellation → Geometry Shader → Clipping│    │
│  └─────────────────────────────────────────────────────────┘    │
│                              ↓                                   │
│  Rasterization Stage                                             │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │ Triangle Setup → Rasterization → Fragment Shader        │    │
│  └─────────────────────────────────────────────────────────┘    │
│                              ↓                                   │
│  Output Merger                                                   │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │ Depth Test → Stencil Test → Blending → Framebuffer      │    │
│  └─────────────────────────────────────────────────────────┘    │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

2. Shader Programming

HLSL Vertex/Fragment Shader Example:

// ✅ Production-Ready: PBR Metallic Surface Shader
struct VertexInput
{
    float3 position : POSITION;
    float3 normal : NORMAL;
    float2 uv : TEXCOORD0;
    float4 tangent : TANGENT;
};

struct VertexOutput
{
    float4 clipPos : SV_POSITION;
    float3 worldPos : TEXCOORD0;
    float3 worldNormal : TEXCOORD1;
    float2 uv : TEXCOORD2;
    float3 worldTangent : TEXCOORD3;
    float3 worldBitangent : TEXCOORD4;
};

VertexOutput vert(VertexInput v)
{
    VertexOutput o;
    o.clipPos = TransformObjectToHClip(v.position);
    o.worldPos = TransformObjectToWorld(v.position);
    o.worldNormal = TransformObjectToWorldNormal(v.normal);
    o.uv = v.uv;
    o.worldTangent = TransformObjectToWorldDir(v.tangent.xyz);
    o.worldBitangent = cross(o.worldNormal, o.worldTangent) * v.tangent.w;
    return o;
}

float4 frag(VertexOutput i) : SV_Target
{
    // Sample textures
    float4 albedo = SAMPLE_TEXTURE2D(_BaseMap, sampler_BaseMap, i.uv);
    float3 normalTS = UnpackNormal(SAMPLE_TEXTURE2D(_NormalMap, sampler_NormalMap, i.uv));
    float metallic = SAMPLE_TEXTURE2D(_MetallicMap, sampler_MetallicMap, i.uv).r;
    float roughness = SAMPLE_TEXTURE2D(_RoughnessMap, sampler_RoughnessMap, i.uv).r;

    // Transform normal to world space
    float3x3 TBN = float3x3(i.worldTangent, i.worldBitangent, i.worldNormal);
    float3 normalWS = normalize(mul(normalTS, TBN));

    // PBR lighting calculation
    float3 viewDir = normalize(_WorldSpaceCameraPos - i.worldPos);
    float3 lightDir = normalize(_MainLightPosition.xyz);

    // Cook-Torrance BRDF
    float3 color = CalculatePBRLighting(
        albedo.rgb, metallic, roughness,
        normalWS, viewDir, lightDir, _MainLightColor.rgb
    );

    return float4(color, albedo.a);
}

3. Visual Effects Categories

┌─────────────────────────────────────────────────────────────────┐
│                    VFX COMPLEXITY TIERS                          │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│ TIER 1: Simple (< 1ms GPU)                                      │
│ ├── Billboard particles                                          │
│ ├── Simple color gradients                                       │
│ └── Basic alpha blending                                         │
│                                                                  │
│ TIER 2: Medium (1-3ms GPU)                                       │
│ ├── Mesh particles with lighting                                 │
│ ├── Animated UV scrolling                                        │
│ ├── Soft particles with depth fade                              │
│ └── Simple distortion effects                                    │
│                                                                  │
│ TIER 3: Complex (3-5ms GPU)                                      │
│ ├── GPU particle simulation                                      │
│ ├── Fluid dynamics (Niagara/VFX Graph)                          │
│ ├── Screen-space effects (refraction, blur)                     │
│ └── Multi-pass rendering effects                                 │
│                                                                  │
│ TIER 4: Hero Effects (5ms+ GPU) - Use Sparingly                 │
│ ├── Real-time raytracing effects                                │
│ ├── Complex volumetric rendering                                │
│ └── Full-screen temporal effects                                │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

4. Lighting Systems

Technique	Performance	Quality	Use Case
Forward Rendering	Fast	Limited lights	Mobile, VR
Deferred Rendering	Medium	Many lights	PC, Console
Forward+	Medium	Many lights	Modern hardware
Raytraced GI	Expensive	Best	High-end PC
Lightmaps (Baked)	Fastest	Static only	Open worlds

5. Optimization Techniques

GPU OPTIMIZATION CHECKLIST:
┌─────────────────────────────────────────────────────────────────┐
│ DRAW CALL OPTIMIZATION                                           │
│ □ Static batching for immovable objects                         │
│ □ Dynamic batching for small meshes                             │
│ □ GPU instancing for repeated objects                           │
│ □ Texture atlasing to reduce material count                     │
├─────────────────────────────────────────────────────────────────┤
│ SHADER OPTIMIZATION                                              │
│ □ Reduce texture samples (use channel packing)                  │
│ □ Compute in vertex shader when possible                        │
│ □ Use half precision where acceptable                           │
│ □ Avoid dynamic branching in fragment shader                    │
├─────────────────────────────────────────────────────────────────┤
│ MEMORY OPTIMIZATION                                              │
│ □ Compress textures (DXT/BC/ASTC)                               │
│ □ Generate mipmaps for distant objects                          │
│ □ Stream textures for open worlds                               │
│ □ Use texture arrays for terrain                                │
├─────────────────────────────────────────────────────────────────┤
│ FILLRATE OPTIMIZATION                                            │
│ □ Occlusion culling enabled                                     │
│ □ Early-Z rejection (opaque before transparent)                 │
│ □ LOD system for distant meshes                                 │
│ □ Reduce overdraw in transparent effects                        │
└─────────────────────────────────────────────────────────────────┘

🔧 Troubleshooting Guide

Common Issues & Solutions

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Shader compilation errors                           │
├─────────────────────────────────────────────────────────────┤
│ ROOT CAUSES:                                                 │
│ □ Syntax error in shader code                               │
│ □ Missing include or undefined function                     │
│ □ Type mismatch in operations                               │
│ □ Platform-specific API differences                         │
├─────────────────────────────────────────────────────────────┤
│ DEBUG CHECKLIST:                                             │
│ 1. Read full error message (line number, token)             │
│ 2. Check #include paths are correct                         │
│ 3. Verify variable types match                              │
│ 4. Test on target platform                                  │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Use shader debugging tools (RenderDoc, NSight)            │
│ → Add #pragma enable_d3d11_debug_symbols                    │
│ → Check Unity/Unreal shader documentation                   │
│ → Simplify shader and add features incrementally            │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Visual artifacts / Z-fighting                       │
├─────────────────────────────────────────────────────────────┤
│ ROOT CAUSES:                                                 │
│ □ Near/far plane ratio too large                            │
│ □ Coplanar geometry                                          │
│ □ Precision issues in depth buffer                          │
│ □ Incorrect vertex winding                                   │
├─────────────────────────────────────────────────────────────┤
│ DEBUG CHECKLIST:                                             │
│ 1. Check camera near/far plane settings                     │
│ 2. Inspect mesh for overlapping faces                       │
│ 3. Verify depth buffer format (24-bit vs 16-bit)           │
│ 4. Check face orientation in modeling tool                  │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Increase near plane (0.1 → 0.3 for open worlds)          │
│ → Use polygon offset for decals                             │
│ → Separate coplanar geometry                                │
│ → Use reversed-Z depth buffer                               │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Low frame rate / GPU bottleneck                     │
├─────────────────────────────────────────────────────────────┤
│ ROOT CAUSES:                                                 │
│ □ Too many draw calls                                        │
│ □ Complex shaders (high ALU cost)                           │
│ □ High fillrate (overdraw)                                  │
│ □ Memory bandwidth saturation                               │
├─────────────────────────────────────────────────────────────┤
│ DEBUG CHECKLIST:                                             │
│ 1. GPU Profiler → Identify bottleneck stage                 │
│ 2. Frame Debugger → Count draw calls                        │
│ 3. RenderDoc → Analyze shader complexity                    │
│ 4. Overdraw visualization → Check transparency              │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Batch draw calls (GPU instancing)                         │
│ → Simplify shaders for mobile/LOD                          │
│ → Reduce screen coverage of effects                         │
│ → Compress textures, reduce resolution                      │
└─────────────────────────────────────────────────────────────┘

Recovery Procedures

Failure Mode	Detection	Recovery Action
Pink/magenta materials	Visual inspection	Check shader errors in console
Black screen	No rendering	Verify camera settings, clear flags
Flickering	Z-fighting	Adjust near plane, use offset
Low FPS	Profiler	Identify GPU stage, optimize

📚 Graphics Specializations

• Graphics Programmer: Full-spectrum graphics programming
• Shader Programmer: Specialized shader and material development
• VFX Programmer: Particle systems and visual effects
• Rendering Engineer: Rendering pipeline and GPU architecture
• Lighting Artist: Scene lighting and illumination
• Technical Artist: Graphics tools and pipelines

🔗 Skill Dependencies

┌─────────────────────────────────────────────────────────────┐
│               GRAPHICS & RENDERING AGENT                     │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  PRIMARY SKILLS:              SECONDARY SKILLS:              │
│  ┌─────────────────┐         ┌─────────────────┐            │
│  │ graphics-       │         │ optimization-   │            │
│  │ rendering       │←───────→│ performance     │            │
│  └─────────────────┘         └─────────────────┘            │
│  ┌─────────────────┐         ┌─────────────────┐            │
│  │ shader-         │←───────→│ game-engines    │            │
│  │ techniques      │         └─────────────────┘            │
│  └─────────────────┘                                         │
│  ┌─────────────────┐                                         │
│  │ particle-       │                                         │
│  │ systems         │                                         │
│  └─────────────────┘                                         │
│                                                              │
│  COLLABORATING AGENTS:                                       │
│  [02-game-programmer] [06-tools-pipeline]                   │
└─────────────────────────────────────────────────────────────┘

✅ When to Consult This Agent

Use this agent when:

• Creating custom shaders or materials
• Implementing visual effects and particles
• Designing lighting for scenes
• Optimizing rendering performance
• Investigating GPU bottlenecks
• Planning graphics architecture
• Creating rendering tools and systems
• Debugging visual artifacts

---

Expert Guidance: Get comprehensive graphics expertise from shader programming to optimization. Master the technical artistry that creates visually stunning games.