Diese Frage habe ich mir immer wieder gestellt. Die Ber\u00fccksichtigung von unterschiedlichen Farbfehlsichtigkeiten spielt f\u00fcr Designer eine gro\u00dfe Rolle. Bei g\u00e4ngigen Farbkombinationen wie z.B. Rot- mit Gr\u00fcnt\u00f6nen wei\u00df man, dass es diese zu vermeiden gilt und im Internet gibt es eine Vielzahl an Definitionen und Erkl\u00e4rungen, wie sich eine Farbfehlsichtigkeit auswirkt. Doch weder die oberfl\u00e4chliche Theorie noch die anschaulichen Beispielbilder konnten meine Frage wirklich beantworten. Ich wollte das Gef\u00fchl und die Erfahrung der Farbfehlsichtigkeiten in der realen Welt erleben, um sie besser verstehen zu k\u00f6nnen. Im Alltag und bei Objekten und Situationen, die mir bekannt sind.<\/p>\n

Nachdem wir in letzter Zeit bereits \u00f6fter \u00fcber\u00a0Augmented Reality berichtet hatten<\/a>\u00a0und bereits unsere ersten\u00a0 Filter zum Eurovision Song Contest<\/a>\u00a0und\u00a0 Life Ball<\/a>\u00a0pr\u00e4sentiert haben, war es ein logischer Schritt, diese Technik zu verwenden, um diese Erfahrung zu realisieren.<\/p>\n

Somit war die Idee f\u00fcr einen Kamerafilter, welcher Farbfehlsichtigkeiten anhand eines Kamera-Live-Bildes simuliert, geboren. Damit wollen wir einerseits jedem Menschen die Erfahrung einer Farbfehlsichtigkeit zuteil werden lassen und andererseits zeigen, dass FaceFilter nicht nur f\u00fcr Spiel und Spa\u00df eingesetzt werden m\u00fcssen. Vielmehr ist es auch ein perfektes Werkzeug, um Bewusstsein f\u00fcr bestimmte Themen zu schaffen.<\/p>\n

Wer seine eigene Umgebung in unterschiedlichen Farbfehlsichtigkeiten entdecken m\u00f6chte, der kann unseren\u00a0 Filter f\u00fcr Instagram<\/a>\u00a0und\u00a0 Facebook<\/a>\u00a0ausprobieren. Mit den beiden Links werdet ihr automatisch in die Instagram- bzw. Facebook-Kamera weiter geleitet. Wer uns auf\u00a0 Instagram folgt<\/a>, entdeckt den Filter auch unter den Effekten in der Instagram-Kamera. Wir sind gespannt, wie eure Welt der Farbenblindheit aussieht. Zeigt es uns mit unserem Filter und verlinkt uns in euren Fotos.<\/p>\n

In diesem Blogpost m\u00f6chte ich \u00fcber meine Erfahrungen und die Herausforderungen bei der Umsetzung des Filters berichten. Unsere bisher umgesetzten Filter basierten, mehr oder weniger, auf statischem Bildmaterial. Neben den Tracking Funktionen, also dem Erkennen von Position und Ausrichtung des Gesichtes, wurden Bilder, welche zuvor aufbereitet wurden, \u00fcber das Gesicht gelegt. Dieses mal musste jedoch das aktuelle Bild der Kamera live analysiert und bearbeitet werden. Ich musste mich also mit dem Thema \u201cShader\u201d besch\u00e4ftigen, das ich bisher erfolgreich ignorieren konnte.<\/p>\n

Was ist ein Shader?<\/h2>\n
Einfach gesagt berechnen Shader in der Computergrafik das Erscheinungsbild von Objekten. Hierf\u00fcr ist eine komplexe Abfolge von Berechnungen (Position des Elements, Reflexion, Beleuchtung, Farbe, etc) notwendig. Diese Berechnungen m\u00fcssen f\u00fcr jeden Pixel, der dargestellt wird, durchgef\u00fchrt werden. Somit kann er individuell, je nach Position im Raum, unterschiedliche Ergebnisse liefern. Zum Gl\u00fcck programmieren wir keine gesamten 3D-Welten, wie das in Computerspielen oder VR der Fall w\u00e4re. Einige Auswirkungen wie Beleuchtung oder Reflexion werden in unserem Fall also ohnehin bereits durch das Kamerabild geliefert. Um das tats\u00e4chliche Bild so real wie m\u00f6glich mit Farbfehlsichtigkeiten wiedergeben zu k\u00f6nnen, wird also lediglich die Farbe des einzelnen Pixels ver\u00e4ndert. Doch wie muss die Farbe jedes Pixels ge\u00e4ndert werden, um eine Farbfehlsichtigkeit zu simulieren?<\/p>\n
Tsch\u00fcss sRGB – Hallo Wellenl\u00e4ngen<\/h2>\n
Um diese Frage zu beantworten, hatte ich lange recherchiert. Um zu verstehen, wie sich Farbfehlsichtigkeiten auswirken, muss man wissen, warum es \u00fcberhaupt dazu kommt. An dieser Stelle m\u00f6chte ich nur ganz kurz unseren Biologieunterricht aus der Schule auffrischen.<\/p>\n
Wie wir wissen, entstehen Bilder, die wir sehen, mithilfe unserer Augen. Das Licht, welches aus der Umgebung reflektiert wird, trifft auf unsere Netzhaut. Dort \u201c\u00fcbersetzen\u201d Rezeptoren, sogenannte Zapfen und St\u00e4bchen, das Licht in Signale, welche an das Gehirn weitergeleitet und dort zu einem Bild zusammengef\u00fcgt werden. W\u00e4hrend die St\u00e4bchen f\u00fcr die Erkennung von Hell und Dunkel verantwortlich sind, erm\u00f6glichen uns die Zapfen die Erkennung von Farben. Genau das ist der Punkt, der f\u00fcr die Farbfehlsichtigkeiten relevant ist. Das Auge enth\u00e4lt drei Arten von Zapfen f\u00fcr die unterschiedlichen Wellenl\u00e4ngen des Lichts – S-Zapfen f\u00fcr kurze (short) Wellenl\u00e4ngen (Blaut\u00f6ne), M-Zapfen f\u00fcr mittlere (medium) Wellenl\u00e4ngen (Gr\u00fcnt\u00f6ne) und L-Zapfen f\u00fcr lange (long) Wellenl\u00e4ngen (Rott\u00f6ne). Sind nun bestimmte Zapfen-Arten defekt oder nicht vorhanden, k\u00f6nnen die entsprechenden Farben nicht oder nur eingeschr\u00e4nkt verarbeitet werden. Bei Tritanopie (Blaublindheit) betrifft dies die S-Zapfen, bei Deuteranopie (Gr\u00fcnblindheit) die M-Zapfen und bei Protanopie (Rotblindheit) die L-Zapfen. Bei der g\u00e4ngigen Formulierung \u201cRot-Gr\u00fcn-Schw\u00e4che\u201d werden also Deuteranopie und Protanopie zusammengefasst, da diese Farben schwer bis gar nicht erkannt oder unterschieden werden k\u00f6nnen.<\/p>\n
Wir wissen jetzt also, dass das Auge mit einem LMS-Farbraum arbeitet, welches ich verwenden konnte. Ebenfalls bekannt ist, dass Displays, also unsere Handys und Handykameras, mit einem sRGB-System arbeiten. Da das Ausgangsbild also im sRGB-Farbraum ausgeliefert wird, sich die Farbfehlsichtigkeit aber im LMS-Farbraum auswirkt, musste ich eine M\u00f6glichkeit finden, das Ausgangs-sRGB-Bild in ein LMS-Bild umzurechnen.<\/p>\n
Alles Mathematik<\/h2>\n
Und wieder musste ich mich einem gehassten Thema widmen, dem ich so lange entgehen konnte – den Vektoren und Matrizen. Die Frage, wozu ich all das w\u00e4hrend des Studiums \u00fcberhaupt lernen musste, hatte ich l\u00e4ngst begraben. Doch endlich hatte ich einen Anwendungsfall gefunden. Da das Farbempfinden aufgrund der physischen Funktionsweise von St\u00e4bchen und Zapfen sehr subjektiv ist, bedarf es einer Normierung und Darstellung aller sichtbaren Farben. Daf\u00fcr gibt es, je nach Einsatzgebiet, unterschiedliche Ans\u00e4tze.<\/p>\n
Neben den bereits erw\u00e4hnten sRGB- und LMS-Farbr\u00e4umen existieren viele weitere f\u00fcr unterschiedliche Anwendungen. Druckereien verwenden etwa den CMYK Farbraum, in dem alle Farben als eine Kombination aus Cyan, Magenta, Gelb und Schwarz definiert sind. Der HSV-Farbraum unterteilt die Farben in Farbwert (hue), S\u00e4ttigung (saturation) und Helligkeit (value).<\/p>\n
Ein erster Normierungsversuch bzw. Standard geht auf das Jahr 1931 zur\u00fcck. Ausgehend von der Funktionsweise der Zapfen wurde das XYZ-Farbmodell entwickelt, welches sp\u00e4ter die Ausgangsbasis f\u00fcr viele andere Farbr\u00e4ume, darunter auch der sRGB-Farbraum, wurde. Ein gemeinsamer Nenner zwischen LMS und sRGB war somit gefunden – der XYZ-Farbraum.<\/p>\n
Zur\u00fcck zu unserem Shader. Wie gesagt, wird hierbei jeder Pixel in seinem Rot- Gr\u00fcn und Blau-Wert dargestellt – man spricht dann auch von einem Vektor. Durch die Multiplikation dieses sRGB-Vektors mit einer Transformationsmatrix kann die Farbe als Vektor im XYZ-Farbraum abgebildet werden.<\/p>\n<\/div>\n<\/div>\n
$\"\"$ <\/div>\n
\n
\n
Danach kann der XYZ-Vektor wiederum mit einer \u201cHunt-Pointer-Estevez Transformationsmatrix\u201d multipliziert werden um ihn im LMS-System darzustellen.<\/p>\n<\/div>\n<\/div>\n
$\"\"$ <\/div>\n
\n
\n
Endlich haben wir einen Pixel aus dem Kamerabild so umgerechnet, wie er auch im Auge verarbeitet wird. Anstatt von je einem Wert f\u00fcr Rot, Gr\u00fcn, und Blau besitzt der Vektor nun Werte, wie stark die L-, M- und S-Zapfen bei der aktuellen Farbe angeregt werden. Wie zuvor bereits angesprochen, basieren Farbfehlsichtigkeiten auf einer eingeschr\u00e4nkten Funktion der Zapfen. Um die aktuelle LMS-Farbe nun mit einer Farbfehlsichtkeit zu simulieren, muss eine entsprechende Simulationsmatrix mit dem Vektor multipliziert werden. Um einen starken Effekt zu erreichen, wird eine komplette Farbenblindheit simuliert.<\/p>\n
$\"\"$ <\/p>\n<\/div>\n
Nachdem wir den Farbwert nun mit einer Farbenblindheit simuliert haben, m\u00fcssen wir die Transformationen umkehren um ihn wieder am Display ausgeben zu k\u00f6nnen. Mithilfe der entsprechenden inversen Transformationsmatrizen wird der angepasste Wert zun\u00e4chst von LMS zur\u00fcck in XYZ und danach weiter in sRGB zur\u00fcckgewandelt. Somit ist unser urspr\u00fcnglicher sRGB-Wert aus der Kamera in einem sRGB-Wert mit simulierter Farbenblindheit f\u00fcr die Ausgabe bereit.<\/p>\n
All diese Berechnungen laufen f\u00fcr jeden einzelnen Pixel, der von der Kamera aufgenommen wird, ab. Gl\u00fccklicherweise sind Shaderberechnungen recht performant und wir kommen zu einer fl\u00fcssigen \u00dcbertragung. All diese Transformationsmatrizen habe ich mir nat\u00fcrlich nicht selbst ausgedacht oder berechnet. Als Ausgangsbasis f\u00fcr dieses Projekt bin ich auf einen sehr hilfreichen Artikel gesto\u00dfen. Wer noch tiefer in die Materie eintauchen m\u00f6chte und wissen will, wie sich die Transformationsmatrizen genau herleiten, dem empfehle ich\u00a0unter diesem Link die Color Blindness Simulation Research<\/a>.<\/p>\n
Neben den f\u00fcr mich recht komplexen, mathematischen Formeln und Berechnungen konnte ich durch dieses Projekt viel \u00fcber Farbr\u00e4ume und die Funktion von Shadern lernen. Gerade letztgenannter Punkt wird auch bei anderen, komplexeren AR-Anwendungen immer relevanter und mich daher weiterhin besch\u00e4ftigen. Wer tiefer in dieses Thema eintauchen m\u00f6chte, dem kann ich\u00a0 the book of shaders<\/a>\u00a0weiterempfehlen. W\u00e4hrend meiner Recherchen wurde mir dieses Buch immer wieder empfohlen. Es gibt einen guten und verst\u00e4ndlichen \u00dcberblick \u00fcber die Funktionsweise und Programmierung von Shadern. Vor allem auch f\u00fcr diejenigen, die am VR Bereich Interesse haben, sind Shader ein unverzichtbarer Bestandteil, um realistische Ergebnisse zu erzielen.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Diese Frage habe ich mir immer wieder gestellt. Die Ber\u00fccksichtigung von unterschiedlichen Farbfehlsichtigkeiten spielt f\u00fcr Designer eine gro\u00dfe Rolle. Bei g\u00e4ngigen Farbkombinationen wie z.B. Rot- mit Gr\u00fcnt\u00f6nen wei\u00df man, dass es diese zu vermeiden gilt und im Internet gibt es eine Vielzahl an Definitionen und Erkl\u00e4rungen, wie sich eine Farbfehlsichtigkeit auswirkt. Doch weder die oberfl\u00e4chliche […]<\/p>\n","protected":false},"author":15,"featured_media":1148,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[67,74],"tags":[183],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1147"}],"collection":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/comments?post=1147"}],"version-history":[{"count":1,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1147\/revisions"}],"predecessor-version":[{"id":1149,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1147\/revisions\/1149"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media\/1148"}],"wp:attachment":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media?parent=1147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/categories?post=1147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/tags?post=1147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}