Lightning Talk: WebVR

Einblick in (webbasierte) Virtual Reality Technologien




Erstellt von Michael Grönert (BadToxic)

Diese Folien: badtoxic.de/webvr/lt

Auch auf Github: github.com/BadToxic/webvr-lt

Überblick

  • Was ist VR?
  • Was für Technologien gibt es?
  • Wie kann man VR entwickeln?
  • Beispiel WebVR

Virtuelle Realität

Samsung VR-Headset

Die Darstellung und gleichzeitige Wahrnehmung der Wirklichkeit und ihrer physikalischen Eigenschaften in einer in Echtzeit computergenerierten, interaktiven virtuellen Umgebung.

Technologien - Virtual Boy

Virtual Boy

Nintendo

1995 - Japan, USA

Steht auf dem Tisch

Rote LEDs auf schwarz

Technologien - HTC Vive

HTC Vive

HTC und Valve

Head-Mounted Display (HMD)

2x 1080×1200

Lighthouse, Room-Scaling

Technologien - Oculus Rift

Oculus Rift

Oculus VR

Head-Mounted Display (HMD)

2x 1080×1200

3D-Kamera

Technologien - PlayStation VR

PlayStation VR

Sony

Head-Mounted Display (HMD)

2x 960×1080

PS-Move, 3D-Kamera

Technologien - Gear VR

Gear VR

Samsung

Smartphone

Weitere

Entwicklung - Unreal Engine 4

 

 

 

 

 

 

 

unrealengine.com

Entwicklung - Unity 3D

 

 

 

 

 

 

 

unity3d.com

WebVR - Was ist das?

Javascript API (Application Programming Interface)

Ermöglicht VR in Browsern (z.B. für Cardboards)

Noch experimentell

webvr.info

WebVR - Wie benutzen?

WebVR Beispiel

badtoxic.de/webvr

webvr.badtoxic.de

Grundlage

Startpunkt: Boris’ WebVR Boilerplate repo

Nutzt: THREE.js


git clone https://github.com/borismus/webvr-boilerplate.git
					

Skybox

Textur zum "tapezieren" einer umhüllenden Sphere

Skybox per Google gefunden

Quelle: voodoomagic-solinvictus.blogspot.de

Größe muss Zweierpotenz sein

64x64, 256x128, 512x1024...

Skybox einbinden


var textureLoader = new THREE.TextureLoader();
var skybox;
textureLoader.load('img/skybox.png', function (skyboxTexture) {
  var skyboxMaterial = new THREE.MeshBasicMaterial();
  skyboxMaterial.map = skyboxTexture;
  skyboxMaterial.side = THREE.BackSide;

  // Create the mesh based on geometry and material
  var skyboxSphereGeometry = new THREE.SphereGeometry(50, 200, 200);
  var skyboxmesh = new THREE.Mesh(skyboxSphereGeometry, skyboxMaterial);
  skybox = new THREE.Mesh(skyboxSphereGeometry, skyboxMaterial);
  scene.add(skybox);
};
					

Würfel texturieren


textureLoader.load('img/toxicon_logo.png', function (toxiconLogoTexture) {
  var toxiconCubeGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
  var toxiconCubeMaterial = new THREE.MeshBasicMaterial();
  toxiconCubeMaterial.map = toxiconLogoTexture;
  toxiconCube = new THREE.Mesh(toxiconCubeGeometry, toxiconCubeMaterial);

  // Position cube mesh to be right in front of you.
  toxiconCube.position.set(0, controls.userHeight, -1);

  // Add cube mesh to your three.js scene
  scene.add(toxiconCube);
});
					

Fertig!

BadToxic's WebVR Beispiel in Chromium

badtoxic.de/webvr

webvr.badtoxic.de

Quellen | News

Vielen Dank

BadToxic's Mii mit HTC Vive

Homepage: badtoxic.de

Twitter: @BadToxic