Autor: Piotr Karpiuk o 14. stycznia 2019
Amazon Sumerian to usługa chmury AWS pozwalająca tworzyć wirtualne światy 3D (w tym VR: Oculus Go, Oculus Rift, HTC Vive, HTC Vive Pro, Google Daydream, and Lenovo Mirage) w przeglądarce i na urządzenia mobilne. Oprócz własnoręcznie zaprojektowanych przedmiotów można w wygenerowanym świecie umieścić wirtualny awatar człowieka (tzw. host, kilkanaście do wyboru spośród kobiet i mężczyzn, białych, czarnoskórych itp.) i programować jego zachowanie oraz wypowiedzi.
Przykład takiej aplikacji mamy po prawej stronie. Otworzy się ona w nowoczesnej przeglądarce Chrome lub Firefox, przy czym tylko Firefox na Windows obsługuje WebVR, w pozostałych przeglądarkach dostaniemy ostrzeżenie „Your browser is not fully compatible with Amazon Sumerian” które można zignorować jeśli nie korzystamy z VR.
Kobieta czyta odpowiednio otagowany gestami tekst:
<speak>I can gesture while I speak. Some of my available gestures are:
<mark name="gesture:generic_a"/>generic a<break time="1500ms"/>,
<mark name="gesture:generic_b"/>generic b<break time="1500ms"/>,
<mark name="gesture:generic_c"/>generic c<break time="1500ms"/>,
<mark name="gesture:defense"/>defense<break time="2500ms"/>,
<mark name="gesture:wave"/>wave<break time="1500ms"/>,
<mark name="gesture:you"/>you<break time="2500ms"/>,
<mark name="gesture:many"/>many<break time="2500ms"/>,
<mark name="gesture:aggressive"/>aggressive<break time="1500ms"/>,
<mark name="gesture:in"/>in<break time="2500ms"/>,
<mark name="gesture:big"/>big<break time="4000ms"/>,
<mark name="gesture:one"/>one<break time="2500ms"/>,
<mark name="gesture:movement"/>movement<break time="3500ms"/>,
<mark name="gesture:heart"/>heart<break time="2000ms"/>, and
<mark name="gesture:self"/>self.<break time="1500ms"/></speak>
Host zawsze patrzy na rozmówcę, scenę można obracać (wciśnięty prawy klawisz myszki podczas ruszania, albo lewy i SHIFT).

Kolejna aplikacja (proszę kliknąć zdjęcie niżej) to przykład chatbota do zamawiania hotelu lub wypożyczania samochodu. Trzeba zgodzić się na udostępnienie swojego mikrofonu. Żeby mówić przyciskamy SPACJĘ i zwalniamy klawisz gdy skończymy mówić.
Rozmowę zaczynamy tak:
Zamawianie hotelu:
"Book a hotel"
"I want to make hotel reservations"
"Book a {Nights} stay in {Location}"
Zamawianie samochodu:
"Book a car"
"Reserve a car"
"Make a car reservation"
Bot jest realizowany przez usługę AWS Amazon Lex. Z kolei zamiana tekstu na mowę to usługa Amazon Polly.
Tags: AWS, chatbot, sumerian, webgl
Napisany w AWS, Cloud computing, HTML5, Nowoczesne przeglądarki WWW, Wizualizacja, WWW | Brak komentarzy »
Autor: Piotr Karpiuk o 17. grudnia 2018
Interaktywna wizualizacja pakietów języka Go i powiązań między nimi, przypominająca podróż przez galaktykę. Bardzo dobry przykład jak za pomocą WebGL można osiągnąć w przeglądarce przyzwoitą wydajność. Poruszamy się za pomocą klawiatury (klawisze W,Q,E,S,D,A, strzałki, Shift) – miłośnicy gier na pewno szybko się odnajdą. Zdecydowanie polecam pełny ekran. Dostępne są też wizualizacje repozytoriów pakietów innych języków programowania.
Napisany w HTML5, Nowoczesne przeglądarki WWW, Wizualizacja | Brak komentarzy »
Autor: Piotr Karpiuk o 30. listopada 2018
Pojawia się coraz więcej bibliotek JavaScriptu do wizualizacji grafów. Moją szczególną uwagę przykuły dwie z nich: 3d-force-graph (patrz interaktywna ilustracja obok, ewentualnie na pełnym ekranie) oraz force-graph renderujące grafy odpowiednio w 3D i 2D. W przypadku 3D wykorzystywane jest wspomaganie sprzętowe (GPU) co wspaniale przekłada się na wydajność i pozytywne wrażenia użytkownika.
Listę innych wartych spojrzenia bibliotek znajdziemy na stronie github.com/anvaka/graph-drawing-libraries. Spodobała mi się też biblioteka viz-js (javascriptowa wersja kultowego GraphViz firmy AT&T Labs), a także WebCola.
Napisany w datavis, HTML5, Nowoczesne przeglądarki WWW, Wizualizacja, WWW | Brak komentarzy »
Autor: Piotr Karpiuk o 5. lipca 2016
Dzisiejszy artykuł będzie narzędziach, jakie przeglądarka Google Chrome udostępnia programistom do debugowania i monitorowania aplikacji webowych, pod przyciskiem F12. Dla tych co mają dużo czasu, pełny opis możliwości jest dostępny na stronach Google’a: https://developers.google.com/web/tools/chrome-devtools/. Tutaj zakładam że Czytelnik ma już jakieś pojęcie o tych narzędziach, zapewne już z nich korzysta w jakimś zakresie i chciałby możliwie szybko poszerzyć swoją wiedzę o różne przydatne i ciekawe triki, które pojawiły się ostatnimi czasy, lub były od dawna ale nie są oczywiste.
Task Manager
Kombinacja klawiszy Shift+ESC otwiera managera zadań, w którym możemy zobaczyć zużycie zasobów komputera z rozbiciem na poszczególne zakładki przeglądarki:
Edycja drzewa DOM
Czytaj więcej »
Napisany w Google Chrome, JavaScript, Nowoczesne przeglądarki WWW, WWW | Brak komentarzy »
Autor: Piotr Karpiuk o 27. czerwca 2016
Archaiczny protokół HTTP stosowany w przeglądarkach WWW ma sporo wad. Jak na przykład powiadomić serwer, że użytkownik przestał korzystać z witryny (zamknął okno lub zakładkę z witryną, kliknął link prowadzący do innej witryny)? Ma to duże znaczenie dla celów analitycznych (informacje zwrotne dla twórców treści i reklamodawców), ale również dla twórców aplikacji webowych – chodzi o wyznaczenie momentu w którym można zamknąć sesję użytkownika, wylogować go i zwolnić zasoby serwera. JavaScript oferuje zdarzenie
unload
, które można przechwycić, ale jego obsługa niesie ze sobą ograniczenia: nie można w nim wykonać asynchronicznego wywołania AJAX. Deweloperzy radzą sobie z tym wykonując synchroniczne wywołanie AJAX (co niepotrzebnie wydłuża czas zamknięcia strony i/lub przejścia do nowej witryny), albo uciekając się do ryzykownych (niestandardowych) sztuczek takich jak tworzenie obiektu
Image
i wysyłanie danych do serwera w atrybucie
src
.
Beacon API (Chrome, Firefox, Opera) proponuje eleganckie rozwiązanie: asynchroniczne wysłanie sygnału w tle:
window.addEventListener('unload', function() { navigator.sendBeacon("/log", analyticsData); }, false);
Napisany w HTML5, Nowoczesne przeglądarki WWW, WWW | Brak komentarzy »