SPACERY WIRTUALNE Panoramy sferyczne połączone w

SPACERY WIRTUALNE
Panoramy sferyczne połączone w multimedialną prezentację tworzą spacer wirtualny.
Spacery wirtualne to nowoczesna forma prezentacji
firm, ale także terenów otwartych i obiektów
zamkniętych. Wirtualny spacer prowadzony jest
wirtualnymi oczami osoby wchodzącej. To przyjazna
promocja firmy zanim klient do niej wejdzie.
Panorama sferyczna przedstawia płaszczyzny góradół i dookoła. Poprzez spacer wirtualny mamy
wrażenie obrotu wokół własnej osi. Przed
rozpoczęciem zdjęć trzeba dokładnie zapoznać się z
marketingowym celem projektu oraz miejscami, w których realizowane będą wirtualne
spacery.
Jeśli do:







FIRMY,
INSTYTUCJI,
HOTELU,
RESTAURACJI,
PLACÓWKI,
SZKOŁY,
PSZEDSZKOLA
chcecie państwo zaprosić potencjalnego klienta, petenta, rodzica - jest to na pewno najlepszy
sposób. Interaktywność gwarantuje, że KLIENT czynnie uczestniczy w zapoznaniu się z
przedstawianym miejscem.
Niezwykle sugestywne wrażenia bycia w
środku - klient "patrzy w lewo", "rozgląda
się", „przechodzi dalej i dalej”, „poznaje
miejsce, wejście, układ organizacyjny",
„zaprzyjaźnia się z otoczeniem”.
Wiarygodność miejsca - tradycyjne
prezentacje fotograficzne są płaskie,
statyczne, złudne. Użycie obiektywu
szerokokątnego daje wrażenie, że coś jest
większe i przestrzenne. Odpowiednie
kadrowanie ukrywa, to co trzeba ukryć,
pokazując całe wnętrze i umożliwiając
dowolne rozglądanie się po nim
przekazujecie Państwo informację, że nie
macie nic do ukrycia.
KRPANO
KRPano - jest bardzo sprytnym i wydajnym narzędziem do prezentacji zdjęć
panoramicznych 3D w formie FLASHa. Jedyne co osoba oglądająca musi mieć zainstalowane
to Adobe Flash Player, najbardziej popularny plugin występujący w wersji na wszystkie ,
najczęściej używane przeglądarki internetowe .
KRPano Flash Panorama Viewer oferuje wiele unikalnych możliwości jak np. obsługuje
gigapikselowe panoramy tzn. o rozdzielczościach kilkudziesięciu tysięcy
pikseli, w bardzo ciekawy sposób . Tworzy po prostu panoramy w rozdzielczościach
pośrednich , aby na starcie uniknąć wczytywania kilkudziesięciu megabajtów danych . Z
wyższych rozdzielczości korzysta w momencie powiększania , zbliżania widoku , ale
wczytuje tylko ten, konkretny fragment, który chcemy zobaczyć w uszczegółowiony sposób .
Jest w pełni konfigurowalny
MOŻLIWOŚCI









Technologia Flash
Wymaga tylko Adobe Flash Player (wersja 9.0.28 lub nowsza)
Wysoka szybkość i jakość obrazu
Duża prędkość przetwarzania we wszystkich rozdzielczościach , od małych obiekt do
trybu pełnoekranowego .
Jakość prezentacji dobierana według możliwości
Obsługuje wiele formatów panoram
Obsługuje wszystkie rodzaje panoram kubicznych
Ładuje pliki panoram fragmentami
Duże panoramy mogą być podzielone na małe fragmenty , które pobierane są
cykliczne . Umożliwia to oglądanie panoramy jeszcze przed całkowitym załadowanie ,
co wydatnie skraca czas oczekiwania przez oglądającego .
Obsługuje Giga Pixelowe zdjęcia panoramiczne
Oprócz fragmentarycznego pobierania plików KRPano umożliwia obsługę
Gigapixelowych panoram tj. takich o bardzo dużych rozdzielczościach . System
pozwala na stworzenia , na podstawie panoramy gigapixelowej , kilku panoram w
rozdzielczościach pośrednich i wybiera którą z nich ma wyświetlić na podstawie
wielkości zoomu , który w danym momencie oglądający wybrał . W takim wypadku
pobierany jest ten fragment który aktualnie ma być wyświetlony , co nie powoduje
konieczności pobrania pliku o wielości np. 30 - 40 Mb !! Nie trzeba szukać
kompromisu pomiędzy jakością , a wielkością pliku panoramy .
Efekt Rybiego Oka / FishEye /
Przy większym kącie widzenia / FOV ok. 130° / widok zaczyna wyglądać bardzo
nienaturalnie. Z tym efektem jest zdecydowanie lepiej .
Efekty Flary i Mroku
Istnieje możliwość dodania i konfiguracji flar oraz mroku , półmroku celem uzyskania
bardzo realistycznych wizualizacji.
Hotspoty / Wirtualne wycieczki / Skrypty
Hotspoty są to miejsca lub fragmeny panoramy po kliknięciu w które wykonywana
jest jakaś akcja np. wyświetlenie sąsiedniej panoramy .
W pełni konfigurowalny
Przeglądarka posiada bardzo dużo parametrów , które mogą być zdefiniowane przez


twórcę panoramy .
Nawigacja odbywa się za pomocą myszki lub / oraz klawiatury.
Rozszerzalny o zewnętrzne interfejsy / Skrypty JAVA
Obsługuje zewnętrzne aplikacje Flash oraz Action Skrypt 3 oraz skrypty JAVA .
Jest łatwy w użyciu oraz integracji ze stroną www
Nie wymaga wiedzy programistycznej . Może być używany lokalnie oraz na serwerze
www . Wszystkie ustawienia znajdują się w pliku xml oraz moga być przekazywane
poprzez parametry HTTP oraz Flash .
ZALETY FLASHA



Bardzo duża popularność
Do podglądu panoramy przez użytkownika wymagany jest plugin Adobe Flash Player
, który jest bardzo popularny. Około 99 % użytkowników Internetu ma go
zainstalowanego. Inne playery mogą wymagać zainstalowania dodatkowych
pluginów, co najczęściej kończy się rezygnacją z podglądu przez użytkownika .
Wielosystemowość
Player dostępny jest do większości systemów operacyjnych oraz przeglądarek
internetowych:
o Windows, Linux, Mac
łatwa i szybka instalacja
Jeżeli użytkownik nie posiada zainstalowanego pluginu może to zrobić w prosty i
szybki sposób .
TESTOWY SERWER KRPANO
Serwer Testowy Krpano to mały, prosty i łatwy w obsłudze serwer localhost. To sprawia, że
można przetestować krpano Flash i HTML5 bez ograniczeń, w pełni lokalnie i bez przesłania
plików na zewnętrzny serwer. Inne komputery i urządzenia w sieci lokalnej będą mogły
przeglądać pliki. Dodatkowo możliwe jest kontrolowanie pamięci podręcznej przeglądarki
oraz ograniczenie prędkości pobierania i testowania do symulacji internetowych wolniejszych
połączeń.
STOSOWANIE

Uruchom testowy serwer KRPano

Wybierz folder lokalny, który powinien być używany do testowania:

Serwer zacznie dzaiałać automatycznie, a link do plików pojawi się poniżej
XML
STRUKTURA PLIKU XML
krpano, do przechowywania ustawień panoram używa prostych w strukturze plików XML.
Pliki te mogą być tworzone lub edytowane przy pomocy zwykłego edytora tekstu, jednak z
utrzymaniem zasad składni kodu xml!
Poniżej znajduje się schematyczne przedstawienie struktury pliku xml dla krpano.
(podwęzły mogą być umieszczone w dowolnej kolejności)
<krpano>
<include>
<preview>
<image>
<view>
<area>
<display>
<control>
<cursors>
<autorotate>
<plugin>
<layer>
<hotspot>
<style>
<events>
<action>
<contextmenu>
<progress>
<network>
<memory>
<security>
<textstyle>
<lensflareset>
<lensflare>
<data>
<scene>
</krpano>
Początkowym węzłem pliku jest <krpano>. Wewnątrz niego znajdują się wszystkie węzły
potomne. Wypełniacz "atrybuty" jest miejscem na atrybuty węzła.
UWAGI dla atrybutu "url:



atrybut "url" jest atrybutem specjalnym
zdefiniowane w nim ścieżki odnoszą się do zdefiniowanego położenia samego pliku
XML
można także użyć następujących wypełniaczy w celu zdefiniowania pełnej ścieżki:
o %FIRSTXML% - ścieżka pierwszego załadowanego pliku xml
o %CURRENTXML% - ścieżka obecnie załadowanego pliku xml
o %SWFPATH% - ścieżka pliku swf
o %HTMLPATH% - ścieżka pliku html
Programowanie Wirtualnej wycieczki w KRPano polega na przekazaniu playerowi
parametrów zdjęcia, widoku, hotspotów itp za pośrednictwem pliku XML bądź przy
wykorzystaniu JavaScriptu.
UŻYTKOWANIE
Istnieje wiele alternatywnych sposobów korzystania z krpano Flash Panorama Viewer:
1. Ładowanie przy użyciu domyślnego pliku XML
Domyślnie krpano ładuje wszelkie ustawienia panoram z pliku XML, który jest nazwany
identycznie do pliku SWF (możesz zmienić nazwę pliku krpano.swf na dowolną inną)
krpano.swf -> ładuje krpano.xml
yourpano.swf -> ładuje yourpano.xml
2. Ustawianie ścieżki do pliku XML przy użyciu parametru "pano"
poprzez parametr(y) HTTP-GET
krpano.swf?pano=yourdir/yourpano.xml
lub poprzez zmienne Flash: (przykład kodu Javascript SWFObject 1.5)
var so = new SWFObject("krpano.swf","krpanoSWF","100%","100%","9.0.28");
so.addVariable("pano","yourpano.xml");
so.write("krpanoDIV");
Wskazane jest używanie skryptów Javascript do osadzania Flash, ku czemu istnieje kilka
powodów.
3. Bezpośrednie ładowanie panoramy (przy użyciu pliku XML lub bez)
na przykład poprzez parametru HTTP-GET
krpano.swf?sphere=spherepano.jpg
lub:
krpano.swf?cubestrip=cubestrip.jpg
lub:
krpano.swf?left=left.jpg&front=front.jpg&right=right.jpg&back=back.jpg&up=up.jpg&dow
n=down.jpg
Powyższe przykłady załadują panoramę sferyczną, cubestrip lub panoramę sześcienną
bezpośrednio bez użycia pliku XML.
Można to zrobić także przy użyciu zmiennych Flash:
var so = new SWFObject("krpano.swf","krpanoSWF","100%","100%","9.0.28");
so.addVariable("sphere", "spherepano.jpg");
so.write("krpanoDIV");
Można także użyć obu, zarówno bezpośrednich parametrów obrazu, jak i pliku XML w
parametrze "pano.
Na przykład można użyć pliku XML tylko do załadowaniu ustawień wyświetlanie /
sterowania (bez znacznika <image>) i ustawić dostęp do panoramy sferycznej bezpośrednio:
krpano.swf?pano=settings.xml?sphere=shpere.jpg
4. Panoramy multiresolution
Bardzo ciekawy rodzaj prezentacji panoramicznych umożliwiający uzyskanie dużej
szczegółowości na zbliżeniach bez nadmiernego obciążenia łącza internetowego.
Przykład panoramy przedstawiającej port:
Rozdzielczość:
24576 x 12288 ~ 302 Megapikseli
Poszczególne rozdzielczości:
24576x12288, 12288x6144, 6144x3072, 4096x2048,
2048x1024
Rozmiary kafelków:
1024x1024 = 24x12, 12x6, 6x3, 4x2, 2x1 = 136 Tiles (~28
MB Jpegs)
Powyższa panorama ma rozdzielczość 24576x12288 pikseli (około 302 megapikseli). Aby
otworzyć tak dużą panoramę, komputer będzie potrzebował około 1,2 GB dostępnej pamięci,
którą przeznaczy tylko i wyłącznie na wyświetlenie tego obrazu.
Jak zostało to obliczone? 1 piksel potrzebuje 4 bajtów, więc 24576 * 12288 * 4 =
1.207.959.522 bajtów! Dodatkowo będzie potrzebne około 17 MB na pobranie pliku (tyle
wynosi rozmiar panoramy skompresowanej jako obraz JPEG).
To oczywiście byłoby zbyt dużo dla przeciętnego komputera. Rozwiązaniem jest podzielić
panoramę o ogromnej rozdzielczości na wiele mniejszych. Te fragmenty są wczytywane tylko
jeśli jest to potrzebne (na przykład kiedy użytkownik wykonuje zbliżenie).
W tym przypadku, obraz jest podzielony na mniejsze o rozmiarze 1024x1024 pikseli)
Dzięki temu możliwe jest obejrzenie całej panoramy bez konieczności wczytywania całości
na raz. Jednakże nadal istnieje pewien problem - zależnie od kąta patrzenia - jeśli w jednym
momencie widocznym jest wiele części, znów kilka oddzielnych obrazów musi być ładowane
przy użyciu dużej ilości pamięci.
Ten problem rozwiązuje zastosowanie wielu rozdzielczości dla poszczególnych obrazów
panoramy. Zależnie od powiększenia i kąta patrzenia, ładowane są tylko najlepiej pasujące
rozdzielczości obrazów. To oznacza, że nigdy nie będą jednocześnie ładowane duże ilości
danych, co za tym idzie, potrzebna jest mniejsza ilość pamięci.
Jeśli widok zostanie zmieniony, fragmenty, które zostały wcześniej załadowane, ale nie są już
dłużej potrzebne, nadal pozostaną dostępne. Dopiero w momencie, gdy zostanie osiągnięty
limit danych (memory.maxmem), niepotrzebne fragmenty obrazu zostaną usunięte z pamięci.
Jeśli później znów będą potrzebne, będą musiały zostać załadowane ponownie.
Ile pamięci zostało dotychczasowo zużyte można sprawdzić przez wbudowaną wtyczkę
Options-Plugin:
mem imagefile - pamięć użyta przez pliki JPEG
mem imagedata - pamięć użyta przez kafelki
HTML
OSADZANIE W HTML
Istnieje wiele możliwości osadzania obiektu flash w stronie HTML,
poniżej kilka z nich:



poprzez znaczniki Object/Embed (niezalecane)
poprzez Javascript używając SWFObject 1.5 / SWFObject 2.1
poprzez Javascript używając skryptu embedpano - zalecane
Zalecane jest użycie metody Javascript. Daje to więcej możliwości i pozwala na poprawienie
niektórych błędów przeglądarek / playera Flash. Automatyczne wykrywa wersję Flash i
szybko ją aktualizuje.
1. Osadzanie Flash poprzez znaczniki Object/Embed (niezalecane)
Metoda osadzania bez użycia Javascript:
<object width="640" height="480">
<param name="movie" value="krpano.swf">
<embed src="/krpano.swf" width="640" height="480">
</embed>
</object>
Uwaga: Powyższy kod to minimum niezbędne do osadzenia filmu FLash w przeglądarce.
Jeśli użytkownik nie posiada zainstalowanej wtyczki Flash, na stronie pojawi się ikona błędu.
W powyższym kodzie użyte są oba znaczniki, zarówno <embed> jak i <object>, ponieważ
Internet Explorer rozpoznaje znacznik <object>, natomiast inne przeglądarki rozpoznają
znacznik <embed> a ignorują <object>.
Zalety:


nie ma potrzeby stosowania Javascript
w niektórych nowszych przeglądarkach automatycznie uruchomi się instalator wtyczki
Wady:




w starszych przeglądarkach problem z Eolas
nie sprawdza czy zainstalowany jest player Flash
nie sprawdza wersji playera Flash
brak zawartości alternatywnej
wszystkie parametry muszą być ustawiane dwa razy (raz dla znacznika object i drugi
raz dla znacznika embed)
brak dostępu Javascript do obiektu flash
brak możliwości poprawy błędów przy użyciu Javascript (przewijanie pokrętłem
myszy, błedy w systemie Mac)



Przykład - HTML bez Javascript
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/ ...linebreak...
...continueline... cabs/flash/swflash.cab#version=9,0,28,0"
height="100%" width="100%">
<param name="movie" value="krpano.swf">
<param name="flashvars" value="pano=krpano.xml">
<param name="allowFullScreen" value="true">
<embed src="/krpano.swf"
pluginspage="http://www.macromedia.com/go/getflashplayer"
height="100%" width="100%" allowFullScreen="true"
flashvars="pano=krpano.xml" />
</object>
2. Osadzanie Flash poprzez Javascript używając SWFObject 1.5 / SWFObject 2.1
SWFObject jest małym programem obiektowym. Do jego uruchomienia nie potrzeba
jednak znajomości tego języka programowania, wystarczy tylko zawierająca kilka linii
kodu funkcja ładująca.
Zalety:






sprawdza czy jest zainstalowany player Flash
zawartość alternatywna, np. link do pobrania playera Flash
sprawdza czy zainstalowana jest poprawna wersja playera Flash
Wsparcie Ekspresowej Instalacji Flash (Flash Express Install Support)
dostęp Javascript do obiektu flash
możliwa poprawa błędów przy użyciu Javascript (przewijanie pokrętłem myszy, błedy
w systemie Mac)
Wady:


potrzeba zastosowania Javascript
potrzebne sa dodatkowe pliki (swfobject.js, ...)
Przykład SWFObject 1.5:
<div id="krpanoDIV">
<noscript>ERROR: no Javascript</noscript>
</div>
<script type="text/javascript" src="/./swfobject/swfobject.js">
</script>
<script type="text/javascript" src="/./swfobject/swfkrpanomousewheel.js">
</script>
<script type="text/javascript">
// <![CDATA[
if (typeof(deconcept) !== 'undefined' &&
deconcept.SWFObjectUtil.getPlayerVersion().major >= 6)
{
var so = new SWFObject("krpano.swf", "krpanoSWFObject",
"640", "480", "9.0.28","#000000");
so.addParam("allowFullScreen","true");
so.addVariable("pano", "krpano.xml");
so.useExpressInstall("./swfobject/expressinstall.swf");
so.setAttribute("xiRedirectUrl", window.location);
if ( so.write("krpanoDIV") )
{ var mousewheelfixes = new SWFkrpanoMouseWheel(so); }
}
else
{
document.getElementById("krpanoDIV").innerHTML =
'Flash Player 9 needed';
}
// ]]>
</script>
Przykład SWFObject 2.1: (UWAGA - skrypt 2.1 musi się znaleźć w sekcji head!)
<html>
<head>
<script type="text/javascript"
src="/swfobject21/swfobject.js">
</script>
<script type="text/javascript"
src="/swfobject21/swfkrpanomousewheel.js">
</script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("6.0.0"))
{
swfobject.embedSWF("krpano.swf", "krpano",
"640", "480", "9.0.28",
"swfobject21/expressInstall.swf",
{pano:"test.xml"},
{allowfullscreen:true, bgcolor:"#000000"},
{id:'krpano', name:'krpano'});
swfkrpanomousewheel.registerObject("krpano");
}
else
{
document.getElementById("krpano").innerHTML =
'Flash Player 9 needed';
}
</script>
</head>
<body>
<div id="krpano">
<noscript>ERROR: no Javascript</noscript>
</div>
</body>
</html>
3. Osadzanie Flash poprzez Javascript używając skryptu embedpano
<script src="embedpano.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="verticalalign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not
activated<br/><br/></div></td></tr></table>
</noscript>
<script>
embedpano({swf:"krpano.swf", xml:"tour.xml", target:"pano",
html5:(document.domain ? "prefer" : "auto"), passQueryParameters:true});
</script>
</div>
FUNKCJE SKRYPTU EMBEDPANO





Tworzenie i umieszczanie krpano viewer na stronie HTML.
Automatycznie sprawdzanie wersji Flash lub wsparcie HTML5
Poprawki kółka myszy: (powiększanie, wsparcia Mac, touchpad)
Automatycznie umożliwiając korzystanie z Flashplayer trybie pełnoekranowym.
Skrypt może być również połączone razem z krpano HTML5 viewer w jednym pliku
dla naszego skryptu (na przykład "tour.js"). Podczas korzystania z dropletu krpano
„MAKE PANO” lub „MAKE VTOUR” zostanie to zrobione automatycznie.
ZAŁADOWANIE SKRYPTU
Skrypt należy załadować w dowolnym „poprawnym” miejscu na stronie html.
Dodając poniższy kod:
<SCRIPT SRC = "EMBEDPANO.JS"> </ SCRIPT>
KRPANO JAVASCRIPT W WERSJI 1.18
Aby uzyskać dostęp do krpano z poziomu Javascript będzie wymagane użycie obiektu
pobranego z Interfejsu Javascript.
Możemy wykorzystać 2 opcje:

za pomocą onReady, funkcja obsadzona w skrypcie „embedpano”, która zwraca
wymagane funkcje (zalecany sposób)

lub za pomocą połączenia javascript: document.getElementById (id)
Parametr id jest unikalnym identyfikatorem (domyślnie: "krpanoSWFObject”)
OBIEKT JAVASCRIPT KRPANO
Obiekt interfejsu JavaScript w Krpano posiada następujące funkcje:
• set(zmienna, wartość) - ustawia daną wartość w zmiennej krpano.
• get(zmienna) - zwraca wartość danej zmiennej krpano.
• call(akcja) - wykonuje dowolną akcję w krpano.
• spheretoscreen (h, v) - bezpośrednio wywołać działanie spheretoscreen.
• screentosphere (x, y) - bezpośrednio wywołać działanie screentosphere.
Funkcje spheretoscreen / screentosphere zwracają właściwości z obiektu x, y
UŻYCIE
Przypisanie do zmiennej “krpano” całego obiektu HTML DOM:
VAR KRPANO = DOCUMEN T.GETELEMENTBYID("KRPANOSWFOBJECT");
Pobieranie oraz wysyłanie zmiennych:
VAR FOV = NUMBER( KRPANO.GET("VIEW.FOV") );
FOV += 10.0;
KRPANO.SET("VIEW.FOV ", FOV);
Użycie funkcji call. W tym wypadku załadowanie innej panoramy.
KRPANO.CALL("LOADPAN O('PANO2.XML',NULL,MERGE,BLEND(1));");
WIRTUALNY SPACER - NOWOŚCI
WEBVR – PLUGIN
Wirtualny spacer coraz bardziej staje się dostępny dla każdego. Dzięki specjalnym goglom, które
wprowadziła na rynek firma Google, możemy poczuć się jeszcze bliżej wirtualnej rzeczywistości.
Najprostsze okulary, zaprezentowane poniżej wykonane są z tekstury, do samodzielnego złożenia.
Istnieją już produkty, o takiej samej metodzie działania, zrobione np. z plastyku. Co przeniesienia się
w wirtualny świat, oprócz gogli, potrzebny nam będzie smartphone. W celu odkrycia w 100%
możliwości, telefon powinien posiadać żyroskop.
Czy to dalej Wirtualny spacer? Tak – dzięki rozbudowanemu pluginowi, możemy tworzyć także
wycieczki pod nasze gogle.
Widok spaceru, do oglądania go za pomocą gogli jest podzielony na 2 równorzędne obrazy:
„Patrząc” na hotspot, po krótkiej chwili zostaje on aktywowany. Dzięki czemu, możemy przenosić się
pomiędzy panoramami.