Selbstgehostete XR-Entwicklungsumgebung mit Docker und Traefik

🇬🇧 Read in EnglishFebruary 7, 2026~8 min read

xrdockertraefikdevops

XRDockerTraefikWebXRDevOpsThree.jsSelf-Hosting

June 9, 2026· ~4 min read

WebXR Composition Layers — High-Performance Rendering

A performance deep-dive into WebXR Composition Layers — projection, quad, cylinder, and equirectangular layers, video playback via XRMediaBinding, and GPU-composited overlay techniques.

June 9, 2026· ~4 min read

WebXR Hand Tracking — Von Gelenken zu Gesten

Ein praxisnaher Deep-Dive in die WebXR Hand Tracking API — Gelenkpositionen, Pinch-Erkennung, benutzerdefinierte Gestenerkennung und Interaktionsmuster für immersive VR-Anwendungen.

· ~4 min read

WebXR Composition Layers — High-Performance Rendering

A performance deep-dive into WebXR Composition Layers — projection, quad, cylinder, and equirectangular layers, video playback via XRMediaBinding, and GPU-composited overlay techniques.

xrWebXRcomposition layers

Die Erstellung einer professionellen XR-Entwicklungsumgebung (Extended Reality) kann komplex sein, aber die Containerisierung mit Docker und Reverse Proxying mit Traefik machen sie handhabbar und skalierbar. Dieser umfassende Leitfaden führt Sie durch die Einrichtung eines vollständigen, produktionsreifen XR-Development-Stacks, den Sie mit voller Kontrolle selbst hosten können.

Einführung

Warum XR-Entwicklung selbst hosten?

Moderne XR-Entwicklung erfordert das Zusammenspiel mehrerer Dienste: Entwicklungsserver, Build-Tools, Backend-APIs, Echtzeit-Kommunikationsserver und häufig Datenbanksysteme. Self-Hosting bietet Ihnen:

Vollständige Kontrolle über Ihre Entwicklungsumgebung
Kein Vendor Lock-in – Ihre Tools, Ihr Weg
Privatsphäre und Sicherheit – Ihr Code verlässt niemals Ihre Infrastruktur
Kosteneffizienz – keine Abonnementgebühren für Entwicklungstools
Anpassbarkeit – jede Komponente kann exakt auf Ihre spezifischen Bedürfnisse zugeschnitten werden

Vorteile containerisierter XR-Workflows:

Reproduzierbarkeit – identische Umgebungen für alle Teammitglieder
Isolation – separate Projekte beeinflussen sich nicht gegenseitig
Skalierbarkeit – bei Bedarf einfach weitere Ressourcen hinzufügen
Einfaches Deployment – mit Vertrauen von der Entwicklung in die Produktion wechseln
Team-Kollaboration – konsistente Entwicklungsumgebungen teilen

Voraussetzungen

Hardware-Anforderungen

Mindestanforderungen:

CPU: 4 Kerne (Intel i5 oder gleichwertig)
RAM: 8 GB (16 GB empfohlen)
Speicher: 50 GB SSD
GPU: Integrierte Grafik für grundlegende 3D-Arbeiten ausreichend

Empfohlene Anforderungen:

CPU: 8+ Kerne (Intel i7/i9, AMD Ryzen 7/9)
RAM: 32 GB+
Speicher: 500 GB+ NVMe SSD
GPU: NVIDIA RTX 3060 oder gleichwertig mit 6 GB+ VRAM
Netzwerk: Gigabit Ethernet (für die Team-Kollaboration)

Software-Abhängigkeiten

Erforderliche Software:

Docker Engine 24.0+
Docker Compose v2.20+
NVIDIA Container Toolkit (für GPU-Beschleunigung)
Git
Node.js 18+ (für einige XR-Frameworks)
Moderner Webbrowser mit WebXR-Unterstützung

Netzwerk-Anforderungen:

Statische IP oder dynamischer DNS-Dienst
Domainname (optional, aber für SSL empfohlen)
Offene Ports: 80, 443, zusätzliche Ports für Entwicklungstools
Firewall-Konfiguration für Traefik

Infrastruktur-Setup

Basis-Docker-Konfiguration

GPU-Unterstützung aktivieren (NVIDIA):

Installieren Sie zuerst das NVIDIA Container Toolkit:

# Add NVIDIA repository and install toolkit
curl -fsSL https://nvidia.github.io/libnvidia-container/gpgkey | sudo gpg --dearmor -o /usr/share/keyrings/nvidia-container-toolkit-keyring.gpg
curl -s -L https://nvidia.github.io/libnvidia-container/stable/deb/nvidia-container-toolkit.list | \
  sed 's#deb https://#deb [signed-by=/usr/share/keyrings/nvidia-container-toolkit-keyring.gpg] https://#g' | \
  sudo tee /etc/apt/sources.list.d/nvidia-container-toolkit.list

sudo apt-get update
sudo apt-get install -y nvidia-container-toolkit

# Configure Docker to use NVIDIA runtime
sudo nvidia-ctk runtime configure --runtime=docker
sudo systemctl restart docker

# Verify GPU access
docker run --rm --gpus all nvidia/cuda:11.0.3-base-ubuntu20.04 nvidia-smi
```text

**Docker-Daemon optimieren:**

Erstellen oder bearbeiten Sie `/etc/docker/daemon.json`:

```json
{
  "log-driver": "json-file",
  "log-opts": {
    "max-size": "10m",
    "max-file": "3"
  },
  "default-ulimits": {
    "nofile": {
      "Name": "nofile",
      "Hard": 64000,
      "Soft": 64000
    }
  },
  "runtimes": {
    "nvidia": {
      "path": "nvidia-container-runtime",
      "runtimeArgs": []
    }
  },
  "default-runtime": "nvidia"
}
```text

Docker neu starten:

```bash
sudo systemctl restart docker
```text
### Traefik Reverse Proxy Konfiguration

**Traefik Verzeichnisstruktur erstellen:**

```bash
mkdir -p ~/xr-dev-env/{traefik,projects,shared}
cd ~/xr-dev-env/traefik
```text

**Traefik Konfiguration erstellen:**

`traefik.yml`:

```yaml
api:
  dashboard: true
  insecure: false

entryPoints:
  web:
    address: ":80"
    http:
      redirections:
        entryPoint:
          to: websecure
          scheme: https
  websecure:
    address: ":443"

providers:
  docker:
    endpoint: "unix:///var/run/docker.sock"
    exposedByDefault: false

certificatesResolvers:
  letsencrypt:
    acme:
      email: your-email@example.com
      storage: /letsencrypt/acme.json
      httpChallenge:
        entryPoint: web
```text

**Docker Compose für Traefik erstellen:**

`docker-compose.yml`:

```yaml
version: '3.8'

services:
  traefik:
    image: traefik:v3.6
    container_name: traefik
    restart: unless-stopped
    command:
      - "--configFile=/etc/traefik/traefik.yml"
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - ./traefik.yml:/etc/traefik/traefik.yml
      - ./letsencrypt:/letsencrypt
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.api.rule=Host(`traefik.your-domain.com`)"
      - "traefik.http.routers.api.tls=true"
      - "traefik.http.routers.api.tls.certresolver=letsencrypt"
      - "traefik.http.routers.api.service=api@internal"
      - "traefik.http.routers.api.middlewares=auth"
      - "traefik.http.middlewares.auth.basicauth.users=${TRAEFIK_USERS}"
    environment:
      - TRAEFIK_USERS=admin:$$apr1$$hashhere  # Generate with: htpasswd -nb admin password
    networks:
      - proxy

networks:
  proxy:
    external: true
```text

Das externe Netzwerk erstellen:

```bash
docker network create proxy
```text

**Traefik starten:**

```bash
cd ~/xr-dev-env/traefik
docker-compose up -d
```text

**Traefik Middlewares für XR:**

Erstellen Sie `dynamic-config.yml`:

```yaml
http:
  middlewares:
    cors:
      headers:
        accesscontrolallowmethods: GET,POST,OPTIONS,PUT,DELETE
        accesscontrolallowheaders: Authorization,Content-Type,Depth,User-Agent,X-File-Size,X-Requested-With,X-Requested-By,If-Modified-Since,X-File-Name,Cache-Control
        accesscontrolalloworiginlist: "*"
        accesscontrolmaxage: 100
        addvaryheader: true

    websocket-headers:
      headers:
        customrequestheaders:
          X-Forwarded-Proto: "https"
        accesscontrolallowheaders: Authorization,Content-Type,Depth,User-Agent,X-File-Size,X-Requested-With,X-Requested-By,If-Modified-Since,X-File-Name,Cache-Control,Upgrade,Connection,Sec-WebSocket-Key,Sec-WebSocket-Version,Sec-WebSocket-Extensions,Sec-WebSocket-Accept,Sec-WebSocket-Protocol
        accesscontrolallowmethods: GET,POST,OPTIONS
        accesscontrolalloworiginlist: "*"

    compress:
      compress: true
```
ratelimit:
      rateLimit:
        average: 100
        burst: 50
```text

## XR Development Stack Components

### Three.js Development Server

**Create Development Server Container:**

Create directory `~/xr-dev-env/projects/threejs-dev/`:

`docker-compose.yml`:

```yaml
version: '3.8'

services:
  dev-server:
    image: node:18-alpine
    container_name: threejs-dev-server
    restart: unless-stopped
    working_dir: /app
    command: sh -c "npm install && npm run dev"
    volumes:
      - ./src:/app/src
      - ./public:/app/public
      - /app/node_modules
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.threejs-dev.rule=Host(`dev.your-domain.com`)"
      - "traefik.http.routers.threejs-dev.tls=true"
      - "traefik.http.routers.threejs-dev.tls.certresolver=letsencrypt"
      - "traefik.http.routers.threejs-dev.middlewares=websocket-headers,cors"
      - "traefik.http.services.threejs-dev.loadbalancer.server.port=3000"
    environment:
      - NODE_ENV=development
    networks:
      - proxy

networks:
  proxy:
    external: true
```text

**package.json**:

```json
{
  "name": "threejs-xr-dev",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite --host 0.0.0.0 --port 3000",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "three": "^0.160.0",
    "@types/three": "^0.160.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}
```text

**Simple Three.js + WebXR Example:**

`src/main.js`:

```javascript
import * as THREE from 'three';

let camera, scene, renderer;
let controller;

init();
animate();

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x808080);

  camera = new THREE.PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    0.01,
    20
  );

  // Create a simple cube
  const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
  const material = new THREE.MeshNormalMaterial();
  const cube = new THREE.Mesh(geometry, material);
  cube.position.set(0, 1.6, -1);
  scene.add(cube);

  // Lighting
  const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
  light.position.set(0.5, 1, 0.25);
  scene.add(light);

  // Renderer with WebXR support
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true;
  document.body.appendChild(renderer.domElement);

  // XR Controller
  controller = renderer.xr.getController(0);
  scene.add(controller);

  // Handle resize
  window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  renderer.setAnimationLoop(render);
}

function render() {
  renderer.render(scene, camera);
}
```text

`index.html`:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js XR Development</title>
  <style>
    body { margin: 0; overflow: hidden; }
    #info {
      position: absolute;
      top: 10px;
      left: 10px;
      color: white;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div id="info">Three.js + WebXR Development Environment</div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>
```text

### WebXR Backend Services

**Real-Time Multiplayer Server (WebSocket):**

Create directory `~/xr-dev-env/projects/webxr-backend/`:

`docker-compose.yml`:

```yaml
version: '3.8'

services:
  websocket-server:
    image: node:18-alpine
    container_name: webxr-websocket
    restart: unless-stopped
    working_dir: /app
    command: sh -c "npm install && npm start"
    volumes:
      - ./src:/app/src
      - /app/node_modules
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.ws-server.rule=Host(`ws.your-domain.com`)"
      - "traefik.http.routers.ws-server.tls=true"
      - "traefik.http.routers.ws-server.tls.certresolver=letsencrypt"
      - "traefik.http.routers.ws-server.middlewares=websocket-headers"
      - "traefik.http.services.ws-server.loadbalancer.server.port=8080"
    networks:
      - proxy

  redis:
    image: redis:7-alpine
    container_name: webxr-redis
    restart: unless-stopped
    command: redis-server --appendonly yes
    volumes:
      - redis-data:/data
    networks:
      - proxy

volumes:
  redis-data:

networks:
  proxy:
    external: true
```text

`package.json`:

```json
{
  "name": "webxr-backend",
  "version": "1.0.0",
  "scripts": {
    "start": "node src/server.js"
  },
  "dependencies": {
    "ws": "^8.16.0",
    "redis": "^4.6.0",
    "express": "^4.18.0"
  }
}
```text

`src/server.js`:

```javascript
const WebSocket = require('ws');
const Redis = require('redis');

// Redis client for session management
const redisClient = Redis.createClient({
  url: 'redis://redis:6379'
});

redisClient.connect().catch(console.error);
// WebSocket-Server
const wss = new WebSocket.Server({ port: 8080 });

const sessions = new Map();

wss.on('connection', (ws) => {
  const sessionId = generateSessionId();
  sessions.set(sessionId, ws);

  console.log(`New client connected: ${sessionId}`);

  ws.on('message', async (message) => {
    try {
      const data = JSON.parse(message);

      switch (data.type) {
        case 'join':
          await handleJoin(ws, data);
          break;
        case 'position':
          await handlePositionUpdate(sessionId, data);
          break;
        case 'chat':
          await handleChat(sessionId, data);
          break;
        default:
          console.log('Unbekannter Nachrichtentyp:', data.type);
      }
    } catch (error) {
      console.error('Fehler bei der Nachrichtenverarbeitung:', error);
    }
  });

  ws.on('close', () => {
    sessions.delete(sessionId);
    broadcastUserLeft(sessionId);
    console.log(`Client disconnected: ${sessionId}`);
  });
});

function generateSessionId() {
  return 'session_' + Math.random().toString(36).substr(2, 9);
}

async function handleJoin(ws, data) {
const userId = data.userId |  | 'user_' + Math.random().toString(36).substr(2, 9);

  await redisClient.hSet('users', userId, JSON.stringify({
    userId,
    position: { x: 0, y: 0, z: 0 },
    rotation: { x: 0, y: 0, z: 0 },
    joinedAt: Date.now()
  }));

  ws.send(JSON.stringify({
    type: 'joined',
    userId,
    sessionId: generateSessionId()
  }));

  broadcastUserList();
}

async function handlePositionUpdate(sessionId, data) {
  const userId = data.userId;
  const position = data.position;
  const rotation = data.rotation;

  await redisClient.hSet('users', userId, JSON.stringify({
    userId,
    position,
    rotation
  }));

  broadcast({
    type: 'positionUpdate',
    userId,
    position,
    rotation
  }, sessionId);
}

async function handleChat(sessionId, data) {
  const message = {
    type: 'chat',
    userId: data.userId,
    text: data.text,
    timestamp: Date.now()
  };

  broadcast(message);
}

function broadcast(message, excludeSessionId = null) {
  const data = JSON.stringify(message);

  sessions.forEach((ws, sessionId) => {
    if (sessionId !== excludeSessionId && ws.readyState === WebSocket.OPEN) {
      ws.send(data);
    }
  });
}

function broadcastUserLeft(userId) {
  broadcast({
    type: 'userLeft',
    userId
  });
}

async function broadcastUserList() {
  const users = await redisClient.hGetAll('users');
  const userList = Object.values(users).map(JSON.parse);

  broadcast({
    type: 'userList',
    users: userList
  });
}
console.log('WebSocket server running on port 8080');
```text

### Development Tools

**VS Code Remote Containers Setup:**

Create `.devcontainer/devcontainer.json`:

```json
{
  "name": "XR Development Environment",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "formulahendry.auto-rename-tag",
        "eamodio.gitlens",
        "ms-vscode.vscode-typescript-next"
      ],
      "settings": {
        "terminal.integrated.defaultProfile.linux": "bash",
        "editor.formatOnSave": true
      }
    }
  },
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind",
    "source=vscode-extensions,target=/root/.vscode-server/extensions,type=volume"
  ],
  "postCreateCommand": "npm install"
}
```text

**Performance Monitoring Dashboard (Grafana + Prometheus):**

Create directory `~/xr-dev-env/monitoring/`:

`docker-compose.yml`:

```yaml
version: '3.8'

services:
  prometheus:
    image: prom/prometheus:latest
    container_name: xr-prometheus
    restart: unless-stopped
    command:
      - '--config.file=/etc/prometheus/prometheus.yml'
      - '--storage.tsdb.path=/prometheus'
      - '--web.console.libraries=/etc/prometheus/console_libraries'
      - '--web.console.templates=/etc/prometheus/consoles'
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml
      - prometheus-data:/prometheus
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.prometheus.rule=Host(`prometheus.your-domain.com`)"
      - "traefik.http.routers.prometheus.tls=true"
      - "traefik.http.routers.prometheus.tls.certresolver=letsencrypt"
      - "traefik.http.routers.prometheus.middlewares=auth"
      - "traefik.http.services.prometheus.loadbalancer.server.port=9090"
    networks:
      - proxy

  grafana:
    image: grafana/grafana:latest
    container_name: xr-grafana
    restart: unless-stopped
    environment:
      - GF_SECURITY_ADMIN_PASSWORD=admin
      - GF_USERS_ALLOW_SIGN_UP=false
    volumes:
      - grafana-data:/var/lib/grafana
      - ./grafana/provisioning:/etc/grafana/provisioning
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.grafana.rule=Host(`grafana.your-domain.com`)"
      - "traefik.http.routers.grafana.tls=true"
      - "traefik.http.routers.grafana.tls.certresolver=letsencrypt"
      - "traefik.http.routers.grafana.middlewares=auth"
      - "traefik.http.services.grafana.loadbalancer.server.port=3000"
    depends_on:
      - prometheus
    networks:
      - proxy

volumes:
  prometheus-data:
  grafana-data:

networks:
  proxy:
    external: true
```text

`prometheus.yml`:

```yaml
global:
  scrape_interval: 15s
  evaluation_interval: 15s

scrape_configs:
  - job_name: 'traefik'
    static_configs:
      - targets: ['traefik:8080']

  - job_name: 'docker'
    static_configs:
      - targets: ['172.17.0.1:9323']

  - job_name: 'node-exporter'
static_configs:
      - targets: ['node-exporter:9100']
```text

## Project Templates

### Basic WebXR Project

**Complete Project Structure:**

```text
~/xr-dev-env/projects/basic-webxr/
├── docker-compose.yml
├── package.json
├── index.html
└── src/
    ├── main.js
    ├── xr.js
    └── utils.js
```text

`docker-compose.yml`:

```yaml
version: '3.8'

services:
  basic-webxr:
    image: node:18-alpine
    container_name: basic-webxr
    restart: unless-stopped
    working_dir: /app
    command: sh -c "npm install && npm run dev"
    volumes:
      - .:/app
      - /app/node_modules
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.basic-webxr.rule=Host(`basic-webxr.your-domain.com`)"
      - "traefik.http.routers.basic-webxr.tls=true"
      - "traefik.http.routers.basic-webxr.tls.certresolver=letsencrypt"
      - "traefik.http.routers.basic-webxr.middlewares=websocket-headers,cors"
      - "traefik.http.services.basic-webxr.loadbalancer.server.port=5173"
    networks:
      - proxy

networks:
  proxy:
    external: true
```text

## Performance Optimization

### GPU Passthrough Configuration

**Configure Docker Compose for GPU Access:**

```yaml
services:
  xr-app:
    image: your-xr-app
    runtime: nvidia
    environment:
      - NVIDIA_VISIBLE_DEVICES=all
    deploy:
      resources:
        reservations:
          devices:
            - driver: nvidia
              count: 1
              capabilities: [gpu, utility, compute]
```text

### Network Latency Optimization

**Optimize Docker Network:**

Create custom network with MTU optimization:

```bash
docker network create \
  --driver bridge \
  --opt com.docker.network.driver.mtu=1450 \
  --opt "com.docker.network.bridge.enable_icc=true" \
  --opt "com.docker.network.bridge.enable_ip_masquerade=true" \
  xr-network
```text

**Traefik Performance Tuning:**

Add to `traefik.yml`:

```yaml
global:
  checknewversion: false
  sendanonymoususage: false

serversTransport:
  insecureSkipVerify: true
  maxIdleConnsPerHost: 100
  forwardingTimeouts:
    dialTimeout: 30s
    responseHeaderTimeout: 10s
```text

### Container Resource Limits

```yaml
services:
  xr-app:
    deploy:
      resources:
        limits:
          cpus: '4'
          memory: 4G
        reservations:
          cpus: '2'
          memory: 2G
```text
## Sicherheitsüberlegungen

### Traefik Middlewares für XR-Endpunkte

**Security Header:**

```yaml
http:
  middlewares:
    security-headers:
      headers:
        browserXssFilter: true
        contentTypeNosniff: true
        frameDeny: true
        sslRedirect: true
        stsIncludeSubdomains: true
        stsPreload: true
        stsSeconds: 31536000
        customFrameOptionsValue: "SAMEORIGIN"
```text

**Authentifizierung für die Entwicklung:**

```yaml
middlewares:
  dev-auth:
    basicAuth:
      users:
        - "admin:$$apr1$$hashhere"
      realm: "XR Development Environment"
```text

### CrowdSec Sicherheitsintegration

**CrowdSec Agent installieren:**

```bash
curl -s https://install.crowdsec.net | sudo sh
sudo cscli collection install crowdsecurity/traefik
sudo cscli hub update
sudo systemctl restart crowdsec
```text

**CrowdSec Remediation konfigurieren:**

```yaml
middlewares:
  crowdsec-bouncer:
    plugin:
      pluginName: ""
      pluginConf:
        crowdsec:
          enabled: true
          machineID: ""
          crowdsecLapiKey: ""
          updateFrequencySeconds: 10
```text

## Deployment-Workflow

### CI/CD-Pipeline Setup

`.gitlab-ci.yml`:

```yaml
stages:
  - test
  - build
  - deploy

test:
  stage: test
  image: node:18
  script:
    - npm install
    - npm run test

build:
  stage: build
  image: docker:24
  services:
    - docker:24-dind
  script:
    - docker build -t $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA .
    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA

deploy:
  stage: deploy
  image: docker:24
  services:
    - docker:24-dind
  script:
    - docker pull $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA
    - docker-compose pull
    - docker-compose up -d
  only:
    - main
```text

### Automatisiertes Testen mit XR-Emulatoren

**XR-Funktionalität testen:**

```javascript
// tests/xr-test.js
const { expect } = require('chai');

describe('WebXR Functionality', () => {
  it('should support VR sessions', async () => {
    const xr = navigator.xr;
    const isSupported = await xr.isSessionSupported('immersive-vr');
    expect(isSupported).to.be.true;
  });

  it('should initialize Three.js scene', () => {
    const scene = new THREE.Scene();
    expect(scene).to.be.instanceOf(THREE.Scene);
  });
});
```text
## Fehlerbehebung

### Häufige Probleme mit GPU-Containern

### Problem: GPU im Container nicht erkannt

Lösung:

```bash
# Verify NVIDIA driver
nvidia-smi

# Check NVIDIA runtime
docker info | grep nvidia

# Test GPU access
docker run --rm --gpus all nvidia/cuda:11.0.3-base-ubuntu20.04 nvidia-smi
```text

### Problem: GPU-Speicher erschöpft (Out of GPU memory)

Lösung:

- Modellkomplexität reduzieren
- Texturkompression verwenden
- LOD (Level of Detail) implementieren
- Shader-Code optimieren

### WebXR Browser-Kompatibilität

**Browser-Support-Matrix:**

| Browser | VR | AR | Notizen |
| --------- | ----- | ----- | ------- |
| Chrome 84+ | ✅ | ✅ (Android) | Voller WebXR-Support |
| Firefox 88+ | ✅ | ❌ | Nur VR |
| Edge 84+ | ✅ | ✅ (Android) | Chromium-basiert |
| Safari 15+ | ✅ | ❌ | Eingeschränkter Support |

### Probleme mit der WebSocket-Verbindung

**WebSocket-Verbindungen debuggen:**

```javascript
const ws = new WebSocket('wss://ws.your-domain.com');

ws.onopen = () => {
  console.log('WebSocket connected');
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = (event) => {
  console.log('WebSocket closed:', event.code, event.reason);
};
```text

## Anhang

### Beispiel-Docker-Compose-Dateien

**Kompletter XR-Development-Stack:**

```yaml
version: '3.8'

services:
  # Traefik reverse proxy
  traefik:
    image: traefik:v3.6
    container_name: traefik
    restart: unless-stopped
    # ... (see above for full config)

  # Three.js development server
  threejs-dev:
    image: node:18-alpine
    container_name: threejs-dev-server
    restart: unless-stopped
    # ... (see above for full config)

  # WebSocket backend
  websocket-server:
    image: node:18-alpine
    container_name: webxr-websocket
    restart: unless-stopped
    # ... (see above for full config)

  # Redis for session management
  redis:
    image: redis:7-alpine
    container_name: webxr-redis
    restart: unless-stopped
    # ... (see above for full config)

  # Monitoring
  prometheus:
    image: prom/prometheus:latest
    container_name: xr-prometheus
    restart: unless-stopped
    # ... (see above for full config)

  grafana:
    image: grafana/grafana:latest
    container_name: xr-grafana
    restart: unless-stopped
    # ... (see above for full config)
```text

### Vollständige Traefik-Konfiguration

Siehe die obigen Abschnitte für die vollständigen `traefik.yml` und Middleware-Konfigurationen.

### Checkliste zur Fehlerbehebung

- [ ] Überprüfen, ob der Docker-Daemon läuft
- [ ] NVIDIA-Treiberinstallation prüfen
- [ ] Verfügbarkeit der GPU-Runtime bestätigen
- [ ] Erreichbarkeit von Traefik prüfen
- [ ] Gültigkeit der SSL-Zertifikate prüfen
- [ ] WebSocket-Verbindungen testen
- [ ] Container-Logs überwachen
- [ ] Netzwerkverbindung prüfen
- [ ] Ressourcenauslastung prüfen
- [ ] CrowdSec-Sicherheitsprotokolle überprüfen

## Fazit

Diese umfassende XR-Entwicklungsumgebung bietet alles, was Sie benötigen, um moderne WebXR-Anwendungen mit vollständiger Kontrolle über Ihre Infrastruktur zu erstellen. Durch den Einsatz von Docker für die Containerisierung und Traefik als Reverse Proxy erhalten Sie:

- **Skalierbare Architektur**, die mit Ihren Projekten wächst
- **Professionelles Tooling** für die Zusammenarbeit im Team
- **Sicherheitsfunktionen** zum Schutz Ihrer Entwicklungsumgebung
- **Performance-Optimierungen** für XR-Workloads
- **Monitoring und Observability** für produktionsreife Deployments

Der Self-Hosted-Ansatz gewährleistet Datenschutz, Kontrolle und die Flexibilität, jede Komponente an Ihre spezifischen Bedürfnisse anzupassen. Egal, ob Sie VR-Erlebnisse, AR-Anwendungen oder Mixed-Reality-Lösungen entwickeln – diese Infrastruktur bietet ein solides Fundament für die professionelle XR-Entwicklung.

## Nächste Schritte

1. **Mit dem Basis-Projekttemplate starten** und die Komplexität schrittweise steigern
2. **CI/CD-Pipelines implementieren** für automatisiertes Testing und Deployment
3. **Monitoring-Dashboards hinzufügen**, um Performance und Ressourcenauslastung zu verfolgen
4. **Mit GPU-Beschleunigung experimentieren** für rechenintensive XR-Anwendungen
5. **Skalieren**, wenn Ihre Projekte und Ihr Team wachsen

Viel Erfolg bei der XR-Entwicklung! 🚀

Cart

Wishlist

Your wishlist is empty

Selbstgehostete XR-Entwicklungsumgebung mit Docker und Traefik

WebXR Composition Layers — High-Performance Rendering

WebXR Hand Tracking — Von Gelenken zu Gesten

WebXR Composition Layers — High-Performance Rendering

Einführung

Voraussetzungen

Hardware-Anforderungen

Software-Abhängigkeiten

Infrastruktur-Setup

Basis-Docker-Konfiguration