Abstract
Photography is a hobby that cannot be mastered quickly: composition, context, and lighting conditions make it a complex field to learn. Added to this is the technical aspect hidden behind the housing of modern cameras. This includes, for example, autofocus technology, which significantly influences a camera's handling and reliability. Since photographers often lack an understanding of this technology, I set myself the task of making the autofocus mechanism tangible and comprehensible.
To break open this „black box,“ I developed an interactive storytelling website that explains the structure and functioning of autofocus through 3D visualizations and animations. The content was animated in Blender and realized using a self-constructed, photorealistic 3D model of a camera and lens, which I created via photogrammetry and subsequently remodeled in Blender. The website is complemented by a 3D-printed, interactive camera prototype operated via a rotary wheel, enabling a haptic, hands-on experience.
Through this approach, technical knowledge is not merely conveyed passively but made actively experienceable: users explore the functioning of autofocus visually and interactively, afterward viewing their own camera from a new perspective. The target audience includes both hobbyist and full-time photographers, as well as educators who can integrate the content into their lectures. In this way, the project combines technical understanding with interactive knowledge transfer, making complex camera technology genuinely graspable for the first time.
Abstract - Deutsch
Fotografieren ist ein Hobby, das sich nicht schnell erlernen lässt: Komposition, Kontext und Lichtverhältnisse machen es zu einem komplexen Lernfeld. Hinzu kommt der technische Aspekt, der sich bei modernen Kameras hinter dem Gehäuse verbirgt. Etwa die Technologie des Autofokus, die Bedienung und Zuverlässigkeit einer Kamera maßgeblich beeinflusst. Da Fotograf:innen häufig nicht das Verständnis dieser Technik haben, machte ich es mir zur Aufgabe, den Autofokus-Mechanismus greifbar und verständlich zu vermitteln.
Um diese „Black Box„ aufzubrechen, entwickelte ich eine interaktive Storytelling-Website, die den Aufbau und die Funktionsweise des Autofokus anhand von 3D-Visualisierungen und Animationen erklärt. Die Inhalte wurden in Blender animiert und mit einem selbst konstruierten, fotorealistischen 3D-Modell einer Kamera und eines Objektivs umgesetzt, das ich mittels Photogrammetrie erstellte und anschließend in Blender nachmodellierte. Ergänzt wird die Website durch einen 3D-gedruckten, interaktiven Kamera-Prototyp, der über ein Drehrad bedient wird und so eine haptische, hands-on Erfahrung ermöglicht.
Durch diesen Ansatz wird technisches Wissen nicht nur passiv vermittelt, sondern aktiv erfahrbar gemacht: Nutzer:innen erkunden die Funktionsweise des Autofokus visuell und interaktiv und betrachten ihre eigene Kamera anschließend aus einer neuen Perspektive. Zielgruppe sind dabei sowohl Hobby- als auch Vollzeitfotograf:innen sowie Lehrende, die die Inhalte in ihre Vorlesungen integrieren können. So verbindet das Projekt technisches Verständnis mit interaktiver Wissensvermittlung und macht komplexe Kameratechnik erstmals wirklich (be)greifbar.
Prototyp
Die Bilder auf der Website sind mit verringerter Qualität hochgeladen.
The images on the website have been uploaded at a lower resolution.
Dokumentationsfilm
Fotografische Dokumentation
Pitch Deck
User Journey
_________________________
Ideenfindung
https://www.figma.com/board/hnwXhe8nDQ0sfRgIlyI1PW/Interaction?node-id=0-1&t=2n3gSyj8uzC7GPHi-1
Zu dem Hauptthema Bewegung habe ich mir drei Kategorien überlegt, die mich besonders interessieren.
Informationsbasis
Der Autofokus an modernen Kameras läuft über den Bildsensor. Um die Funktionsweise des Autofokus zu verstehen, begann ich bei traditionellen DSLR-Kameras, die noch mehr Einzelteile verbaut haben als moderne Systemkameras. Dazu gehören mehrere Spiegel zur Lenkung des Lichteinfalls, sogenannte Teilerlinsen, die das Licht modifizieren, sowie die Phasenerkennungspunkte, an denen die Phasendifferenz gemessen wird.
Diese wird dann genutzt, um die Entfernung zum Objekt zu bestimmen und die Objektivmotoren entsprechend zu steuern, um das Objektiv zu verstellen. Dies nennt man den sogenannten Phasenerkennungsautofokus. Es gibt jedoch noch weitere Autofokus-Typen, die dabei helfen, den richtigen Fokus zu errechnen.
Die Objektivmotoren im Kamera-Objektiv bewegen die Linsen anschließend so, dass das Motiv scharf zu sehen ist.
Über Videos und Websites erfuhr ich mehr über den Aufbau und die Funktionsweise des Autofokus moderner Systemkameras.
Eine Informationsseite des Kameraherstellers Canon sowie ein Video klärten mich darüber auf, wie der weit verbreitete CMOS-Sensor funktioniert. Dieser verwendet Pixel sowohl zur Bildgebung als auch für den Phasendetektions-Autofokus.
Außerdem überlegte ich mir, woher ich meine Visualisierungen des Sensors bekomme. Dafür nutzte ich Bauanleitungen von „iFixit„, auf denen der Aufbau technischer Geräte gut zu erkennen ist.
Zusätzlich kam mir die Idee, Explosionszeichnungen der einzelnen Schritte zu erstellen, mit denen man sich den Aufbau besser vorstellen kann. Als Referenz nahm ich mir den YouTuber „Epic Spaceman„. Durch verschiedene Ebenen wie Zeit und Größe werden komplexe Abläufe greifbar gemacht.
Moodboards
Für das Design habe ich drei Moodboards erstellt. Das erste enthält Elemente im Konstruktionszeichnungs-Stil – weiße Outlines, Explosionszeichnungen und eher technische Darstellungen. Dazu kommen hervorgehobene Elemente in einem eher realistischen Stil.
Das zweite Moodboard setzt sich aus organischer Formgebung und auffälligen Farben zusammen. Dabei stellte ich mir die Visualisierungen eher farbenfroh und auffällig vor.
Moodboard 3 enthält realistische Bilder von Kameras, die von beschreibenden Texten umgeben sind. Die Texte sind auffällig gestaltet und mit einer markanten Farbe hervorgehoben.
Letztendlich entschied ich mich für das erste Moodboard, da mir der Stil mit den dünnen Outlines gefiel und er den technischen Aspekt des Autofokus gut vermittelt.
Mein erster Ansatz war es, Animationen mit Blender zu erstellen und diese später zu einer Website zusammenzusetzen. Den Effekt für die Outlines konnte ich über einen Blueprint-Shader in Blender nachbauen. Dafür fand ich ein passendes Tutorial und versuchte, ein Testmodell mit dem Shader nachzubauen.
Kamera live auslesen
Ich machte es mir zur Aufgabe, meine Kamera live auslesen zu können, um Daten wie z. B. die Bewegung des Fokusrings auszuwerten.
Für einen solchen Zweck stellt Sony ein SDK (Software Development Kit) zur Verfügung. Mit diesem lassen sich verschiedene Daten auslesen und verändern.
Dafür recherchierte ich nach ähnlichen Ansätzen und fand dabei einen Reddit-Post, in dem eine Kamera als Fotobox verwendet wurde.
Mit KI-Chatbots versuchte ich, das SDK zu nutzen, um das Drehen an einem Objektivring in Echtzeit-Daten umzuwandeln. Leider funktionierte dies nur bedingt, da es keine vorgefertigten, ausführbaren Programmdateien gab und ich eine Anwendung dafür hätte schreiben müssen. ChatGPT konnte das leider auch nicht für mich erledigen. Schlussendlich ließ ich mir eine ausführbare Programmdatei für meinen Windows-PC schreiben, die ich jedoch nicht ausführen konnte. Für diesen Ansatz hätte ich noch mehr Zeit investieren müssen, wozu es während des Semesters aber nicht mehr kam.
3D-Rendering im Browser
Der Ansatz, Blender-Animationen auf einer Website darzustellen, gefiel mir gut, da ich bereits Erfahrung mit dem Programm hatte. Es stellte sich jedoch heraus, dass sich die Inhalte auf diesem Weg nicht performant im Browser darstellen ließen.
Deshalb entschied ich mich, das AR-Framework „A-Frame„ zu testen, das im Vergleich zu „Three.js“ einfacher zu bedienen ist. Meine ersten Tests führte ich mit einem 3D-Kamera-Sensor durch, den ich zuvor in Blender konstruiert hatte.
Parallel dazu wollte ich für mein Projekt einen Look mit weißen Outlines umsetzen. Auf der Suche nach passenden Referenzen bin ich schnell auf den Einsatz von Shadern gestoßen.
Auf der Plattform „Shadertoy„ habe ich gezielt nach Wireframe-Shadern gesucht und einen gefunden, der meiner Vorstellung sowie meinem Moodboard sehr nahekam. Auf dieser Grundlage habe ich mit Hilfe von Claude Code einen funktionierenden Shader für A-Frame entwickelt, wobei die eigentliche Code-Anpassung nicht von mir selbst, sondern durch Claude Code erfolgte.
Meine ersten Versuche, den Shader direkt innerhalb von A-Frame umzusetzen, führten jedoch nicht zum gewünschten Ergebnis. Deshalb bin ich auf Three.js zurückgegangen, worauf A-Frame aufbaut, und habe den Shader dort in einer separaten JavaScript-Datei außerhalb des HTML-Dokuments implementiert.
Das eigentliche 3D-Objekt habe ich anschließend über eine GLB-Datei eingebunden und mit dem Shader-Material versehen, sodass der gewünschte Outline-Look sichtbar wurde.
Im nächsten Schritt habe ich die Three.js-Szene wieder in A-Frame umgesetzt, da sich dort Animationen einfacher erstellen lassen und weniger tiefgehendes Code-Verständnis nötig ist. Das hat funktioniert, allerdings führte mich der Shader zum nächsten Problem: Ich konnte kein weiteres Objekt ohne den Shader einfügen, wie es eigentlich geplant war. Nach längerer Fehlersuche stellte ich fest, dass A-Frame nur eine einzige Render-Phase zulässt – wodurch es nicht möglich ist, normale Objekte parallel zum Shader-Objekt darzustellen.
3D-Scan
Natürlich benötigte ich für die Erklärung ein 3D-Kameramodell. Auf den Plattformen „Free3D„ und „TurboSquid“ gab es zwar Kameras zum Herunterladen, dafür aber mit schlechter Qualität oder zu einem zu hohen Preis, weshalb ich mich dafür entschied, das Modell selbst zu erstellen.
Ich nahm meine eigene Kamera als Referenz und probierte das kostenlose Photogrammetrie-Programm „Reality Capture„ aus. Mit diesem kann man viele Einzelbilder zu einem 3D-Modell zusammenführen.
Meine ersten Tests waren nicht schlecht, wiesen aber Fehler auf, wie das schlechte Erkennen von Oberflächen. Das Problem dabei war, dass durch schlechte Lichtverhältnisse Schatten entstanden, in denen das Programm nichts interpretieren konnte. Außerdem hatte ich zu wenige Bilder aufgenommen.
Nach mehreren Fehlversuchen gelang es mir aber, einen guten Scan durchzuführen. Diesmal stellte ich meine Kamera auf ein Stativ und machte mit einem 50mm-Objektiv Fotos an einer schattigen Stelle neben dem Haus.
Die Fotos übertrug ich in das Programm und ließ die Szene berechnen, wodurch ich ein Gaussian-Splatting-Modell erhielt. Um mehr Details zu erhalten, maskierte ich zunächst eine Seite des Modells und wiederholte den Vorgang anschließend für die andere Seite: Dafür fotografierte ich die Unterseite der Kamera und maskierte auch diese Aufnahmen. Beide maskierten Teilmodelle fügte ich danach in einer neuen Szene zusammen. Da dies beim ersten Versuch nicht auf Anhieb funktionierte, musste ich sogenannte Kontrollpunkte anpassen, damit beide Modelle korrekt zueinander ausgerichtet wurden.
Die gleichen Schritte wiederholte ich dann noch einmal mit dem Objektiv. Dabei war das Modell nicht so detailreich wie bei der Kamera, aber das reichte mir für den nächsten Schritt.
Als Test setzte ich das Kamera-Gehäuse in die A-Frame-Szene. Das Aussehen gefiel mir grundsätzlich, entsprach aber noch nicht ganz meinen Ansprüchen. Durch die hohe Detaildichte des Modells war es schwierig, gezielt einzelne Fokuspunkte darauf zu setzen.
Kamera Modellieren
Deswegen entschied ich mich dazu, die Kamera komplett in Blender zu konstruieren.
Ich begann damit, das Photogrammetrie-Mesh in den Hintergrund zu legen und den Hauptkörper zu modellieren. Dazu kamen dann die Knöpfe und im nächsten Schritt Bevels, um die harten Kanten abzurunden.
Als nächstes folgte das Objektiv. Dabei ging ich genauso vor wie bei der Kamera: zuerst das Objektiv-Mesh in den Hintergrund setzen und anschließend darauf modellieren.
Zusammen sahen die Objekte sehr gut in der A-Frame-Szene aus. Da ich dafür jedoch eine zusätzliche Render-Szene benötigt hätte, wäre die einzige Option gewesen, zurück zu Three.js zu wechseln. Da die Zeit dafür jedoch knapp wurde, entschied ich mich, wieder zur Option mit den Blender-Animationen zu wechseln.
In den nächsten Bildern sind einige meiner Fehlversuche mit der Kamera und A-Frame zu sehen.
Blender-Animationen
Für die Erklärung der Schritte erstellte ich mir ein Storyboard. Dieses änderte ich im Verlauf noch ab, da ich manche der skizzierten Schritte letztendlich gar nicht benötigte.
Als Nächstes setzte ich ein Skript als Website um, auf der man den Ablauf der Storytelling-Seite sehen kann.
Animationen
In Blender legte ich mehrere Szenen an, in denen ich jeweils eine Animation erstellte.
Meine erste Animation ist eine einfach rotierende Kamera, die ich als Hero Section der Website benötigte. Den Outline-Effekt erzeugte ich, indem ich die Kamera und den Szenenhintergrund schwarz einfärbte.
Alle Elemente legte ich dabei in eine Collection, bis auf ein Element namens „Grease Pencil„ – „Stroke“. Dieses färbte ich weiß ein und fügte ihm einen „Lineart„-Modifier hinzu. Dieser greift auf die Kamera-Collection zu, wodurch die Kamera im Ansichtsfenster eine weiße Outline erhält.
Die weiteren Animationen sind Explosionszeichnungen, das Drücken des Auslösers und die Erklärung der Phasenerkennung.
Für die Erklärung der Phasenerkennung nutzte ich mein selbst erstelltes Modell des Sensors und fügte den einzelnen Pixeln eine Bildebene hinzu, damit der Eindruck entsteht, es handle sich um das Bild, das auf dem Sensor zu sehen ist. Das Bild ist ein selbstgemachtes Foto einer Blume. Dieses taucht auch in der ersten und letzten Animation auf, um zu zeigen, wie es von unscharf zu scharf gestellt wird.
3D-Druck
Für die Werkschau wollte ich eine reale Kamera für die Interaktion mit der Website verwenden. Da dies jedoch mit dem SDK von Sony nicht funktionierte, entschied ich mich, stattdessen eine zusätzliche 3D-gedruckte Kamera zu konstruieren, die über ein Rad die Website steuert.
Ich machte mir einen Plan, bei dem der vordere Teil des Objektivs fest sitzen sollte, sodass sich nicht das komplette Objektiv drehen lässt. Dafür benötigte ich eine Konstruktion, die es ermöglicht, etwas hinter dem Rad zu befestigen.
Für die technische Komponente überlegte ich mir, wie ich mein Adafruit-Feather-v2-Board verwenden kann, und kam auf die Idee, es mit einem Rotary Encoder zu verbinden. Außerdem lässt sich ein Akku an das Board anschließen, um eine kabellose Steuerung zu ermöglichen.
Ich machte mir einen groben Plan und suchte nach passenden Zahnrädern auf der Plattform für 3D-Druck – Makerworld. Dort fand ich einen Zahnradkonfigurator, der genau zu meinen Ansprüchen passte. Außerdem benötigte ich noch eine Aufnahme. Diese konstruierte ich in Blender, indem ich den Zwischenraum zwischen dem großen „Ring-Gear„ und dem kleinen „Spur-Gear“ nutzte und dadurch eine sichelähnliche Form erhielt.
Dann benötigte ich nur noch eine Aufnahme für den Rotary Encoder, den ich im Programm „Shapr„ konstruierte, um die genauen Aussparungen für die Kabel zu erhalten. Ebenfalls passte ich die Innenform des Zahnrades an den Rotary Encoder an.
Diese Konstruktion musste ich mehrmals drucken, da manche Teile nicht auf Anhieb passten. Schlussendlich kam ich aber zu einem funktionierenden Prototyp.
Den Adafruit Feather programmierte ich mit Arduino, damit er am PC als Bluetooth-Maus erkannt wird. Dabei half mir wieder Claude Code. Trotzdem musste ich ihm die genauen Bibliotheken des Rotary Encoders und des Bluetooth-Moduls mitgeben.
Druck
Da die Kamera als benutzbares Objekt erkannt werden sollte, druckte ich sie in grauem PLA und verwendete für den benutzbaren Objektivring ein transluzentes, oranges PLA. Diese auffällige Farbe sorgt dafür, dass er gut erkennbar ist.
Beim Kameragehäuse musste ich die Aussparungen für den Encoder und das Feather-Board einplanen und darauf achten, dass alles gut zusammenpasst und hält. Die Displayplatte nutzte ich als Referenzklappe und fertigte eine Aussparung an, um sie über ein Kabel zu verbinden und aufladen zu können.
HTML Website
Ich benutzte eine HTML-Vorlage von einem Kommilitonen, der eine ähnliche Seite mittels Vibe-Coding erstellt hatte. Meine Version enthält einige Änderungen, etwa die Möglichkeit, Text und ein Video hinzuzufügen.
Die Hero Section besteht aus einem Video, das aus Blender exportiert wurde und in Dauerschleife abspielt. Darüber liegt eine Textebene.
Die darauffolgenden Sections wechseln sich jeweils mit Text und Animation ab. Die Animationen sind als PNG-Sequenzen aus Blender exportiert und so im HTML hintereinander angeordnet, dass sie passend zur Scroll-Bewegung angezeigt werden.
Da der gedruckte Objektivring orange ist, übernahm ich Orange als Highlight-Farbe für Textelemente sowie für die wichtigen Elemente in den Blender-Animationen.
Die Website ist unter folgendem Link erreichbar. Allerdings mit sehr geringer Bildqualität, um die Downloadgröße so gering wie möglich zu halten.
https://site.schwarzflorian.com/in-fokus/
Werkschau
Für die Werkschau fertigte ich außerdem geplottete Piktogramme in Illustrator an, damit einfach verständlich wird, dass die Kamera anfassbar ist.
Dafür dient ein schwarzer Rahmen als Hinweis, wo die Kamera abzulegen ist, sowie zwei orangene Piktogramme: eines zeigt, dass man das Rad drehen kann, das andere, dass man das Objekt anfassen darf.
