+ All Categories
Home > Documents > WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical...

WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical...

Date post: 20-May-2020
Category:
Upload: others
View: 2 times
Download: 0 times
Share this document with a friend
30
Offspring of two worlds Diego González, PhD (@diekus) @diekus @samsunginternet Web XR
Transcript
Page 1: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Offspring of two worlds

Diego González, PhD (@diekus)

@diekus @samsunginternet

Web XR

Page 2: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

@diekus @samsunginternet

Page 3: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Chromium based

Android browser

Version 7.2 launched

That ain’tno moon!

@diekus @samsunginternet

Page 4: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Evergreen browser

@diekus @samsunginternet

Page 5: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Access to latestweb technologies

Progressive Web AppsWeb Speech API

Web BluetoothWeb Payments

Gamepad APIPhysical Web

CSS GridWebXR API

@diekus @samsunginternet

Page 6: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

VR

Web

@diekus @samsunginternet

Page 7: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Web

Linkability

Shared Context

User Choice

Asks your permission

Privacy-Friendly

Accessible

Cross-platformOpen

@diekus @samsunginternet

Page 8: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Low latency

Immersive

Orientation

Position

360° media

Different input methods

@diekus @samsunginternet

VR

Page 9: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Low latency

Immersive

Orientation

Position

360° media

Different input methods

@diekus @samsunginternet

VRpre-approvedclosed environment

wait several minutesdownload 100s of MBsexperience you discard after 1 use

Page 10: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

@diekus @samsunginternet

There’s surely a way of doing this

betteropencross-devicedifferentfrictionlessfasterprogressive

Page 11: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

@diekus @samsunginternet

betteropencross-devicedifferentfrictionlessfasterprogressive

Web

Page 12: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

What is WebXR?

“This specification describes support for accessing virtual reality (VR) and augmented reality (AR) devices, including sensors and head-mounted displays, on the Web”

@diekus @samsunginternet

Source: https://immersive-web.github.io/webxr/

Page 13: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

browser support

@diekus @samsunginternet

Page 14: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

hardware support• Magic Window• 3 DoF (orientation)• 6 DoF (orientation + position)• Controllers• WebSpeech API*

Page 15: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

source: webvr.rocks

* Compatible with WebVR

Samsung Internet Firefox Chromium Chrome Oculus Browser Edge Servo

Page 16: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

… and why does this matter?

@diekus @samsunginternet

Page 17: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 18: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Physical Web

QR Codes

Progressive Web Apps

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 19: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

AirHornerVR

• Icon on homescreen

• Independent of network and connectivity.

• Frictionless experiences by design.

• Preload Assets (Audio, Video)

• Automatic ingestion into app stores

Progressive Web Apps

Page 20: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

From a physical object to the browser to your home screen to your headset.

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 21: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Widest delivery network in existence

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 22: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Progressive enhancement

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 23: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

@utopiah@thomasbalou @diekus

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 24: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

bit.ly/hollywood-bubble

bit.ly/penca-beach

bit.ly/gardens-Singapore

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 25: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

NetworkedA-Frame

WebRTC

PEERJS

https://metaverse.samsunginter.net

https://hungry-pandas.glitch.me

@Lady_Ada_King

@diekus, @uveavanto, @poshaughnessy

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 26: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Accessible platform for creatives, developers and makers

three.js

Page 27: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Ava, by Achavanich Beaker Burial and Samsung Internet

https://samsunginter.net/ava

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 28: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

“it’s so full of niceness”

Explorathon, September 2017Museum of Scotland

socialreach ubiquitous/immediatediscoverability

@diekus @samsunginternet

new creators

Page 29: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

Web + VR =

• Democratize XR

• Help commoditize XR

• Can use a flexible tech stack

• Enable innovative experiences

@diekus @samsunginternet

social

reach

ubiquitous/immediatediscoverability

new creators

Page 30: WebXR · 2018-05-24 · Physical Web CSS Grid WebXR API ... Progressive Web Apps. From a physical object to the browser to your home screen to your headset. discoverability reach

@diekus @samsunginternet

eat. sleep. VRowse. repeat


Recommended