WebGL HDR: High Dynamic Range Rendering

Allgemein Schlagwörter: , , 0 Kommentare
Voiced by Amazon Polly

In der Computergrafik ist es üblich, Bilder in einem als RGB bekannten Format darzustellen. Eines der größten Probleme bei diesem Format ist die Schwierigkeit, realistische Lichtszenarien mit einem großen Farbspektrum (auch bekannt als Dynamikumfang einer Szene) zu simulieren. Zum Beispiel ist es mit traditionellen Methoden schwierig, eine wirklich helle Sonne und eine dunkle Gasse im gleichen Bild ohne Detailverlust einzufangen.

Ein High Dynamic Range Image (HDRI, HDR-Bild) ist eine Rastergrafik, die große Helligkeitsunterschiede detailreich wiedergibt. Digitale Bilder mit geringem Dynamikumfang werden als Low Dynamic Range Images oder LDR-Bilder bezeichnet.

HDR-Bilder können von Spezialkameras aufgenommen, als 3D-Computergrafiken künstlich erzeugt oder aus einer Belichtungsreihe von Fotos mit niedrigem Dynamikumfang (low dynamic range, LDR) rekonstruiert werden. HDR-Bildern können Über- und Unterbelichtungen vermieden, Bilddetails besser erhalten. Nicht nur die und Computergrafik, sondern auch Anwendungen wie die Medizin oder profitieren von diesen Vorteilen.

Grundsätzlich macht HDR helle Dinge wirklich hell, dunkle Dinge wirklich dunkel und hat noch genügend Kontrast, um Details zu erkennen.

HDR in

Three.js hat eine WebGL-Demo mit variabler Belichtung und grundlegender Gammakorrektur / Tone Mapping erstellt.

https://blog.r23.de/r23webvr/three.js-r93/examples/webgl_hdr.html
 

Die Stanford Memorial Church befindet sich auf dem Main Quad im Zentrum des Stanford University Campus in Stanford, Kalifornien, USA. Es wurde während der amerikanischen Renaissance von Jane Stanford als Denkmal für ihren Mann Leland errichtet.

Das Gebäude ist romanisch in seiner Form und byzantinisch in seinen Details, inspiriert von Kirchen in der Region Venedig, vor allem Ravenna. Seine Glasfenster und umfangreichen Mosaiken basieren auf religiösen Gemälden, die die Stanfords in Europa bewunderten.
https://de.wikipedia.org/wiki/Stanford_Memorial_Church

Farben mittels Shader in einen WebGL-Kontext hinzufügen

		<script id="fs-hdr" type="x-shader/x-fragment">

			uniform sampler2D   tDiffuse;
			uniform float       exposure;
			uniform float       brightMax;

			varying vec2  vUv;

			vec3 decode_pnghdr( const in vec4 color ) {

				// remove gamma correction
				vec4 res = color * color;

				// decoded RI
				float ri = pow( 2.0, res.w * 32.0 - 16.0 );

				// decoded HDR pixel
				res.xyz = res.xyz * ri;
				return res.xyz;

			}

			void main()	{

				vec4 color = texture2D( tDiffuse, vUv );
				color.xyz  = decode_pnghdr( color );

				// apply gamma correction and exposure
				//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );

				// Perform tone-mapping
				float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
				float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);
				color *= YD;

				gl_FragColor = vec4( color.xyz, 1.0 );

			}

		</script>

		<!-- HDR vertex shader -->

		<script id="vs-hdr" type="x-shader/x-vertex">

			varying vec2 vUv;

			void main()	{

				vUv  = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}

		</script>

Links

https://developer.mozilla.org/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen

HDR-Rendering

Neuere Grafikkarten unterstützen das hardwarebasierte Echtzeitrendern mit hohem Dynamikumfang, oft High Dynamic Range Rendering (HDRR) genannt. Dies ist besonders bei Computerspielen sinnvoll, bei denen der Spieler oft zwischen dunklen und hellen Szenen wechselt. Auch Grafikeffekte wie Linsenstreuung wirken mit HDRR realistischer. Die erreichbare Präzision und der Dynamikumfang sind durch die zur Verfügung stehende Rechenleistung beschränkt.

In der gekauften Schulung lernen wir das HDR-Rendering in Section 4 – Chapter 2 – Lighting and HDR.mp4.

Links

HDR-Fotografie (Heise Foto)
High Dynamic Range Image Encodings (Greg Ward, Anyhere Software) – Vergleich verschiedener HDR-Kodierungen (englisch)

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

WebGL HDR: High Dynamic Range Rendering
Foto: Screenshot Beispiel WebGL HDR 93 von three.js

Wie können wir Ihnen helfen?

Sie wollen online richtig verkaufen? Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder (VR) Projektes! Egal ob Produktfotografie, 3D Scan Service, 3D-Visualisierung oder fertige 3D Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.

Wünschen Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen, nutzen Sie einfach unser Anfrageformular.



Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen mir damit eine große Freude!
R23
R23

Schreibe einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Senden Sie uns Ihre Videonachricht!

Sie können im r23:Blog Ihren Textkommentar mit einer Videonachricht ergänzen! Diese Nachricht kann bis zu 90 Sekunden lang sein.

Wir freuen uns auf Sie!

Hinweis: Das r23:Blog setzt auf selbstlernende Systeme für die reale Welt.
Mit einer Künstlichen Intelligenz (KI) wird eine Abschrift von Ihrer Videonachricht erstellt.
Für ein optimales Erlebnis von r23:Blog und den dazugehörigen Applikationen wird die Verwendung von Firefox in der aktuellen Version empfohlen. Unterstützt werden weitere aktuelle Browser.

Anleitung: Videonachrichten im r23:Blog

R23

Aktuell