Virtual Reality

Co to jest?

Technologia generująca w pełni sztuczne otoczenie.
W skład wchodzi emisja obrazu, dźwięku, dotyku, zapachu i smaku.

Od kiedy?

Myron W. Krueger - prekursora zjawiska VR.
W 1969 wykonał projekty "Glowflow", który składał się z zaciemnionego pomieszczenia, czterech przezroczystych rur i cząsteczek fluorescencyjnych zmieniających kolor. Dodatkowo towarzyszył temu efekt dźwiękowy.

Zastosowanie

  • symulatory (np. sterowanie samolotów)
  • rozrywka (np. gry komputerowe)
  • leczenie fobii (np. lęku wysokości)
  • szkolenia zawodowe (np. operacje medyczne)
  • turystyka (np. wirtualne podróże)

Urządzenia

  • konsole do gier (np. PlayStation VR)
  • okulary VR (np. Google Cardboard)
  • kontrolery ruchu

Jak użyć?

Rodzina

Augmented Reality (AR)

Rzeczywistość rozszerzona

Mixed Reality (MR)

Rzeczywistość mieszana

Jak to działa?

WebGL

  • zapewnia dostęp do API 3D
  • bazuje na OpenGL ES (API dla grafiki 3D)
  • wykorzystuje elementy Canvas

WebVR

API zapewniające wsparcie dla urządzeń wirtualnej rzeczywistości.

  • wykrycie dostępnych urządzeń VR
  • zdiagnozowanie możliwości urządzenia
  • sprawdzenie położenia i orientacji urządzenia
  • rysowanie elementów na urządzeniu (canvas)

Wymagania

Urządzenia z kartą graficzną wspierającą min. OpenGL 2.0.

Dodatkowe wymagania

  • wbudowany żyroskop
  • wbudowany akcelerometr

React VR

Wprowadzenie

  • udostępnia CLI - "react-vr-cli"
  • bazuje na strukturze React / React Native
  • szybkie i przyjemne wejście
  • dokumentacja

Przykłady

* Korzysta z ThreeJS

A-Frame

Wprowadzenie

Przykłady

* Korzysta z ThreeJS

Three JS

Wprowadzenie

  • biblioteka trudniejsza w obsłudze
  • niższego poziomu, bez ograniczeń
  • wsparcie przy tworzeniu zaawansowanych scen 3D
  • dobra dokumentacja

Przykłady

Napiszmy coś

Minecraft VR

Wykorzystując framework A-frame, stwórzmy scenę, która będzie składała się z podstawowych elementów symulujących uproszczoną wersję gry minecraft.

1. Powierzchnia

Element na scenie, który posłuży jako podłoże.

Komponenty: a-scene, a-cylinder.

2. Otoczenie

Element będący tłem sceny.

Komponent: a-sky

3. Pudło

Dodajmy sześcian, który będzie się animował.

Komponent: a-entity, a-mixin, a-assets, a-animation

4. Oświetlenie

Wprowadźmy oświetlenie nadające efekt dnia i nocy.

Komponent: a-light, a-animation

5. Dodawanie sześcianów

Wprowadzić możliwość dodawania szcześcianów
w wybranym przez uytkownika miejscu.

Komponent: a-entity, a-camera, a-cursor

Więcej info

Dokumentacje

Alternatywy