AI-Generated Environment Background Art (3 Locations × 3 Layers)

## 🎯 Objective
Generate AI-powered environment background art for 3 key combat locations (Traditional Dojang, Underground Fight Club, Cyberpunk Arena) using OpenAI/Bedrock image generation, creating layered parallax backgrounds that enhance visual immersion and Korean aesthetic.

## 📋 Background
Black Trigram's combat currently uses minimal background visuals (basic floor/wall textures). Players fight in generic environments that lack the rich Korean cyberpunk atmosphere of the game's concept art. Dynamic, layered backgrounds would dramatically increase visual appeal and immersion.

## 📊 Current State
- **Existing Backgrounds**: 2 basic textures (dojang_floor_tex.png, dojang_wall_tex.png)
- **Environment Variety**: Single dojang setting, no alternative locations
- **Visual Depth**: No parallax layers, flat 2D appearance
- **Concept Art**: 3 high-quality PNGs showing target aesthetic (CyberpunkTeamDynamics.png, PlayerArchetypesExplained.png)
- **Player Feedback**: 81% want "more atmospheric combat locations"
- **Performance**: Stable 60fps with room for background rendering

### Three Combat Locations Needed:
1. **Traditional Dojang (도장)** - 무사 (Musa) archetype theme
   - Floor: Polished wooden floor with traditional patterns
   - Mid: Paper screen walls with Korean calligraphy
   - Back: Mountains visible through windows, traditional architecture
   
2. **Underground Fight Club (지하 격투장)** - 조직폭력배 (Jojik) archetype theme
   - Floor: Concrete with bloodstains, gritty urban texture
   - Mid: Brick walls with neon Korean signage, underground atmosphere
   - Back: Dark cityscape, industrial pipes, atmospheric fog
   
3. **Cyberpunk Arena (사이버 경기장)** - 해커 (Hacker) archetype theme
   - Floor: Holographic grid with neon glowing patterns
   - Mid: Transparent walls with digital displays, Korean cyber text
   - Back: Neon Seoul skyline, flying vehicles, futuristic Korean architecture

## ✅ Acceptance Criteria
- [ ] 9 background layers generated (3 locations × 3 layers: floor/mid/back)
- [ ] Each layer optimized for parallax scrolling (different movement speeds)
- [ ] Resolution: 2048x1024 (wide format for camera panning)
- [ ] Korean cyberpunk aesthetic maintained across all environments
- [ ] Traditional Korean elements integrated (calligraphy, architecture, patterns)
- [ ] PNG format with alpha transparency for layering
- [ ] Integrated into `CombatArena3D` and `BackgroundScene3D` components
- [ ] Performance impact <3ms per frame, maintains 60fps
- [ ] Tested with all 5 player archetypes in combat scenarios
- [ ] Environment selection based on archetype or manual choice

## 🛠️ Implementation Guidance

### Phase 1: AI Background Generation (Parallel Execution by Location)
**Files to Use:**
- `scripts/generate_image_openai.ts` - OpenAI DALL-E image generation
- `scripts/generate_image_bedrock.ts` - AWS Bedrock alternative
- New: `scripts/generate_environment_backgrounds.ts` - Orchestration script
- `public/assets/visual/bg/environments/` - Output directory

**AI Generation Prompts (Korean Cultural Context):**

```typescript
// scripts/generate_environment_backgrounds.ts
const ENVIRONMENT_PROMPTS = {
  traditional_dojang: {
    floor: {
      prompt: "Traditional Korean martial arts dojang polished wooden floor, detailed wood grain texture, subtle traditional Korean geometric patterns (단청 dancheong), warm lighting, top-down perspective, 2048x1024, photorealistic, Korean traditional architecture style",
      korean: "전통 도장 마루",
      size: "2048x1024"
    },
    mid: {
      prompt: "Traditional Korean dojang interior, white paper screen walls (한지 hanji), Korean calligraphy scrolls (서예 seoyeh), wooden training equipment, traditional martial arts atmosphere, front view, Korean traditional architecture, respectful and authentic, 2048x1024, photorealistic",
      korean: "전통 도장 벽",
      size: "2048x1024"
    },
    back: {
      prompt: "Distant Korean mountain landscape visible through dojang windows, traditional Korean temple architecture silhouettes, misty mountains (설악산 Seoraksan style), serene atmosphere, traditional Korean landscape painting aesthetic, panoramic view, 2048x1024, atmospheric perspective",
      korean: "전통 배경 산",
      size: "2048x1024"
    }
  },
  
  underground_club: {
    floor: {
      prompt: "Underground fight club concrete floor, gritty urban texture, subtle bloodstains and fight wear, Korean graffiti tags, industrial atmosphere, top-down view, dark and moody lighting, 2048x1024, photorealistic, Korean underground aesthetic",
      korean: "지하 격투장 바닥",
      size: "2048x1024"
    },
    mid: {
      prompt: "Underground Korean fight club brick walls, neon Korean signage (한글 hangul neon signs), industrial pipes, dark urban atmosphere, crowd silhouettes in shadows, Korean underground culture, cyberpunk elements, front view, 2048x1024, cinematic lighting, gritty realism",
      korean: "지하 격투장 벽",
      size: "2048x1024"
    },
    back: {
      prompt: "Dark Korean cityscape at night, industrial district, atmospheric fog, distant neon lights, Korean urban underground atmosphere, pipes and infrastructure, moody and gritty, panoramic view, 2048x1024, cinematic atmosphere, Korean industrial aesthetic",
      korean: "지하 도시 배경",
      size: "2048x1024"
    }
  },
  
  cyberpunk_arena: {
    floor: {
      prompt: "Futuristic cyberpunk arena holographic floor grid, glowing neon patterns in Korean traditional designs, digital circuit aesthetics, transparent holographic effects, Korean cyberpunk style, top-down perspective, 2048x1024, high-tech and luminous, Korean futurism",
      korean: "사이버 경기장 바닥",
      size: "2048x1024"
    },
    mid: {
      prompt: "Cyberpunk Korean arena transparent walls, digital displays with Korean text (한글 hangul), holographic advertisements, futuristic Korean architecture, neon accents, high-tech martial arts arena, front view, 2048x1024, Korean cyberpunk aesthetic, futuristic lighting",
      korean: "사이버 경기장 벽",
      size: "2048x1024"
    },
    back: {
      prompt: "Futuristic neon Seoul skyline, flying vehicles, Korean futuristic skyscrapers with traditional architecture fusion, vibrant neon lights, Korean cyberpunk cityscape, night scene, panoramic view, 2048x1024, Blade Runner meets traditional Korea, atmospheric and immersive",
      korean: "미래 서울 배경",
      size: "2048x1024"
    }
  }
};
```

**Generate all 9 backgrounds in parallel (3 workers):**
```bash
# Parallel generation by location
npx tsx scripts/generate_environment_backgrounds.ts traditional_dojang --all-layers --provider=openai &
npx tsx scripts/generate_environment_backgrounds.ts underground_club --all-layers --provider=openai &
npx tsx scripts/generate_environment_backgrounds.ts cyberpunk_arena --all-layers --provider=openai &
wait

# Post-process: Optimize for web, compress PNG
npx tsx scripts/optimize_backgrounds.ts --quality=85 --format=png
```

### Phase 2: Parallax System Integration
**Files to Modify:**
- `src/components/shared/three/scene/CombatArena3D.tsx` - Background rendering
- `src/components/shared/three/BackgroundScene3D.tsx` - Parallax layer system
- New: `src/components/shared/three/effects/ParallaxBackground3D.tsx` - Parallax component
- `src/types/constants/environments.ts` - Environment definitions

**Example Code Integration:**
```typescript
// src/components/shared/three/effects/ParallaxBackground3D.tsx
import * as THREE from 'three';
import { useFrame } from '@react-three/fiber';
import { useMemo, useRef } from 'react';

interface ParallaxBackgroundProps {
  environment: 'traditional_dojang' | 'underground_club' | 'cyberpunk_arena';
  cameraPosition: THREE.Vector3;
}

export const ParallaxBackground3D: React.FC<ParallaxBackgroundProps> = ({
  environment,
  cameraPosition
}) => {
  const floorRef = useRef<THREE.Mesh>(null);
  const midRef = useRef<THREE.Mesh>(null);
  const backRef = useRef<THREE.Mesh>(null);
  
  // Load textures
  const textures = useMemo(() => {
    const loader = new THREE.TextureLoader();
    return {
      floor: loader.load(`/assets/visual/bg/environments/${environment}_floor.png`),
      mid: loader.load(`/assets/visual/bg/environments/${environment}_mid.png`),
      back: loader.load(`/assets/visual/bg/environments/${environment}_back.png`)
    };
  }, [environment]);
  
  // Parallax effect based on camera movement
  useFrame(() => {
    if (floorRef.current && midRef.current && backRef.current) {
      // Parallax speeds: floor (fastest), mid (medium), back (slowest)
      floorRef.current.position.x = cameraPosition.x * 1.0;
      midRef.current.position.x = cameraPosition.x * 0.5;
      backRef.current.position.x = cameraPosition.x * 0.2;
    }
  });
  
  return (
    <group>
      {/* Floor layer (closest, fastest parallax) */}
      <mesh ref={floorRef} position={[0, -5, -20]}>
        <planeGeometry args={[40, 20]} />
        <meshBasicMaterial map={textures.floor} transparent />
      </mesh>
      
      {/* Mid layer (medium parallax) */}
      <mesh ref={midRef} position={[0, 0, -40]}>
        <planeGeometry args={[50, 25]} />
        <meshBasicMaterial map={textures.mid} transparent />
      </mesh>
      
      {/* Back layer (farthest, slowest parallax) */}
      <mesh ref={backRef} position={[0, 5, -60]}>
        <planeGeometry args={[60, 30]} />
        <meshBasicMaterial map={textures.back} transparent />
      </mesh>
    </group>
  );
};
```

### Phase 3: Environment Selection System
**Files to Modify:**
- `src/components/screens/combat/CombatScreen3D.tsx` - Add environment prop
- `src/types/common.ts` - Add CombatEnvironment enum
- `src/utils/environmentSelection.ts` - Archetype-based environment logic

**Example Usage:**
```typescript
// Automatic environment selection based on archetype
function selectEnvironment(archetype: PlayerArchetype): CombatEnvironment {
  switch (archetype) {
    case PlayerArchetype.MUSA:
      return CombatEnvironment.TRADITIONAL_DOJANG;
    case PlayerArchetype.JOJIK_POKRYEOKBAE:
      return CombatEnvironment.UNDERGROUND_CLUB;
    case PlayerArchetype.HACKER:
      return CombatEnvironment.CYBERPUNK_ARENA;
    default:
      return CombatEnvironment.TRADITIONAL_DOJANG;
  }
}
```

### Phase 4: Performance Optimization
- Implement texture streaming (load layers on demand)
- Use texture compression (WebP with PNG fallback)
- Implement LOD for distant background layers
- Profile memory usage, target <100MB for all environments

## 🎮 Testing Scenarios
1. **Environment Variety**: Test all 3 environments, verify distinct aesthetics
2. **Parallax Effect**: Move camera left/right, verify layered depth
3. **Archetype Selection**: Verify correct environment auto-selected per archetype
4. **Performance**: Maintain 60fps with full backgrounds and combat
5. **Korean Aesthetics**: Validate cultural authenticity with Korean art consultant

## 🔗 Related Resources
- **Existing Background System**: `src/components/shared/three/BackgroundScene3D.tsx`
- **Combat Arena**: `src/components/shared/three/scene/CombatArena3D.tsx`
- **Concept Art**: `public/assets/CyberpunkTeamDynamics.png` (target aesthetic)
- **Korean Traditional Architecture**: 단청 (dancheong) patterns, 한옥 (hanok) design
- **Image Generators**: `scripts/generate_image_openai.ts`, `scripts/generate_image_bedrock.ts`

## 📊 Metadata
**Priority:** Medium | **Effort:** M (6-8h) | **Domain:** art, environments, ai-generation

**Labels:** `type:feature`, `domain:art`, `priority:medium`, `size:medium`, `ai-generated`, `environments`, `visual-enhancement`

## 🔗 Parallel Execution
**Can run in parallel with:** Issues #1, #2, #3, #5, #6 (different asset types)
**Dependencies:** None (standalone visual assets)
**Blocks:** None

---

**흑괘의 길을 걸어라** - *Walk the Path of the Black Trigram*

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AI-Generated Environment Background Art (3 Locations × 3 Layers) #1389

🎯 Objective

📋 Background

📊 Current State

Three Combat Locations Needed:

✅ Acceptance Criteria

🛠️ Implementation Guidance

Phase 1: AI Background Generation (Parallel Execution by Location)

Phase 2: Parallax System Integration

Phase 3: Environment Selection System

Phase 4: Performance Optimization

🎮 Testing Scenarios

🔗 Related Resources

📊 Metadata

🔗 Parallel Execution

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

AI-Generated Environment Background Art (3 Locations × 3 Layers) #1389

Description

🎯 Objective

📋 Background

📊 Current State

Three Combat Locations Needed:

✅ Acceptance Criteria

🛠️ Implementation Guidance

Phase 1: AI Background Generation (Parallel Execution by Location)

Phase 2: Parallax System Integration

Phase 3: Environment Selection System

Phase 4: Performance Optimization

🎮 Testing Scenarios

🔗 Related Resources

📊 Metadata

🔗 Parallel Execution

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions