HDR-Hintergrund online erstellen

Gestalten Sie physikalische HDR-Himmel und Studiobeleuchtungen direkt im Browser. Echtzeit-3D-PBR-Materialvorschau und kostenloser Radiance .hdr Download.

Licht-Voreinstellungen (Presets)
{{ getPresetName(item.id) }}
{{ getPresetTag(item.id) }}
Linksklick & Ziehen: 360° Drehung | Mausrad: Zoom
Auf die Karte klicken, um Sonne oder Licht zu platzieren
☀️ Sonnen- & Atmosphären-Eigenschaften
Sonnenhöhenwinkel (Elevation) {{ skyParams.sunElevation }}°
Sonnen-Azimutwinkel {{ skyParams.sunAzimuth }}°
HDR-Sonnenintensität {{ skyParams.sunIntensity }}x
Sonnenscheibengröße {{ skyParams.sunSize }}
Atmosphärische Trübung (Turbidity) {{ skyParams.turbidity }}
🎨 Himmels- & Umgebungsfarben
Zenit
{{ skyParams.skyZenithColor }}
Horizont
{{ skyParams.skyHorizonColor }}
Boden
{{ skyParams.groundColor }}
Sonne
{{ skyParams.sunColor }}
💡 Studio-Setup & Scheinwerfer
Basis-Umgebungslicht
{{ studioParams.ambientColor }}
Basis-Umgebungsintensität {{ studioParams.ambientIntensity }}
Farbe & Stärke
{{ light.intensity }}x
Lichtstärke {{ light.intensity }}
Größe / Streuung {{ light.size }}°
Kantenweichheit (Softness) {{ light.softness }}
🖼️ Panoramabild in HDR umwandeln
Klicken oder Panoramabild hierher ziehen
Unterstützt äquirektanguläre JPG / PNG / WebP (2:1 Seitenverhältnis empfohlen)
Geladen: {{ imageParams.fileName }}
Dynamikbereich-Verstärker {{ imageParams.dynamicBoost }}x
Sonnenintensität {{ imageParams.sunIntensity }}x
HDRI-Datei exportieren (.hdr)
Radiance RGBE (32-bit)

Was ist HDR / HDRI? Warum ist es für 3D-Rendering unverzichtbar?

Ein HDR- (High Dynamic Range) oder HDRI-Bild (High Dynamic Range Image) ist ein 360-Grad-äquirektanguläres Panoramabildformat, das reale physikalische Lichtstärken und enorme Helligkeitsunterschiede speichert. Während herkömmliche JPG- oder PNG-Bilder auf Werte zwischen 0 und 255 (Standard-Dynamikbereich / LDR) begrenzt sind, verwendet das professionelle Radiance .hdr-Format eine 32-Bit-Fließkomma-RGBE-Kodierung. Dadurch können sowohl zarte Umgebungslichtwerte als auch die blendende Helligkeit des Sonnenkerns mit Zehntausenden Nits physikalisch exakt abgebildet werden.

In modernen physikbasierten Render-Engines (PBR) wie Blender (Cycles/Eevee), Three.js, Unreal Engine 5, Cinema 4D, Maya und Godot bietet eine hochwertige HDR-Umgebungskarte:

  • Realistische bildbasierte Beleuchtung (IBL, Image-Based Lighting): Umhüllt 3D-Objekte mit einer natürlichen 360-Grad-Umgebungsbeleuchtung und präzisen Kontaktschatten.
  • Physikalisch korrekte Reflexionen & Glanzlichter: Metalle, Glas und Autolacke spiegeln die Umgebung mit scharfen Sonnen-Highlights und weichen Verläufen wider.
  • Effizienter Beleuchtungs-Workflow: Macht das mühsame manuelle Platzieren zahlloser Füll- und Spotlichter überflüssig – ein einziges HDRI liefert fertige Studioqualität.

Wie erstellt man HDR-Hintergründe online?

Klassischerweise erforderte die Erstellung eines HDRI-Panoramas Spezialkameras, Belichtungsreihen (Bracketing) und komplexe Stitching-Software. Mit unserem Online-HDR-Hintergrundgenerator können Sie Sonnenwinkel, Studio-Softboxen oder bestehende Panoramabilder direkt im Webbrowser in Sekundenschnelle anpassen – komplett clientseitig mit 3D-Echtzeitvorschau und echtem Radiance .hdr Export.

🎨 8 Kuratierte Beleuchtungs- und Umgebungsvoreinstellungen

Das Tool bietet fertige Lichtsetups für Naturhimmel, Fotostudios und Sci-Fi-Szenarien:

  • ☀️ Goldene Stunde (Golden Hour): Warme, tief stehende Abendsonne mit Übergang zu tiefblauem Zenit für cinematische Gegenlichtstimmungen und lange Schatten.
  • 🌞 Klarer Mittagshimmel (Sunny Sky): Heller Sonnenzenit mit reiner Rayleigh-Atmosphärenstreuung für knackiges Sonnenlicht bei Architektur-Renderings.
  • 🌌 Tiefe Dämmerung (Deep Twilight): Magentafarbener Horizontglanz im Übergang zur Nacht – ideal für Fahrzeuge und edle Produktinszenierungen.
  • 🌫️ Morgennebel (Morning Mist): Weiches diffuses Licht mit hoher Dunsttrübung in Pastelltönen für verträumte, atmosphärische Tiefe.
  • 💡 Klassisches 3-Punkt-Studio (Studio Three-Point): Hauptlicht, kaltes Fülllicht und warmes Kantenlicht zur perfekten Konturierung von 3D-Modellen und Charakteren.
  • ⚪ Reines Weißes Studio (Studio Clean White): Große Decken-Softbox mit gleichmäßiger Frontaufhellung für saubere E-Commerce- und Industrie-Renderings.
  • 🟣 Cyberpunk-Neon (Cyber Neon): Kontraststarke Cyan- und Magenta-Lichtquellen für Sci-Fi-Mechas und futuristische Konzeptkunst.
  • 🟢 Polarlichternacht (Aurora Night): Dunkler Sternenhimmel über einem smaragdgrünen Polarlicht-Horizont für mystische Fantasiewelten.

🌐 Interaktive 3D-PBR-Materialkugeln

Der integrierte Three.js-Viewport bietet Standard-Testkörper zur Überprüfung der Licht- und Reflexionseigenschaften:

  • 🪞 Chrom-Spiegelkugel (Chrome Mirror): Nahezu Null-Rauheit und 100% Metallizität zur Kontrolle von Reflexionsschärfe und Sonnen-Highlights.
  • 🪙 Mattmetall-Kugel (Rough Metal): Mittlere Rauheit (0.35) zur Demonstration von Glanzübergängen auf gebürsteten Metallflächen.
  • 🍶 Glänzende Keramikkugel (Glossy Ceramic): Dielektrische Grundfarbe mit Klarlack-Glanz zur Beurteilung des diffusen Umgebungslichts (IBL).
  • 🥨 Torusknoten (Torus Knot): Komplexe Geometrie zur Begutachtung von Selbstverschattung und Lichtkrümmung auf geschwungenen Oberflächen.

Wichtigste Funktionen & Technische Vorteile

☀️ Physikalische Atmosphären- & Sonnensimulation

Echtzeitberechnung von Rayleigh- und Mie-Streuung mit flexibler Anpassung von Sonnenhöhe, Azimut, Haze und Boden-Albedo.

💡 Studio-Lichtarray mit Softboxen

Platzieren Sie Haupt- und Kantenlichter mit sphärischen Koordinaten, Farbtemperatur, HDR-Multiplikator und weichen Verläufen.

🌐 3D-PBR-Echtzeitvorschau per WebGL

Three.js-Viewport mit voller 360°-Kamerasteuerung und Materialkugeln zur sofortigen Reflexions- und Schattenprüfung.

⚡ 100% Clientseitig & Maximaler Datenschutz

Sämtliche Fließkomma-Berechnungen und die binäre RGBE-Kodierung erfolgen lokal auf Ihrem Gerät. Keine Server-Uploads, blitzschnell und sicher.

Wie nutzt man die exportierte .hdr-Datei in 3D-Software?

1. Verwendung in Blender

  1. Öffnen Sie Blender und wechseln Sie in den Bereich World Properties (Welteigenschaften) rechts.
  2. Klicken Sie auf den gelben Punkt neben Color und wählen Sie Environment Texture (Umgebungstextur).
  3. Klicken Sie auf Open (Öffnen) und wählen Sie Ihre heruntergeladene .hdr-Datei aus.
  4. Stellen Sie die Ansicht auf Rendered (Gerendert), um die Panoramabeleuchtung zu sehen.

2. Verwendung in Web-Projekten mit Three.js

Laden Sie die HDRI-Umgebung einfach mit dem RGBELoader:

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

new RGBELoader().load('dein_himmel.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;  // Panoramahintergrund
  scene.environment = texture; // PBR-Beleuchtung & Reflexion
});

Häufig gestellte Fragen (FAQ)

Q: Was ist der Unterschied zwischen .hdr und normalen .jpg-Bildern? {{ openFaq === 1 ? '▲' : '▼' }}
A: JPG-Dateien haben einen niedrigen Dynamikbereich (8-Bit LDR) mit maximaler Helligkeit bei 1.0 (255) und können keine realen Sonnenstrahlen oder präzise Kontaktschatten erzeugen. Die hier generierten .hdr-Dateien nutzen 32-Bit Radiance RGBE, wobei Lichtpunkte Werte weit über 30.0 bis 100.0+ erreichen können – für echte physikalische Lichtemission in 3D-Renderern.
Q: Welche Exportauflösung sollte ich wählen? {{ openFaq === 2 ? '▲' : '▼' }}
A: Wenn Sie die Datei primär für diffuse Umgebungsbeleuchtung (IBL) ohne scharfe Spiegelungen nutzen, genügen 1024×512 oder 512×256 bei minimaler Dateigröße. Für gestochen scharfe Chrom-Reflexionen oder als sichtbaren Hintergrund wählen Sie 2048×1024 (2K) oder 4096×2048 (4K).
Q: Werden Bilder auf einen Server hochgeladen? {{ openFaq === 3 ? '▲' : '▼' }}
A: Nein, überhaupt nicht! Sämtliche Berechnungen, Himmelsmathematik und Datei-Generierungen laufen rein lokal in Ihrem Browser über JavaScript. Null Datentransfer, komplett kostenlos und offline nutzbar.