Workshop

Browser Based AR & VR
(plus WebGL Academy)

Speaker: Carl Bateman


Tuesday, 16th May 2017
Skills Matter | Code Node, 10 South Place, EC2M 2RB, London


Next

-- 3rd October --
Moar Beginner's WebGL
Shaders - intermediate

WebGL Academy
Pixel Spirt
The Book of Shaders

Pixel Spirit

  

Agenda

  1. Khronos
  2. WebGL Thing of the Month
  3. WebGL Insights
  4. WebGL Academy
  5. VR
  6. AR

Help!!!

Suggestions

Show ‘n’ Tell

Volunteers

Talks / guests

Publicity

Sponsors

Meetup reports

WebGL Workshop
Khronos London Chapter

♠ Learning ♠
♣ Networking ♣
♥ Easier than googling ♥
♦ Beer ♦

Participate


Ask questions


Takes photos

Tweet!!!

#WebGLWorkshop
@SkillsMatter

Carl Bateman

Software Engineer
    

Carl Bateman

Computer Graphics (3D)
    

Carl Bateman

Maths

   eπi +1 = 0
   i² = j² = k² = ijk = -1


Fun!!!

Carl Bateman

Software Engineer

Khronos

Khronos.org

Khronos.org

Khronos.org

Khronos.org

WebGL Thing
of the Month

WebGL Thing of the Month

Mass Migrations

WebGL Insights


WebGL Insights FREE download (intermediate to advanced)

WebGL
Academy

WebGL Academy

Browser Based
AR & VR

AR & VR

Terms

VR - Virtual Reality
AR - Augmented Reality
MR - Mixed Reality
RR - Real Reality (WTF?)
ER - Extended Reality
XR - X Reality (I don’t think they’re even trying anymore)
and more, and more, and more...

AR & VR

Terms
 

AR & VR

Terms

AR & VR

Definition
 

AR – adding digital content to
   the existing environment

AR – immersion in an
   artificial environment

AR & VR

Requirements
AR VR
Device with camera

Positioning
 markers or visual positioning
Image processing
Input method
 Phone
Headset
Orientation/Positioning/Tracking


Input method

AR & VR

Early days

Multiple standards

Widely supported

Not widely adopted

Very active

Browser Based
AR

AR Demos

Hatsune Miku Dancing in Augmented Reality

WebAR Playground: AR in a Few Clicks

(more info)

AR Demos

 webgl.io/31/1
Hatsune Miku Dancing in Augmented Reality

AR Demos

 webgl.io/31/2
WebAR Playground: AR in a Few Clicks

AR Code

Browser Based
VR

VR

Stereoscopy - early "VR"

No parallax

VR

WebVR

Tango

Polyfills

VR Demos

Weather Particles
http://patcat.com/demos/VRWeatherParticles/

A-Frame Intro
https://aframe.io/examples/

VR Code

AR Resources

AR.js
https://github.com/jeromeetienne/AR.js

Argon.js
https://www.argonjs.io

Aruco
https://github.com/jcmellado/js-aruco

VR Resources

Mozilla VR
https://mozvr.com

Links, sources and emulators
https://webvr.info/

Browser and devices compatibility support
https://webvr.rocks/

Contact

 

meetup.com/WebGL-Workshop-London
[email protected]
@CarlBateman