Przyznam, że wyniki trochę mnie zaskoczyły… zresztą nie tylko mnie, bo obstawiało kilka osób i wszystkie celowały w okolice 10 -20%. W czasie badania można było zauważyć, że odsetek osób posiadających kamery był znacznie większy w godzinach wieczornych niż porannych. Wynika stąd, że komputery służbowe są mniej multimedialne.

Oczywiście wyniki te mogą różnić się od rzeczywistych, gdyż badanie wykonane było w bardzo krótkim okresie czasu, w zaledwie kilu serwisach (każdy serwis ma swój określony target, np. ludzie młodzi, klienci biznesowi) i wymagało posiadania flash playera w wersji 9.0 lub nowszej (około 98% komputerów wg Adobe). Mimo to postanowiłem podzielić się tą wiedzą.

Dziękuję za pomoc w przeprowadzeniu badania Mariuszowi Górskiemu, który był odpowiedzialny za php/mysql i zestawienie wyników.

Tym razem pod nóż poszedł FLARToolKit. Jest to biblioteka pozwalająca na rozpoznawanie w czasie rzeczywistym charakterystycznych dla niego symboli oraz określania na ich podstawie położenia kamery w przestrzeni trójwymiarowej (eng. Augmented Reality). FLARToolKit jest wersją biblioteki ARToolKit dla języka ActionScript 3.0.

Od Augmented Reality już tylko krok do umieszczenia na symbolu (dzięki bibliotece Papervision3D) trójwymiarowego obiektu. Tak też się stało.

Wesołego jajka.

Schemat blokowy kodeka H.264

Ok, darujmy sobie teorię.  Oto lista podstawowych parametrów z ich krótkim opisem oraz optymalnymi wartościami (nazwy parametrów mogą być różne w różnych programach).

• Profile (określa technikę i strategię używaną przez koder oraz dekoder, co wpływa na wymaganą moc obliczeniową): High
• Level (określa maksymalną rozdzielczość, wymaganą pamięć, lokalny bitrate, oraz poziom buforowania): 4.1 (5.1 dla Full HD)
• Constant Bitrate – korzystne przy streamingu
• Variable Bitrate – korzystne przy progressive download
• Multi-pass encoding – kiedy tylko to możliwe używamy 2-pass encoding
• IDR Interval (odległość pomiędzy klatkami kluczowymi – key frames distance): 50 – 250
• Dynamic IDR positioning (dynamiczne umieszczanie klatek kluczowych zdeterminowane detekcją scen): 40 – 50
• B-frames (lub B-pictures – klatki interpolowane na podstawie klatek poprzednich oraz następnych; nie są referencją dla innych klatek; wartość parametru określa ich maksymalną występującą po sobie ilość; kiedy koder to umożliwia, rekomenduje się użycie “auto decision”): 1 – 3
• B-pyramid (umożliwia kiedy to konieczne użycie  B-frames jako klatek referencyjnych): włączyć jeżeli jest dostępne
• Entropy coding (kodowanie entropijne binarnego strumienia obrazu): jeżeli to możliwe używamy CABAC zamiast CAVLC
• Search mode (technika szukania wukorzystywana w estymacji ruchu): hexagonal
• Search accuracy: quarter-pixel
• Number of reference frames: 2 – 5
• Intra frame prediction: należy używać Hadamard transform
• Rate distortion optimization (optymalizuje estymację ruchu, jednak może znaczenie spowolnić przetwarzanie i niewiele poprawić jakość): complex
• De-blocking (filtr – jeden z głównych powodów wysokiej wydajności kodeka H.264; nigdy nie należy go wyłączać): pozostawić wartości standardowe

Zastosowanie powyższych parametrów powoduje jednak znaczne wydłużenie czasu kodowania (nawet kilkukrotnie w stosunku do czasu trwania filmu). Oto lista parametrów oraz wartości jakie można im przypisać, żeby skrócić czas i jednocześnie nie stracić zbyt wiele na jakości:

• reference frames: 2
• zablokować B-pyramid
• zmniejszyć  search range (np. do 16 lub do simple) oraz search mode
• zmniejszyć search accuracy do half-pixel
• zablokować rate distortion optimizations (RDO)
• rozważyć zmniejszenie rozdzielczości lub zastosować pre-filtering

W takim razie do dzieła. Pod nóż poszły trzy programy: MediaCoder, MainConcept Reference, Adobe Media Encoder CS4 oraz 42 sekundowy film w jakości Full HD (1080i). Żeby dostrzec pogorszenie jakości, narzuciłem dość rygorystyczne warunki: docelowa rozdzielczość 720×400 oraz bitrate video 300kbps.

Niestety w MediaConcept Reference nie udało mi się wyprodukować filmu z dźwiękiem w formacie AAC, więc odpadł w zasadzie w przedbiegach. Nie jest to jednak dużą stratą, gdyż Adobe Media Encoder opiera się na kodeku opracowanym właśnie przez firmę MediaConcept. Tak więc poniżej porównanie klipów pochodzących z dwóch pozostałych programów.

Przykład 1: Media Coder
Przykład 2: Adobe Media Encoder CS4

MediaCoder wygrywa w tej konkurencji, choć oba programy wymagają przetestowania kompresji na filmach o innym tempie akcji (częste zmiany scen, dużo ruchu i szczegółów). Jakość obu filmów jest jednak i tak bardzo zadowalająca. Biorąc pod uwagę poprzedni kodek (On2vp6) otrzymujemy o wiele lepszą jakość przy niższym bitrate i cztery razy większej rozdzielczości (biorąc pod uwagę powierzchnię).

Kilka porad nie do końca związanych z kodekiem:

• Wybierz odpowiedni bitrate do zadanej rozdzielczości; oto zalecane wartości:
  -  1080p: Full HD (1920×1080) 2 – 3 Mbps
  - 720p HD (1280×720): 1.5 – 2 Mbps
  - 576p HQ (1024×576): 1 – 1.2 Mbps
  - 480p SD (848×480): 0.8 – 1 Mbps
  - 360p MD (640×360): 0.6 – 0.8 Mbps
• Rozważ kodowanie w rozdzielczości anamorficznej (np. 1440 x 1080 zamiast 1920 x 1080 i późniejsze rozciągnięcie obrazu we flashu – wg standardu dalej będzie to obraz Full HD)
• Odszum video przed zakodowaniem (”temporal denoise filter”, “3D denoise filter”). Skalowanie również działa jako filtr odszumiający, o ile jest to skalowanie bilinear lub bicubic.
• Jeżeli film źródłowy jest nagrany z przeplotem i nie posiadasz zaawansowanego programu do jego usuwania, spróbuj zakodować obraz w dwukrotnie niższej rozdzielczości pionowej i rozciągnij go we Flashu.
• Jeżeli rozciągasz film we Flashu używaj video.smoothing=true. Pamiętaj, aby wyłączyć smoothing przy wchodzeniu w tryb fullscreen, aby uaktywnić akcelerację sprzętową.
• Jeżeli kodujesz w niskiej jakości, można użyć we Flashu prostego sharpen filter w celu wyostrzenia szczegółów.

Na koniec jeszcze dwa przykłady przygotowane za pomocą MediaCoder pokazujące możliwości formatu H.264. Pierwszy z nich to fragment filmu w rozdzielczości HD (720p: 1280 x 720) i jakości 1Mbps: http://woszkowski.com/h264/pb-hd-1000.html. Drugi to film w rozdzielczości Full HD (1080p: 1920 x 1080) i jakości 1.5Mbps: http://woszkowski.com/h264/pb-fhd-1500.html. W obu przypadkach polecam przełączenie do trybu fullscreen przyciskiem w lewym górnym rogu filmu.

Na podstawie sesji “Encoding Video for the Highest Quality and Performance”, Fabio Sonnati, Adobe MAX 2008, Milan.

Kilka dni temu miała miejsce premiera pakietu Adobe CS4, a w nim nowej wersji Flasha. Zapewne lada dzień nastąpi wysyp aplikacji i przykładów, wykorzystujących engine 3D, bone tool czy inne nowe funkcje. Flash developerzy będą prześcigać się w ilości przykładów i ich optymalizacji. Tak będzie do wydania kolejnej wersji Flasha, gdzie cały wyścig rozpocznie się od nowa. Nie jest to zjawisko złe, ktoś zawsze musi zrobić pierwsze kroki. Dzięki nim, gdy tylko chcemy znaleźć przykłady wykorzystania narzędzi potrzebnych do skończenia naszego projektu, mamy je na wyciągnięcie ręki. Skala tego zjawiska jest jednak zbyt duża. Programiści zbyt wielką wagę przykładają do narzędzi i ich perfekcyjnego wykorzystania, zamiast skupić się na tym, co tak na prawdę chcą zrobić. Powinni zastanowić się do czego te narzędzia wykorzystać, poświęcić więcej czasu idei. Jest to mniej więcej przesłanie Jonathana Harrisa, który swoją sesją zakończył tegoroczną konferencję Flash on the Beach. Sesja, która początkowo wzbudziła aplauz, wywołała później w Internecie niemałą burzę. Flash developerzy poczuli się oburzeni, jak ktoś śmie podważać sensowność ich pracy.

Dało sie zauważyć, że całe FOTB było mniej techniczne, a bardziej inspiracyjne. Dużo sesji poświęcono wykorzystaniu Flasha oraz innych programów, do tworzenia sztuki, reklamy czy filmu. Erik Natzke pokazał w jaki sposób wykorzystuje tzw. particles (cząsteczki) do tworzenia obrazów. Jego prace można znaleźć m.in. na flickr. Robert Hodgin podzielił się z publicznością refleksją o tym, jak jego jednorazowa przygoda z kwasem zmieniła pogląd na życie. Obecnie stara się, aby jego wizualizacje oddziaływały na ludzi tak, jakby byli pod wpływem tego narkotyku. James Paterson rozbawił i zadziwił publiczność swoimi niemal poklatkowymi animacjami. Prawie wszyscy znają animacje logotypu stacji muzycznej VH1. To właśnie jego żmudne dzieło. GMUNK pokazał co można zrobić łącząc animację 3D, animacje flash oraz materiał video. Jego reklamy Bacardi, Hyundai’a czy Budlight’a mówią same za siebie. O czołówce video tegorocznego FOTB opowiedział jej twórca, Rob Chiu. Ciekawostką jest, że została skończona o czwartej nad ranem, kilka godzin przed rozpoczęciem konferencji.

Oczywiście nie brakowało sesji typowo technicznych. Carlos Ulloa, twórca Papervision3D, pokazał jak powstaje trójwymiarowa gra wyścigowa. Jego kolega z zespołu zaprezentował nowe funkcje wspomnianego engine’u. Lee Birmelow przedstawił nowości Flasha CS4. Keith Peters wyjaśnił na jakiej zasadzie opierają się engine’y fizyki, typu Box2DFlash. Mario Klingemann pokazał jak za pomocą Flasha i kamery czytać semacode. Sesje te pozostały jednak daleko w cieniu, gdyż opisywały biblioteki i algorytmy, będące tylko narzędziami w rękach prawdziwych artystów.

Ostatnią sesję na FOTB wygłosił Jonathan Harris. Pokazał on kilka swoich projektów. Jednym z nich jest “We Feel Fine“. W projekcie tym przeszukiwane są blogi ludzi z całego świata. Wyszukiwane są zdania, zawierające wyrażenia “I feel” oraz “I’m feeling like”. Następnie każde ze zdań poddawane jest analizie, skierowanej na poszukiwanie rodzaju uczucia, wieku piszącego, jego płci, panującej pogody, miejsca oraz daty wpisu. Na tej podstawie tworzona jest jest swoista mapa uczuć. Wynika z niej np. że ludzie najbardziej szczęśliwi są podczas świąt a najmniej w okolicach wakacji. W projekcie “Universe” budowany jest świat wokół zadanego słowa kluczowego. Wpisując słowo “Poland” możemy zobaczyć w jakim kontekście pisano o naszym kraju w ostatnim tygodniu, miesiącu, czy roku, jakie były poruszane tematy, jakich osób dotyczyły. Tego typu projektów u Jonathana Harrisa nie brakuje, jednak wszystkie  łączy jedna cecha – skupione są wokół człowieka.

Ciekawe jest to, że większość opisywanych wyżej projektów i dzieł nie ma nic wspólnego z Flashem. Animacje i wizualizacje tworzone są w programach do postprodukcji i 3D, a prace Jonathana Harrisa prezentowane są w apletach Java. Nie ważne jest jednak jakiego narzędzia użyjemy, równie dobrze mogli byśmy to wszystko zrobić we Flashu. Ważne jest jednak co tak na prawdę chcemy przekazać…

Problem sierotek przewija się przy pracy nad stronami internetowymi od bardzo dawna. Jest wiele rozwiązań tego problemu w php (skrypty, pluginy WordPress, itp.), natomiast nie spotkałem się jeszcze z rozwiązaniem dla ActionScript (3.0). Okazało się ono stosunkowo proste, jednak nie możliwe do zastosowania we wszystkich przypadkach. Podobnie jak w html, wstawiamy pomiędzy spójniki a następujące po nich wyrazy, znaki twardej spacji ( ) w miejsce spacji miękkich. Pole tekstowe musimy wypełniać jako pole html (htmlText), gdyż inaczej ciąg   nie zostanie potraktowany jako twarda spacja. Wystarczy do tego proste wyrażenie regularne w AS3:

poletekstowe.htmlText = str.replace(/\s+([aiouwzAIOUWZ])\s+/g, ” $1 ”);

Wszystko działa znakomicie w przypadku korzystania z fontów systemowych (use device fonts). Niestety Flash nie embeduje znaku twardej spacji w przypadku pól z antyaliasem. Być może dało by się ten problem jakoś rozwiązać, np. łamiąc automatycznie w odpowiednich miejscach wiersze znakiem końca linii, jednak uniemożliwiło by to justowanie tekstu. Tak więc jeżeli przewidujemy w naszej flashowej aplikacji problem wiszących spójników, od razu nastawiajmy się na korzystanie z fontów systemowych.

Aby uniknąć konieczności zapamiętywania czy też szukania powyższego wyrażenia regularnego, napisałem prostą klasę w AS3. Klasa przenosi do nowej linii litery a, i, o, u, w, z. Oto przykład uzycia.

import com.woszkowski.tools.StringTool;
poletekstowe.htmlText = StringTool.suppressSingleLetters(str);

Pliki do pobrania:
StringTool – klasa do usuwania wiszących spójników oraz przykład uzycia

Linki:
skaldy.com – pomoc w rozwiązaniu problemu
sierotki wordpress plugin – plugin do wordpressa autorstwa Artura Kępy

Stereoskopia
A konkretnie anaglify, czyli wyświetlanie specjalnie przygotowanych obrazów i oglądanie ich za pomocą okularów, dających wrażenie przestrzeni trójwymiarowej. Efekt ten możemy bardzo łatwo uzyskać za pomocą Papervision3D lub innego engine’u 3D. Renderujemy obraz z dwóch przesuniętych względem siebie w poziomie kamer, kopiujemy kanał czerwony jednej z nich, kanały zielony i niebieski drugiej i powstałe obrazy nakładamy na siebie. Istnieją trzy rodzaje okularów: czerwono-niebieskie, czerwono-cyjankowe i czerwono-zielone. Nie wiem jeszcze które nadają się najlepiej do oglądania tworzonych w ten sposób obrazów, ale już zostały zamówione, więc wkrótce własne przykłady i wyniki eksperymentów.

Tymczasem przykłady innych:
http://mrdoob.com/#/56/
http://mrdoob.com/#/57/
http://lab.benstucki.net/archives/AnaglyphTest/anaglyphtest.swf

YouTube Flash API / filmy w wysokiej jakości
YouTube stworzył API dla Flasha oraz Javascriptu , pozwalające na zamieszczanie na swoich stronach filmów bez standardowego playera. Nawigację możemy teraz tworzyć we własnym zakresie. Najważniejsze, że “chromeless player” pobierany jest spod adresu gdata.youtube.com, gdzie znajduje się plik crossdomain.xml, zawierający upragniony wiersz <allow-access-from domain=”*”/>. Oto przykład, że to wszystko na prawdę działa:
http://woszkowski.com/ytapi/

Inną nowością od YouTube są filmy w lepszej jakości. W ustawieniach konta pod pozycją Jakość odtwarzania filmów wideo (http://pl.youtube.com/video_quality_settings) możemy włączyć opcję “Mam szybkie połączenie. Zawsze odtwarzaj film wideo z wyższą jakością, jeżeli jest dostępna.“. Od tego momentu filmy będą odtwarzane z większym biterate’em oraz z większą częstotliwością próbkowania dźwięku. Jednak nadal będzie to kodowanie Flash Video. YouTube oferuje również nieoficjalnie filmy w standardzie H.264. Do ich oglądanie potrzebujemy Flash Playera w wersji 9.0.115. Aby oglądać filmy w tym standardzie, wystarczy na końcu adresu dodać “&fmt=18″. Oto przykłady tego samego filmu w różnych jakościach:
Jakość standardowa: http://www.youtube.com/watch?v=RZYIfUdIyfs (pod warunkiem, że w ustawieniach YT nie ustawiliśmy domyślnie wysokiej jakości)
Jakość wysoka: http://www.youtube.com/watch?v=RZYIfUdIyfs&fmt=6
Kodek H.264: http://www.youtube.com/watch?v=RZYIfUdIyfs&fmt=18

Yahoo Maps Flash API
Tym razem komponent dla Flex Buildera. Yahoo wypuściło komponent oraz API do swoich map. Umożliwia on bardzo łatwe kontrolowanie mapy z poziomu AS3. Warto zwrócić uwagę na to, że Yahoo Maps są już bardzo dokładne dla naszego regionu i nic nie stoi na przeszkodzie, żeby częściej z nich korzystać.

Umap
We wcześniejszym biuletynie opisywałem komponent G Map, umożliwiający obsługę Google Maps z poziomu Flasha. Tym razem AFC zaprezentowało komponent UMap, umożliwiający kontrolę z opziomy AS3 map OpenStreetMap oraz Microsoft Virtual Earth. O ile OpenStreetMap jest bardzo niedokładny na obszarze Polski, to Microsoft Virtual Earth charakteryzuje się taką dokładnością , że komponent UMap staje się godny polecenia.

AIR 1.0 i Flex Builder 3
Adobe wypuściło oficjalne wersje Adobe Integrated Runtime oraz Flex Buildera 3. Jeżeli chodzi o AIR, to mimo, że słyszymy o nim już od dłuższego czasu, jest to dopiero pierwsza oficjalna wersja. Flex również jest dosyć młodym narzędziem, jednak w tym przypadku doczekaliśmy się już wersji nr 3. Zmiany w porównaniu z dwójką nie są duże.

Więcej o jaskini w Straszykowej Górze

Zdjęcia: Paweł

Zdjęcia: Tomek

Zdecydowanymi liderami okazały się algorytmy:
- Power: f(x) = (x+(1-x)*0.03)^2
- Fast power: f(x) = (x+(1-x)/2)^8

Tak więc aby jak najbardziej zniwelować negatywne odczucia użytkownika wywołane oczekiwaniem na załadowanie gry, strony, prezentacji, zainstalowanie oprogramowania, etc., powinniśmy stosować tego typu nieliniowe algorytmy postępu.

Wizualizacja wszystkich algorytmów jednocześnie.

Kod źródlowy: src-single.zip [355kB]
Źródło: Rethinking the Progress Bar