# Three.js WebGL Configuration - FikoYT

## ⚙️ Renderer Setup

**WebGL1 context:**
```typescript
this.sunucu = new THREE.WebGLRenderer({
  antialias: true,          // Anti-aliasing
  alpha: true,              // Transparency support
  logarithmicDepthBuffer: true,
  powerPreference: "high-performance"
});
```

## 🎨 Render Settings

**Pixel ratio:**
```typescript
// Device pixel ratio
const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
renderer.setPixelRatio(pixelRatio);
```

**Color space:**
```typescript
// sRGB color space
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
```

## 🔧 Performance Settings

**Shadow mapping:**
```typescript
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.size = 2048;
```

**Gamma correction:**
```typescript
renderer.gammaFactor = 2.2;
renderer.toneMappingExposure = 1.0;
```

## 📱 Context Attributes

**WebGL attributes:**
- **alpha:** True for transparency
- **depth:** True for depth testing
- **stencil:** False (not used)
- **premultipliedAlpha:** False

## ⚠️ Critical Settings

- **PreserveDrawingBuffer:** False
- **failIfMajorPerformanceCaveat:** False
- **precision:** highp (default)
- **premultipliedAlpha:** False

---

2025-11-06