TL;DR:
pokaż spoiler Napisałem fajny, interaktywny symulator głębi ostrości online. ( ͡° ͜ʖ ͡°)
Aplikacja dostępna jest pod adresem
//dofsimulator.net Pozwala symulować wygląd zdjęcia z uwzględnieniem głębi ostrości i rozmycia tła dla dowolnej kombinacji parametrów istotnych w fotografii: ogniskowej, przysłony, rozmiaru matrycy oraz odległości postaci i tła od aparatu. Umożliwia to łatwe i szybkie sprawdzenie jak wyglądałoby zdjęcie wykonane danym zestawem sprzętu fotograficznego. Strona jest zbudowana w 100% w oparciu o HTML5 + JS + CSS, a więc nie wymaga do działania żadnych dodatkowych wtyczek - wystarczy w miarę aktualna wersja przeglądarki.
Pomysł na aplikację przyszedł mi do głowy kiedy zastanawiałem się nad wyborem nowego obiektywu do aparatu. Nie byłem pewny jaka kombinacja parametrów zapewni największe rozmycie tła na którym zależało mi w zdjęciach portretowych. Inne dostępne w internecie kalkulatory GO prezentują jedynie suche liczby, które trudno jest przełożyć na efekt wizualny na zdjęciu. Z kolei symulatory obiektywów udostępniane przez producentów ograniczają się do dość wąskiego zakresu parametrów. Moja aplikacja oferuje zarówno swobodę w doborze parametrów jak i przyjazną, wizualną reprezentację obliczonych wartości.
Funkcja blokady kadru pozwala zrozumieć jak zmienia się głębia ostrości oraz wygląd i rozmycie tła podczas zmiany różnych parametrów. Uwzględniane są przy tym zniekształcenia perspektywiczne twarzy występujące przy małych odległościach, co dobrze widać na poniższej animacji:
//i.imgur.com/B3nWRIx.gif
Wszystkie wyliczone wartości prezentowane są również w postaci liczbowej. Kombinacje parametrów można zapisywać na liście w celu ich szybkiego odtworzenia, dzięki czemu wyniki obliczeń dla różnych konfiguracji sprzętu można łatwo porównać.
Symulator posiada funkcję dokładnej symulacji bokeh, która pozwala naśladować różne rodzaje rozmycia tła: od bardzo miękkiego, przez standardowe tarczki, aż po "obwarzanki" z obiektywu lustrzanego, a także różne ilości listków przysłony. Aplikacja uwzględnia również dyfrakcję oraz oblicza odległość hiperfokalną.
Oprócz dostępności online pod adresem
//dofsimulator.net można także pobrać wersję offline na najpopularniejsze systemy desktopowe (Windows, Linux, OSX) oraz wersję mobilną na system Android:
https://play.google.com/store/apps/details?id=pl.michalbemowski.dofsimulator
Zapraszam do wypróbowania aplikacji. Mam nadzieję, że przypadnie wam do gustu. (⌐ ͡■ ͜ʖ ͡■) Czekam na uwagi i opinie.
Jeżeli chodzi o technikalia (mircy spod tagów #
webdev i #
programowanie będą pewnie zainteresowani) to całość aplikacji wraz z interfejsem jest napisana od zera z wykorzystaniem AngularJS. Rozmycie jest generowane za pomocą blur z CSS3 filters lub SVG w zależności od tego, która funkcja jest dostępna w danej przeglądarce. Symulacja bokeh wykorzystuje element canvas i konwolucję wykonywaną za pomocą FFT w JS. Przetwarzanie odbywa się w oddzielnym wątku Web Worker aby nie blokować UI przeglądarki. Do stworzenia przewodnika użyłem gotowego rozwiązania pod nazwą bootstrap-tour.
Wersja offline wykorzystuje nw.js (node-webkit) dzięki czemu jest niezależna od przeglądarki zainstalowanej w systemie.
Aplikacja na androida działa w oparciu o Crosswalk - alternatywny WebView, który zapewnia lepszą wydajność niż standardowy wbudowany w system.
Komentarze (82)
najlepsze