SlideShare a Scribd company logo
https://buildAR.com - image credit
Web Standards for AR
An intro to the latest developments
on the Augmented Web Platform
Who's making these outlandish claims?
Rob Manson @nambor
CEO of MOB-labs the creators of buildAR.com
Chair of the W3C's Augmented Web Community Group
Invited Expert with the ISO, W3C & the Khronos Group
Author of “Getting started with WebRTC” - (Packt Publishing)
https://buildAR.com
What is the Augmented Web?
https://buildAR.com
It's what comes after HTML5
https://buildAR.com
https://buildAR.com - image credit
Key Concept:
1992-2000
WWW: Page based websites
key innovation: HREF
2000-2013
Web 2.0: AJAX driven social services
key innovation: XHR
2013-...
AWE: Sensor driven real-time web of things
key innovation: ArrayBuffer
https://buildAR.com
https://buildAR.com - image credit
https://buildAR.com
Key Concept:
https://buildAR.com
JSARToolkit demo
https://buildAR.com
FAST algorithm feature detection demo
Test your own device at: theAWEsomeWEB.com
https://buildAR.com
https://buildAR.com - image credit
First lets look at the broad
Stream processing pipeline concept
https://buildAR.com
Key Concept:
https://buildAR.com
So what the hell is a
Stream processing pipeline?
https://buildAR.com
The vision we proposed in 2010 is now here!
ARStandards Workshop in Seoul 2010 – Rob Manson
https://buildAR.com
Stream processing pipelines
1. Get Stream
2. Connect to a Stream pipeline
A way to connect a Stream to an ArrayBuffer
3. Get ArrayBuffer
5. Populate a scene Array with Array Buffer Views
6. Move through Views to process data
7. Output events and metadata
8. Update UI and/or send requests
Now lets look at the more specific
MediaStream processing pipeline
https://buildAR.com
https://buildAR.com
MediaStream processing pipelines
1. Get MediaStream
MediaStream from getUserMedia or RTCPeerConnection
2. Connect to a MediaStream pipeline
Canvas/Video, Image Capture, Recording,
ScriptNodePorcessor or Video/Shader pipelines
3. Get ArrayBuffer
new ArrayBuffer()
5. Populate a scene Array with Array Buffer Views
var scene = [new Uint8ClampedArray(buffer), ...]
6. Move through Views to process data
for each (var view in scene) { …process(view)... }
7. Output events and metadata
return results
8. Update UI and/or send requests
Wave hands inspriationally here!
https://buildAR.com
This is where the APIs are still evolving
1. Get MediaStream
MediaStream from getUserMedia or RTCPeerConnection
2. Connect to a MediaStream pipeline
Canvas/Video, Image Capture, Recording,
ScriptNodePorcessor or Video/Shader pipelines
3. Get ArrayBuffer
new ArrayBuffer()
6. Move through Views to process data
for each (var view in scene) { …process(view)... }
7. Output events and metadata
return results
8. Update UI and/or send requests
Wave hands inspriationally here!
5. Populate a scene Array with Array Buffer Views
var scene = [new Uint8ClampedArray(buffer), ...]
https://buildAR.com
This is where the Augmented Web comes to life
1. Get MediaStream
MediaStream from getUserMedia or RTCPeerConnection
2. Connect to a MediaStream pipeline
Canvas/Video, Image Capture, Recording,
ScriptNodePorcessor or Video/Shader pipelines
3. Get ArrayBuffer
new ArrayBuffer()
6. Move through Views to process data
for each (var view in scene) { …process(view)... }
7. Output events and metadata
return results
8. Update UI and/or send requests
Wave hands inspriationally here!
5. Populate a scene Array with Array Buffer Views
var scene = [new Uint8ClampedArray(buffer), ...]
https://buildAR.com
This is where the fun is!
1. Get MediaStream
MediaStream from getUserMedia or RTCPeerConnection
2. Connect to a MediaStream pipeline
Canvas/Video, Image Capture, Recording,
ScriptNodePorcessor or Video/Shader pipelines
3. Get ArrayBuffer
new ArrayBuffer()
6. Move through Views to process data
for each (var view in scene) { …process(view)... }
7. Output events and metadata
return results
8. Update UI and/or send requests
Wave hands inspriationally here!
5. Populate a scene Array with Array Buffer Views
var scene = [new Uint8ClampedArray(buffer), ...]
webcamtoy.com
https://buildAR.com
https://buildAR.com - image credit
Key Concept:
#$!%@#%@#$@$@!!!!!
https://buildAR.com
https://buildAR.com
Browser's have always had a “binary barrier”
The Video element
stream -> <video>
https://buildAR.com
Now we've broken through the “binary barrier”
The Video/Canvas pipeline
stream -> <video> -> <canvas> -> image data -> array buffer -> process -> output
https://buildAR.com
Now we've broken through the “binary barrier”
The Video/Canvas pipeline
stream -> <video> -> <canvas> -> image data -> array buffer -> process -> output
The Mediastream Image Capture API pipeline
stream -> track -> image capture -> image data -> array buffer -> process -> output
https://buildAR.com
Now we've broken through the “binary barrier”
The Video/Canvas pipeline
stream -> <video> -> <canvas> -> image data -> array buffer -> process -> output
The Mediastream Image Capture API pipeline
stream -> track -> image capture -> image data -> array buffer -> process -> output
The MediaStream Recording API pipeline
stream -> recorder -> blob -> file reader -> array buffer -> process -> output
https://buildAR.com
Now we've broken through the “binary barrier”
The Video/Canvas pipeline
stream -> <video> -> <canvas> -> image data -> array buffer -> process -> output
The Mediastream Image Capture API pipeline
stream -> track -> image capture -> image data -> array buffer -> process -> output
The MediaStream Recording API pipeline
stream -> recorder -> blob -> file reader -> array buffer -> process -> output
Plus other non-MediaStream pipelines:
????? -> Web Sockets/XHR/File/JS -> array buffer -> process -> output
Now lets take a closer look at the
Video/Canvas MediaStream pipeline
https://buildAR.com
https://buildAR.com
The Video/Canvas MediaStream pipeline
Access the camera (or some other stream) source
a. getUserMedia()
Setup <video> element in the DOM
a. declaratively then via getElementById or similar
b. createElement(“video”) (no need to appendChild())
Pipe camera stream into <video>
a. video.src = stream
Setup <canvas> element in the DOM
a. declaratively then via getElementById or similar
b. createElement(“canvas”) then appendChild()
Get 2D drawing context
a. canvas.getContext('2d');
Draw <video> frame onto <canvas>
a. canvas.drawImage(video, top, left, width, height);
Get RGBA Uint8ClampedArray of the pixels
a. context.getImageData(top, left, width, height).data.buffer;
Burn CPU (not GPU) cycles
a. fore each(var obj in view) { … }
NOTE: Integrate other streams & sensor data here
Render results
a. using HTML/JS/CSS
b. using another <canvas> and drawImage()
c. using WebGL
d. a combination of all
1. Get MediaStream
MediaStream from getUserMedia or RTCPeerConnection
2. Connect to a MediaStream pipeline
Canvas/Video, Image Capture or Recording pipelines
3. Get ArrayBuffer
new ArrayBuffer()
5. Populate a scene with Array Buffer Views
var scene = [new Uint8ClampedArray(buffer), ...]
6. Move through Views to process data
for each (var view in scene) { …process(view)... }
7. Output events and metadata
return results
8. Update UI and/or send requests
Wave hands inspriationally here!
Follow along on github: github.com/buildar/getting_started_with_webrtc
https://buildAR.com
The Video/Canvas MediaStream pipeline
Follow along on github: github.com/buildar/getting_started_with_webrtc
Access the camera (or some other stream) source
a. getUserMedia()
Setup <video> element in the DOM
a. declaratively then via getElementById or similar
b. createElement(“video”) (no need to appendChild())
Pipe camera stream into <video>
a. video.src = stream
Setup <canvas> element in the DOM
a. declaratively then via getElementById or similar
b. createElement(“canvas”) then appendChild()
Get 2D drawing context
a. canvas.getContext('2d');
Draw <video> frame onto <canvas>
a. canvas.drawImage(video, top, left, width, height);
Get RGBA Uint8ClampedArray of the pixels
a. context.getImageData(top, left, width, height).data.buffer;
Burn CPU (not GPU) cycles
a. fore each(var obj in view) { … }
NOTE: Integrate other streams & sensor data here
Render results
a. using HTML/JS/CSS
b. using another <canvas> and drawImage()
c. using WebGL
d. a combination of all
setInterval()
RequestAnimationFrame()
setTimeout()
Now lets compare that to the
WebGLSL based Video/Shader pipeline
https://buildAR.com
https://buildAR.com
The Video/Shader MediaStream pipeline
Access the camera (or some other stream) source
a. getUserMedia()
Setup <video> element in the DOM
a. declaratively then via getElementById or similar
b. createElement(“video”) (no need to appendChild())
Pipe camera stream into <video>
a. video.src = stream
Compile shaders from text in elements in the DOM
a. declaratively then via getElementById or similar
b. createElement(“canvas”) then appendChild()
Get 3D drawing context
a. canvas.getContext('webgl|experimental-webgl');
Load <video> frame into fragment shader
a. gl.texImage2D(..., video)
Burn GPU cycles
a. for each(var obj in view) { … }
NOTE: Integrate other streams & sensor data here
Render results
a. using HTML/JS/CSS
b. using another <canvas> and drawImage()
c. using WebGL
d. a combination of all
setInterval()
RequestAnimationFrame()
setTimeout()
https://buildAR.com - image credit
Key Concept:
ArrayBuffers and minimising copies
are the key to an efficient walk
https://buildAR.com
https://buildAR.com
Views are moveable windows
into the raw data streams
1. Get stream
MediaStream from getUserMedia or RTCPeerConnection
2. Connect to a MediaStream pipeline
Canvas/Video, Image Capture or Recording pipelines
3. Get ArrayBuffer
new ArrayBuffer()
6. Move through Views to process data
for each (var view in scene) { …process(view)... }
7. Output events and metadata
return results
8. Update UI and/or send requests
Wave hands inspriationally here!
5. Populate a scene Array with Array Buffer Views
var scene = [new Uint8ClampedArray(buffer), ...]
https://buildAR.com - image credit
Key Summary:
Where is the Augmented Web
up to right now?
https://buildAR.com
https://buildAR.com
Mobile AR vs. the Augmented Web
Mobile AR at end of 2009 Augmented Web at end of 2013
https://buildAR.com
Mobile AR vs. the Augmented Web
Apple had not yet opened up
camera access on iOS through
objective-c.
See the Letter from Ori
Mobile AR at end of 2009 Augmented Web at end of 2013
https://buildAR.com
Mobile AR vs. the Augmented Web
Apple had not yet opened up
camera access on iOS through
objective-c.
See the Letter from Ori
Apple has not yet opened up
camera access by adopting
getUserMedia()/WebRTC.
See 1.0 spec within ~5mths
Mobile AR at end of 2009 Augmented Web at end of 2013
https://buildAR.com
Mobile AR vs. the Augmented Web
Apple had not yet opened up
camera access on iOS through
objective-c.
See the Letter from Ori
QR codes, Geo AR and Fiducial
Marker tracking were commonly
available but Natural Feature
Tracking was still evolving.
Apple has not yet opened up
camera access by adopting
getUserMedia()/WebRTC.
See 1.0 spec within ~5mths
Mobile AR at end of 2009 Augmented Web at end of 2013
https://buildAR.com
Mobile AR vs. the Augmented Web
Apple had not yet opened up
camera access on iOS through
objective-c.
See the Letter from Ori
QR codes, Geo AR and Fiducial
Marker tracking were commonly
available but Natural Feature
Tracking was still evolving.
Apple has not yet opened up
camera access by adopting
getUserMedia()/WebRTC.
See 1.0 spec within ~5mths
QR codes, Geo AR and Fiducial
Marker tracking are now available
and Natural Feature Tracking is
quickly evolving in our R&D.
Mobile AR at end of 2009 Augmented Web at end of 2013
https://buildAR.com
Mobile AR vs. the Augmented Web
Apple had not yet opened up
camera access on iOS through
objective-c.
See the Letter from Ori
QR codes, Geo AR and Fiducial
Marker tracking were commonly
available but Natural Feature
Tracking was still evolving.
There was limited if any support for
rich 3D on all the mainstream AR
browsers.
Apple has not yet opened up
camera access by adopting
getUserMedia()/WebRTC.
See 1.0 spec within ~5mths
QR codes, Geo AR and Fiducial
Marker tracking are now available
and Natural Feature Tracking is
quickly evolving in our R&D.
Mobile AR at end of 2009 Augmented Web at end of 2013
https://buildAR.com
Mobile AR vs. the Augmented Web
Apple had not yet opened up
camera access on iOS through
objective-c.
See the Letter from Ori
QR codes, Geo AR and Fiducial
Marker tracking were commonly
available but Natural Feature
Tracking was still evolving.
There was limited if any support for
rich 3D on all the mainstream AR
browsers.
Apple has not yet opened up
camera access by adopting
getUserMedia()/WebRTC.
See 1.0 spec within ~5mths
QR codes, Geo AR and Fiducial
Marker tracking are now available
and Natural Feature Tracking is
quickly evolving in our R&D.
Rich 3D is supported in Chrome
and Firefox on Android. Safari
supports WebGL, and iOS devices
support OpenGL, but iSafari does
not have WebGL enabled
Mobile AR at end of 2009 Augmented Web at end of 2013
https://buildAR.com
Mobile AR vs. the Augmented Web
Apple had not yet opened up
camera access on iOS through
objective-c.
See the Letter from Ori
QR codes, Geo AR and Fiducial
Marker tracking were commonly
available but Natural Feature
Tracking was still evolving.
There was limited if any support for
rich 3D on all the mainstream AR
browsers.
Apple has not yet opened up
camera access by adopting
getUserMedia()/WebRTC.
See 1.0 spec within ~5mths
QR codes, Geo AR and Fiducial
Marker tracking are now available
and Natural Feature Tracking is
quickly evolving in our R&D.
Rich 3D is supported in Chrome
and Firefox on Android. Safari
supports WebGL, and iOS devices
support OpenGL, but iSafari does
not have WebGL enabled
(except for advertisers!!!?).
Mobile AR at end of 2009 Augmented Web at end of 2013
https://buildAR.com
What's in the near future?
Integrating WebRTC and Visual Search
Using WebGL/GLSL to utilise GPU parallelism
Khronos Group's OpenVX
Khronos Group's Camera Working Group
Lots more demos to share! 8)
https://buildAR.com
What's in the near future?
Integrating WebRTC and Visual Search
Using WebGL/GLSL to utilise GPU parallelism
Khronos Group's OpenVX
Khronos Group's Camera Working Group
Lots more demos to share! 8)
https://buildAR.com
What's in the near future?
Integrating WebRTC and Visual Search
Using WebGL/GLSL to utilise GPU parallelism
Khronos Group's OpenVX
Khronos Group's Camera Working Group
Lots more demos to share! 8)
https://buildAR.com
What's in the near future?
Integrating WebRTC and Visual Search
Using WebGL/GLSL to utilise GPU parallelism
Khronos Group's OpenVX
Khronos Group's Camera Working Group
Lots more demos to share! 8)
https://buildAR.com
Join the W3C's
Augmented Web Community Group
http://w3.org/community/ar
https://buildAR.com - image credit
Web Standards for AR
An intro to the latest developments
on the Augmented Web Platform

More Related Content

What's hot

[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Writing Tools using WebKit
Writing Tools using WebKitWriting Tools using WebKit
Writing Tools using WebKit
Ariya Hidayat
 
Structure your Play application with the cake pattern (and test it)
Structure your Play application with the cake pattern (and test it)Structure your Play application with the cake pattern (and test it)
Structure your Play application with the cake pattern (and test it)
yann_s
 
Moustamera
MoustameraMoustamera
Moustamera
Bram Vandewalle
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
 
Java microservicesdockerdockerhubusecase2
Java microservicesdockerdockerhubusecase2Java microservicesdockerdockerhubusecase2
Java microservicesdockerdockerhubusecase2
Subramanyam Vemala
 
Building Web Apps Sanely - EclipseCon 2010
Building Web Apps Sanely - EclipseCon 2010Building Web Apps Sanely - EclipseCon 2010
Building Web Apps Sanely - EclipseCon 2010
Chris Ramsdale
 
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
Yuji Hato
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
cromwellian
 
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
Rob Tweed
 
06 HTML5 Mobile
06 HTML5 Mobile06 HTML5 Mobile
06 HTML5 Mobile
Ynon Perek
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
React native by example by Vadim Ruban
React native by example by Vadim RubanReact native by example by Vadim Ruban
React native by example by Vadim Ruban
Lohika_Odessa_TechTalks
 
EWD 3 Training Course Part 16: QEWD Services
EWD 3 Training Course Part 16: QEWD ServicesEWD 3 Training Course Part 16: QEWD Services
EWD 3 Training Course Part 16: QEWD Services
Rob Tweed
 
JBoss World 2010
JBoss World 2010JBoss World 2010
JBoss World 2010
Chris Ramsdale
 
Take Your Angular App Glamping
Take Your Angular App GlampingTake Your Angular App Glamping
Take Your Angular App Glamping
Dennis Moon
 
GWT Overview And Feature Preview - SV Web JUG - June 16 2009
GWT Overview And Feature Preview - SV Web JUG -  June 16 2009GWT Overview And Feature Preview - SV Web JUG -  June 16 2009
GWT Overview And Feature Preview - SV Web JUG - June 16 2009
Fred Sauer
 
Continuous Delivery of Cloud Applications with Docker Containers and IBM Bluemix
Continuous Delivery of Cloud Applications with Docker Containers and IBM BluemixContinuous Delivery of Cloud Applications with Docker Containers and IBM Bluemix
Continuous Delivery of Cloud Applications with Docker Containers and IBM Bluemix
Florian Georg
 
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
Rob Tweed
 

What's hot (19)

[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
 
Writing Tools using WebKit
Writing Tools using WebKitWriting Tools using WebKit
Writing Tools using WebKit
 
Structure your Play application with the cake pattern (and test it)
Structure your Play application with the cake pattern (and test it)Structure your Play application with the cake pattern (and test it)
Structure your Play application with the cake pattern (and test it)
 
Moustamera
MoustameraMoustamera
Moustamera
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
Java microservicesdockerdockerhubusecase2
Java microservicesdockerdockerhubusecase2Java microservicesdockerdockerhubusecase2
Java microservicesdockerdockerhubusecase2
 
Building Web Apps Sanely - EclipseCon 2010
Building Web Apps Sanely - EclipseCon 2010Building Web Apps Sanely - EclipseCon 2010
Building Web Apps Sanely - EclipseCon 2010
 
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
 
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
 
06 HTML5 Mobile
06 HTML5 Mobile06 HTML5 Mobile
06 HTML5 Mobile
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
 
React native by example by Vadim Ruban
React native by example by Vadim RubanReact native by example by Vadim Ruban
React native by example by Vadim Ruban
 
EWD 3 Training Course Part 16: QEWD Services
EWD 3 Training Course Part 16: QEWD ServicesEWD 3 Training Course Part 16: QEWD Services
EWD 3 Training Course Part 16: QEWD Services
 
JBoss World 2010
JBoss World 2010JBoss World 2010
JBoss World 2010
 
Take Your Angular App Glamping
Take Your Angular App GlampingTake Your Angular App Glamping
Take Your Angular App Glamping
 
GWT Overview And Feature Preview - SV Web JUG - June 16 2009
GWT Overview And Feature Preview - SV Web JUG -  June 16 2009GWT Overview And Feature Preview - SV Web JUG -  June 16 2009
GWT Overview And Feature Preview - SV Web JUG - June 16 2009
 
Continuous Delivery of Cloud Applications with Docker Containers and IBM Bluemix
Continuous Delivery of Cloud Applications with Docker Containers and IBM BluemixContinuous Delivery of Cloud Applications with Docker Containers and IBM Bluemix
Continuous Delivery of Cloud Applications with Docker Containers and IBM Bluemix
 
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
 

Viewers also liked

Collada Reference Card 1.4
Collada Reference Card 1.4Collada Reference Card 1.4
Collada Reference Card 1.4
The Khronos Group Inc.
 
OpenMAX AL 1.0 Reference Card
OpenMAX AL 1.0 Reference CardOpenMAX AL 1.0 Reference Card
OpenMAX AL 1.0 Reference Card
The Khronos Group Inc.
 
OpenWF 1.0 Reference Card
OpenWF 1.0 Reference CardOpenWF 1.0 Reference Card
OpenWF 1.0 Reference Card
The Khronos Group Inc.
 
OpenVG 1.1 Reference Card
OpenVG 1.1 Reference Card OpenVG 1.1 Reference Card
OpenVG 1.1 Reference Card
The Khronos Group Inc.
 
Sycl 1.2 Reference Card
Sycl 1.2 Reference CardSycl 1.2 Reference Card
Sycl 1.2 Reference Card
The Khronos Group Inc.
 
EGL 1.4 Reference Card
EGL 1.4 Reference CardEGL 1.4 Reference Card
EGL 1.4 Reference Card
The Khronos Group Inc.
 
OpenGL 4.5 Reference Card
OpenGL 4.5 Reference CardOpenGL 4.5 Reference Card
OpenGL 4.5 Reference Card
The Khronos Group Inc.
 
OpenSL ES 1.1 Reference Card
OpenSL ES 1.1 Reference CardOpenSL ES 1.1 Reference Card
OpenSL ES 1.1 Reference Card
The Khronos Group Inc.
 
OpenWF 1.0 Composition Reference Card
OpenWF 1.0 Composition Reference CardOpenWF 1.0 Composition Reference Card
OpenWF 1.0 Composition Reference Card
The Khronos Group Inc.
 
OpenCL 2.0 Reference Card
OpenCL 2.0 Reference CardOpenCL 2.0 Reference Card
OpenCL 2.0 Reference Card
The Khronos Group Inc.
 
OpenVX 1.1 Reference Guide
OpenVX 1.1 Reference GuideOpenVX 1.1 Reference Guide
OpenVX 1.1 Reference Guide
The Khronos Group Inc.
 
OpenGL ES 3.2 Reference Guide
OpenGL ES 3.2 Reference GuideOpenGL ES 3.2 Reference Guide
OpenGL ES 3.2 Reference Guide
The Khronos Group Inc.
 
OpenGL SC 2.0 Quick Reference
OpenGL SC 2.0 Quick ReferenceOpenGL SC 2.0 Quick Reference
OpenGL SC 2.0 Quick Reference
The Khronos Group Inc.
 
OpenCL 2.1 Reference Guide
OpenCL 2.1 Reference GuideOpenCL 2.1 Reference Guide
OpenCL 2.1 Reference Guide
The Khronos Group Inc.
 
WebGL 2.0 Reference Guide
WebGL 2.0 Reference GuideWebGL 2.0 Reference Guide
WebGL 2.0 Reference Guide
The Khronos Group Inc.
 
Vulkan 1.0 Quick Reference
Vulkan 1.0 Quick ReferenceVulkan 1.0 Quick Reference
Vulkan 1.0 Quick Reference
The Khronos Group Inc.
 

Viewers also liked (16)

Collada Reference Card 1.4
Collada Reference Card 1.4Collada Reference Card 1.4
Collada Reference Card 1.4
 
OpenMAX AL 1.0 Reference Card
OpenMAX AL 1.0 Reference CardOpenMAX AL 1.0 Reference Card
OpenMAX AL 1.0 Reference Card
 
OpenWF 1.0 Reference Card
OpenWF 1.0 Reference CardOpenWF 1.0 Reference Card
OpenWF 1.0 Reference Card
 
OpenVG 1.1 Reference Card
OpenVG 1.1 Reference Card OpenVG 1.1 Reference Card
OpenVG 1.1 Reference Card
 
Sycl 1.2 Reference Card
Sycl 1.2 Reference CardSycl 1.2 Reference Card
Sycl 1.2 Reference Card
 
EGL 1.4 Reference Card
EGL 1.4 Reference CardEGL 1.4 Reference Card
EGL 1.4 Reference Card
 
OpenGL 4.5 Reference Card
OpenGL 4.5 Reference CardOpenGL 4.5 Reference Card
OpenGL 4.5 Reference Card
 
OpenSL ES 1.1 Reference Card
OpenSL ES 1.1 Reference CardOpenSL ES 1.1 Reference Card
OpenSL ES 1.1 Reference Card
 
OpenWF 1.0 Composition Reference Card
OpenWF 1.0 Composition Reference CardOpenWF 1.0 Composition Reference Card
OpenWF 1.0 Composition Reference Card
 
OpenCL 2.0 Reference Card
OpenCL 2.0 Reference CardOpenCL 2.0 Reference Card
OpenCL 2.0 Reference Card
 
OpenVX 1.1 Reference Guide
OpenVX 1.1 Reference GuideOpenVX 1.1 Reference Guide
OpenVX 1.1 Reference Guide
 
OpenGL ES 3.2 Reference Guide
OpenGL ES 3.2 Reference GuideOpenGL ES 3.2 Reference Guide
OpenGL ES 3.2 Reference Guide
 
OpenGL SC 2.0 Quick Reference
OpenGL SC 2.0 Quick ReferenceOpenGL SC 2.0 Quick Reference
OpenGL SC 2.0 Quick Reference
 
OpenCL 2.1 Reference Guide
OpenCL 2.1 Reference GuideOpenCL 2.1 Reference Guide
OpenCL 2.1 Reference Guide
 
WebGL 2.0 Reference Guide
WebGL 2.0 Reference GuideWebGL 2.0 Reference Guide
WebGL 2.0 Reference Guide
 
Vulkan 1.0 Quick Reference
Vulkan 1.0 Quick ReferenceVulkan 1.0 Quick Reference
Vulkan 1.0 Quick Reference
 

Similar to Web Standards for AR workshop at ISMAR13

Augmented Reality is just a feature!
Augmented Reality is just a feature!Augmented Reality is just a feature!
Augmented Reality is just a feature!
Rob Manson
 
How to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NETHow to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NET
Ozeki Informatics Ltd.
 
Web Apps
Web AppsWeb Apps
Web Apps
Tim Wray
 
WebRTC Standards & Implementation Q&A - All about browser interoperability
WebRTC Standards & Implementation Q&A - All about browser interoperabilityWebRTC Standards & Implementation Q&A - All about browser interoperability
WebRTC Standards & Implementation Q&A - All about browser interoperability
Amir Zmora
 
Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
Framgia Vietnam
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
Patrick Lauke
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
Ariya Hidayat
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
Ariya Hidayat
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
 
When Smalltalk Meets the Web
When Smalltalk Meets the WebWhen Smalltalk Meets the Web
When Smalltalk Meets the Web
ESUG
 
Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)
Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)
Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)
Obeo
 
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
Amir Zmora
 
Elizabeth Perry: Processing programming language, part 2
Elizabeth Perry: Processing programming language, part 2Elizabeth Perry: Processing programming language, part 2
Elizabeth Perry: Processing programming language, part 2
ÚISK FF UK
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
Christopher Schmitt
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
DataLeader.io
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
JooinK - DevFest Piemonte 2013
JooinK - DevFest Piemonte 2013JooinK - DevFest Piemonte 2013
JooinK - DevFest Piemonte 2013
JooinK
 

Similar to Web Standards for AR workshop at ISMAR13 (20)

Augmented Reality is just a feature!
Augmented Reality is just a feature!Augmented Reality is just a feature!
Augmented Reality is just a feature!
 
How to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NETHow to implement camera recording for USB webcam or IP camera in C#.NET
How to implement camera recording for USB webcam or IP camera in C#.NET
 
Web Apps
Web AppsWeb Apps
Web Apps
 
WebRTC Standards & Implementation Q&A - All about browser interoperability
WebRTC Standards & Implementation Q&A - All about browser interoperabilityWebRTC Standards & Implementation Q&A - All about browser interoperability
WebRTC Standards & Implementation Q&A - All about browser interoperability
 
Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
 
When Smalltalk Meets the Web
When Smalltalk Meets the WebWhen Smalltalk Meets the Web
When Smalltalk Meets the Web
 
Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)
Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)
Zero to One : How to Integrate a Graphical Editor in a Cloud IDE (27.10.2021)
 
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
 
Elizabeth Perry: Processing programming language, part 2
Elizabeth Perry: Processing programming language, part 2Elizabeth Perry: Processing programming language, part 2
Elizabeth Perry: Processing programming language, part 2
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 
JooinK - DevFest Piemonte 2013
JooinK - DevFest Piemonte 2013JooinK - DevFest Piemonte 2013
JooinK - DevFest Piemonte 2013
 

More from Rob Manson

The Power of AR & VR in Learning
The Power of AR & VR in LearningThe Power of AR & VR in Learning
The Power of AR & VR in Learning
Rob Manson
 
Immersive Sydney - #WebXRWeek
Immersive Sydney - #WebXRWeekImmersive Sydney - #WebXRWeek
Immersive Sydney - #WebXRWeek
Rob Manson
 
The Extended Reality Landscape #Reality17
The Extended Reality Landscape #Reality17The Extended Reality Landscape #Reality17
The Extended Reality Landscape #Reality17
Rob Manson
 
ISMAR17 - Augmenting, Mixing & Extending Reality on the web
ISMAR17 - Augmenting, Mixing & Extending Reality on the webISMAR17 - Augmenting, Mixing & Extending Reality on the web
ISMAR17 - Augmenting, Mixing & Extending Reality on the web
Rob Manson
 
Immersive Computing @ #YOWConnected 2017
Immersive Computing @ #YOWConnected 2017Immersive Computing @ #YOWConnected 2017
Immersive Computing @ #YOWConnected 2017
Rob Manson
 
Immersive - Sydney July 2017
Immersive - Sydney July 2017Immersive - Sydney July 2017
Immersive - Sydney July 2017
Rob Manson
 
Computer Vision - now working
 in over 2 Billion Web Browsers!
Computer Vision - now working
 in over 2 Billion Web Browsers!Computer Vision - now working
 in over 2 Billion Web Browsers!
Computer Vision - now working
 in over 2 Billion Web Browsers!
Rob Manson
 
Build your own reality
Build your own realityBuild your own reality
Build your own reality
Rob Manson
 
The future is un-Real
The future is un-RealThe future is un-Real
The future is un-Real
Rob Manson
 
The Augmented Web delivers AR to the masses
The Augmented Web delivers AR to the massesThe Augmented Web delivers AR to the masses
The Augmented Web delivers AR to the masses
Rob Manson
 
Introduction to AR
Introduction to ARIntroduction to AR
Introduction to AR
Rob Manson
 
Web Standards adoption in the AR market
Web Standards adoption in the AR marketWeb Standards adoption in the AR market
Web Standards adoption in the AR market
Rob Manson
 
Now here is everywhere
Now here is everywhereNow here is everywhere
Now here is everywhere
Rob Manson
 
AR is the UI for Pervasive Computing
AR is the UI for Pervasive ComputingAR is the UI for Pervasive Computing
AR is the UI for Pervasive Computing
Rob Manson
 
Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...
Rob Manson
 
Web Standards based Augmented Reality
Web Standards based Augmented RealityWeb Standards based Augmented Reality
Web Standards based Augmented Reality
Rob Manson
 
Is that sense-able?
Is that sense-able?Is that sense-able?
Is that sense-able?
Rob Manson
 
What is web3?
What is web3?What is web3?
What is web3?
Rob Manson
 
streetARt case study for ARE2011
streetARt case study for ARE2011streetARt case study for ARE2011
streetARt case study for ARE2011
Rob Manson
 
ARSyd March 2011
ARSyd March 2011ARSyd March 2011
ARSyd March 2011
Rob Manson
 

More from Rob Manson (20)

The Power of AR & VR in Learning
The Power of AR & VR in LearningThe Power of AR & VR in Learning
The Power of AR & VR in Learning
 
Immersive Sydney - #WebXRWeek
Immersive Sydney - #WebXRWeekImmersive Sydney - #WebXRWeek
Immersive Sydney - #WebXRWeek
 
The Extended Reality Landscape #Reality17
The Extended Reality Landscape #Reality17The Extended Reality Landscape #Reality17
The Extended Reality Landscape #Reality17
 
ISMAR17 - Augmenting, Mixing & Extending Reality on the web
ISMAR17 - Augmenting, Mixing & Extending Reality on the webISMAR17 - Augmenting, Mixing & Extending Reality on the web
ISMAR17 - Augmenting, Mixing & Extending Reality on the web
 
Immersive Computing @ #YOWConnected 2017
Immersive Computing @ #YOWConnected 2017Immersive Computing @ #YOWConnected 2017
Immersive Computing @ #YOWConnected 2017
 
Immersive - Sydney July 2017
Immersive - Sydney July 2017Immersive - Sydney July 2017
Immersive - Sydney July 2017
 
Computer Vision - now working
 in over 2 Billion Web Browsers!
Computer Vision - now working
 in over 2 Billion Web Browsers!Computer Vision - now working
 in over 2 Billion Web Browsers!
Computer Vision - now working
 in over 2 Billion Web Browsers!
 
Build your own reality
Build your own realityBuild your own reality
Build your own reality
 
The future is un-Real
The future is un-RealThe future is un-Real
The future is un-Real
 
The Augmented Web delivers AR to the masses
The Augmented Web delivers AR to the massesThe Augmented Web delivers AR to the masses
The Augmented Web delivers AR to the masses
 
Introduction to AR
Introduction to ARIntroduction to AR
Introduction to AR
 
Web Standards adoption in the AR market
Web Standards adoption in the AR marketWeb Standards adoption in the AR market
Web Standards adoption in the AR market
 
Now here is everywhere
Now here is everywhereNow here is everywhere
Now here is everywhere
 
AR is the UI for Pervasive Computing
AR is the UI for Pervasive ComputingAR is the UI for Pervasive Computing
AR is the UI for Pervasive Computing
 
Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...
 
Web Standards based Augmented Reality
Web Standards based Augmented RealityWeb Standards based Augmented Reality
Web Standards based Augmented Reality
 
Is that sense-able?
Is that sense-able?Is that sense-able?
Is that sense-able?
 
What is web3?
What is web3?What is web3?
What is web3?
 
streetARt case study for ARE2011
streetARt case study for ARE2011streetARt case study for ARE2011
streetARt case study for ARE2011
 
ARSyd March 2011
ARSyd March 2011ARSyd March 2011
ARSyd March 2011
 

Recently uploaded

Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 

Recently uploaded (20)

Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 

Web Standards for AR workshop at ISMAR13

  • 1. https://buildAR.com - image credit Web Standards for AR An intro to the latest developments on the Augmented Web Platform
  • 2. Who's making these outlandish claims? Rob Manson @nambor CEO of MOB-labs the creators of buildAR.com Chair of the W3C's Augmented Web Community Group Invited Expert with the ISO, W3C & the Khronos Group Author of “Getting started with WebRTC” - (Packt Publishing) https://buildAR.com
  • 3. What is the Augmented Web? https://buildAR.com
  • 4. It's what comes after HTML5 https://buildAR.com
  • 6. Key Concept: 1992-2000 WWW: Page based websites key innovation: HREF 2000-2013 Web 2.0: AJAX driven social services key innovation: XHR 2013-... AWE: Sensor driven real-time web of things key innovation: ArrayBuffer https://buildAR.com
  • 11. Test your own device at: theAWEsomeWEB.com https://buildAR.com
  • 13. First lets look at the broad Stream processing pipeline concept https://buildAR.com
  • 15. So what the hell is a Stream processing pipeline? https://buildAR.com The vision we proposed in 2010 is now here! ARStandards Workshop in Seoul 2010 – Rob Manson
  • 16. https://buildAR.com Stream processing pipelines 1. Get Stream 2. Connect to a Stream pipeline A way to connect a Stream to an ArrayBuffer 3. Get ArrayBuffer 5. Populate a scene Array with Array Buffer Views 6. Move through Views to process data 7. Output events and metadata 8. Update UI and/or send requests
  • 17. Now lets look at the more specific MediaStream processing pipeline https://buildAR.com
  • 18. https://buildAR.com MediaStream processing pipelines 1. Get MediaStream MediaStream from getUserMedia or RTCPeerConnection 2. Connect to a MediaStream pipeline Canvas/Video, Image Capture, Recording, ScriptNodePorcessor or Video/Shader pipelines 3. Get ArrayBuffer new ArrayBuffer() 5. Populate a scene Array with Array Buffer Views var scene = [new Uint8ClampedArray(buffer), ...] 6. Move through Views to process data for each (var view in scene) { …process(view)... } 7. Output events and metadata return results 8. Update UI and/or send requests Wave hands inspriationally here!
  • 19. https://buildAR.com This is where the APIs are still evolving 1. Get MediaStream MediaStream from getUserMedia or RTCPeerConnection 2. Connect to a MediaStream pipeline Canvas/Video, Image Capture, Recording, ScriptNodePorcessor or Video/Shader pipelines 3. Get ArrayBuffer new ArrayBuffer() 6. Move through Views to process data for each (var view in scene) { …process(view)... } 7. Output events and metadata return results 8. Update UI and/or send requests Wave hands inspriationally here! 5. Populate a scene Array with Array Buffer Views var scene = [new Uint8ClampedArray(buffer), ...]
  • 20. https://buildAR.com This is where the Augmented Web comes to life 1. Get MediaStream MediaStream from getUserMedia or RTCPeerConnection 2. Connect to a MediaStream pipeline Canvas/Video, Image Capture, Recording, ScriptNodePorcessor or Video/Shader pipelines 3. Get ArrayBuffer new ArrayBuffer() 6. Move through Views to process data for each (var view in scene) { …process(view)... } 7. Output events and metadata return results 8. Update UI and/or send requests Wave hands inspriationally here! 5. Populate a scene Array with Array Buffer Views var scene = [new Uint8ClampedArray(buffer), ...]
  • 21. https://buildAR.com This is where the fun is! 1. Get MediaStream MediaStream from getUserMedia or RTCPeerConnection 2. Connect to a MediaStream pipeline Canvas/Video, Image Capture, Recording, ScriptNodePorcessor or Video/Shader pipelines 3. Get ArrayBuffer new ArrayBuffer() 6. Move through Views to process data for each (var view in scene) { …process(view)... } 7. Output events and metadata return results 8. Update UI and/or send requests Wave hands inspriationally here! 5. Populate a scene Array with Array Buffer Views var scene = [new Uint8ClampedArray(buffer), ...]
  • 25. https://buildAR.com Browser's have always had a “binary barrier” The Video element stream -> <video>
  • 26. https://buildAR.com Now we've broken through the “binary barrier” The Video/Canvas pipeline stream -> <video> -> <canvas> -> image data -> array buffer -> process -> output
  • 27. https://buildAR.com Now we've broken through the “binary barrier” The Video/Canvas pipeline stream -> <video> -> <canvas> -> image data -> array buffer -> process -> output The Mediastream Image Capture API pipeline stream -> track -> image capture -> image data -> array buffer -> process -> output
  • 28. https://buildAR.com Now we've broken through the “binary barrier” The Video/Canvas pipeline stream -> <video> -> <canvas> -> image data -> array buffer -> process -> output The Mediastream Image Capture API pipeline stream -> track -> image capture -> image data -> array buffer -> process -> output The MediaStream Recording API pipeline stream -> recorder -> blob -> file reader -> array buffer -> process -> output
  • 29. https://buildAR.com Now we've broken through the “binary barrier” The Video/Canvas pipeline stream -> <video> -> <canvas> -> image data -> array buffer -> process -> output The Mediastream Image Capture API pipeline stream -> track -> image capture -> image data -> array buffer -> process -> output The MediaStream Recording API pipeline stream -> recorder -> blob -> file reader -> array buffer -> process -> output Plus other non-MediaStream pipelines: ????? -> Web Sockets/XHR/File/JS -> array buffer -> process -> output
  • 30. Now lets take a closer look at the Video/Canvas MediaStream pipeline https://buildAR.com
  • 31. https://buildAR.com The Video/Canvas MediaStream pipeline Access the camera (or some other stream) source a. getUserMedia() Setup <video> element in the DOM a. declaratively then via getElementById or similar b. createElement(“video”) (no need to appendChild()) Pipe camera stream into <video> a. video.src = stream Setup <canvas> element in the DOM a. declaratively then via getElementById or similar b. createElement(“canvas”) then appendChild() Get 2D drawing context a. canvas.getContext('2d'); Draw <video> frame onto <canvas> a. canvas.drawImage(video, top, left, width, height); Get RGBA Uint8ClampedArray of the pixels a. context.getImageData(top, left, width, height).data.buffer; Burn CPU (not GPU) cycles a. fore each(var obj in view) { … } NOTE: Integrate other streams & sensor data here Render results a. using HTML/JS/CSS b. using another <canvas> and drawImage() c. using WebGL d. a combination of all 1. Get MediaStream MediaStream from getUserMedia or RTCPeerConnection 2. Connect to a MediaStream pipeline Canvas/Video, Image Capture or Recording pipelines 3. Get ArrayBuffer new ArrayBuffer() 5. Populate a scene with Array Buffer Views var scene = [new Uint8ClampedArray(buffer), ...] 6. Move through Views to process data for each (var view in scene) { …process(view)... } 7. Output events and metadata return results 8. Update UI and/or send requests Wave hands inspriationally here! Follow along on github: github.com/buildar/getting_started_with_webrtc
  • 32. https://buildAR.com The Video/Canvas MediaStream pipeline Follow along on github: github.com/buildar/getting_started_with_webrtc Access the camera (or some other stream) source a. getUserMedia() Setup <video> element in the DOM a. declaratively then via getElementById or similar b. createElement(“video”) (no need to appendChild()) Pipe camera stream into <video> a. video.src = stream Setup <canvas> element in the DOM a. declaratively then via getElementById or similar b. createElement(“canvas”) then appendChild() Get 2D drawing context a. canvas.getContext('2d'); Draw <video> frame onto <canvas> a. canvas.drawImage(video, top, left, width, height); Get RGBA Uint8ClampedArray of the pixels a. context.getImageData(top, left, width, height).data.buffer; Burn CPU (not GPU) cycles a. fore each(var obj in view) { … } NOTE: Integrate other streams & sensor data here Render results a. using HTML/JS/CSS b. using another <canvas> and drawImage() c. using WebGL d. a combination of all setInterval() RequestAnimationFrame() setTimeout()
  • 33. Now lets compare that to the WebGLSL based Video/Shader pipeline https://buildAR.com
  • 34. https://buildAR.com The Video/Shader MediaStream pipeline Access the camera (or some other stream) source a. getUserMedia() Setup <video> element in the DOM a. declaratively then via getElementById or similar b. createElement(“video”) (no need to appendChild()) Pipe camera stream into <video> a. video.src = stream Compile shaders from text in elements in the DOM a. declaratively then via getElementById or similar b. createElement(“canvas”) then appendChild() Get 3D drawing context a. canvas.getContext('webgl|experimental-webgl'); Load <video> frame into fragment shader a. gl.texImage2D(..., video) Burn GPU cycles a. for each(var obj in view) { … } NOTE: Integrate other streams & sensor data here Render results a. using HTML/JS/CSS b. using another <canvas> and drawImage() c. using WebGL d. a combination of all setInterval() RequestAnimationFrame() setTimeout()
  • 36. Key Concept: ArrayBuffers and minimising copies are the key to an efficient walk https://buildAR.com
  • 37. https://buildAR.com Views are moveable windows into the raw data streams 1. Get stream MediaStream from getUserMedia or RTCPeerConnection 2. Connect to a MediaStream pipeline Canvas/Video, Image Capture or Recording pipelines 3. Get ArrayBuffer new ArrayBuffer() 6. Move through Views to process data for each (var view in scene) { …process(view)... } 7. Output events and metadata return results 8. Update UI and/or send requests Wave hands inspriationally here! 5. Populate a scene Array with Array Buffer Views var scene = [new Uint8ClampedArray(buffer), ...]
  • 39. Key Summary: Where is the Augmented Web up to right now? https://buildAR.com
  • 40. https://buildAR.com Mobile AR vs. the Augmented Web Mobile AR at end of 2009 Augmented Web at end of 2013
  • 41. https://buildAR.com Mobile AR vs. the Augmented Web Apple had not yet opened up camera access on iOS through objective-c. See the Letter from Ori Mobile AR at end of 2009 Augmented Web at end of 2013
  • 42. https://buildAR.com Mobile AR vs. the Augmented Web Apple had not yet opened up camera access on iOS through objective-c. See the Letter from Ori Apple has not yet opened up camera access by adopting getUserMedia()/WebRTC. See 1.0 spec within ~5mths Mobile AR at end of 2009 Augmented Web at end of 2013
  • 43. https://buildAR.com Mobile AR vs. the Augmented Web Apple had not yet opened up camera access on iOS through objective-c. See the Letter from Ori QR codes, Geo AR and Fiducial Marker tracking were commonly available but Natural Feature Tracking was still evolving. Apple has not yet opened up camera access by adopting getUserMedia()/WebRTC. See 1.0 spec within ~5mths Mobile AR at end of 2009 Augmented Web at end of 2013
  • 44. https://buildAR.com Mobile AR vs. the Augmented Web Apple had not yet opened up camera access on iOS through objective-c. See the Letter from Ori QR codes, Geo AR and Fiducial Marker tracking were commonly available but Natural Feature Tracking was still evolving. Apple has not yet opened up camera access by adopting getUserMedia()/WebRTC. See 1.0 spec within ~5mths QR codes, Geo AR and Fiducial Marker tracking are now available and Natural Feature Tracking is quickly evolving in our R&D. Mobile AR at end of 2009 Augmented Web at end of 2013
  • 45. https://buildAR.com Mobile AR vs. the Augmented Web Apple had not yet opened up camera access on iOS through objective-c. See the Letter from Ori QR codes, Geo AR and Fiducial Marker tracking were commonly available but Natural Feature Tracking was still evolving. There was limited if any support for rich 3D on all the mainstream AR browsers. Apple has not yet opened up camera access by adopting getUserMedia()/WebRTC. See 1.0 spec within ~5mths QR codes, Geo AR and Fiducial Marker tracking are now available and Natural Feature Tracking is quickly evolving in our R&D. Mobile AR at end of 2009 Augmented Web at end of 2013
  • 46. https://buildAR.com Mobile AR vs. the Augmented Web Apple had not yet opened up camera access on iOS through objective-c. See the Letter from Ori QR codes, Geo AR and Fiducial Marker tracking were commonly available but Natural Feature Tracking was still evolving. There was limited if any support for rich 3D on all the mainstream AR browsers. Apple has not yet opened up camera access by adopting getUserMedia()/WebRTC. See 1.0 spec within ~5mths QR codes, Geo AR and Fiducial Marker tracking are now available and Natural Feature Tracking is quickly evolving in our R&D. Rich 3D is supported in Chrome and Firefox on Android. Safari supports WebGL, and iOS devices support OpenGL, but iSafari does not have WebGL enabled Mobile AR at end of 2009 Augmented Web at end of 2013
  • 47. https://buildAR.com Mobile AR vs. the Augmented Web Apple had not yet opened up camera access on iOS through objective-c. See the Letter from Ori QR codes, Geo AR and Fiducial Marker tracking were commonly available but Natural Feature Tracking was still evolving. There was limited if any support for rich 3D on all the mainstream AR browsers. Apple has not yet opened up camera access by adopting getUserMedia()/WebRTC. See 1.0 spec within ~5mths QR codes, Geo AR and Fiducial Marker tracking are now available and Natural Feature Tracking is quickly evolving in our R&D. Rich 3D is supported in Chrome and Firefox on Android. Safari supports WebGL, and iOS devices support OpenGL, but iSafari does not have WebGL enabled (except for advertisers!!!?). Mobile AR at end of 2009 Augmented Web at end of 2013
  • 48. https://buildAR.com What's in the near future? Integrating WebRTC and Visual Search Using WebGL/GLSL to utilise GPU parallelism Khronos Group's OpenVX Khronos Group's Camera Working Group Lots more demos to share! 8)
  • 49. https://buildAR.com What's in the near future? Integrating WebRTC and Visual Search Using WebGL/GLSL to utilise GPU parallelism Khronos Group's OpenVX Khronos Group's Camera Working Group Lots more demos to share! 8)
  • 50. https://buildAR.com What's in the near future? Integrating WebRTC and Visual Search Using WebGL/GLSL to utilise GPU parallelism Khronos Group's OpenVX Khronos Group's Camera Working Group Lots more demos to share! 8)
  • 51. https://buildAR.com What's in the near future? Integrating WebRTC and Visual Search Using WebGL/GLSL to utilise GPU parallelism Khronos Group's OpenVX Khronos Group's Camera Working Group Lots more demos to share! 8)
  • 52. https://buildAR.com Join the W3C's Augmented Web Community Group http://w3.org/community/ar
  • 53. https://buildAR.com - image credit Web Standards for AR An intro to the latest developments on the Augmented Web Platform

Editor's Notes

  1. http://www.flickr.com/photos/37380823@N03/3442372197/sizes/o/in/photostream/
  2. http://www.flickr.com/photos/hbart/3417599994/sizes/o/in/photostream/
  3. http://www.flickr.com/photos/congvo/301678287/sizes/o/in/photostream/
  4. http://www.khronos.org/streaminput/
  5. http://www.flickr.com/photos/eltman/353241574/sizes/o/in/photolist-xdspY-pTuti-5z6PrP-5WtYra-7TraYS-bPXMfB-5hVt66-frMcHT-8sTZzS-7Bjs8T-6MKBmQ-8PU77j-33fJed-Ht9xU-99aKN-cUrcA-6yEAWp-7Ezwo8-aet2qK-4d5TfF-rqwWj-9rRjqk-5Wyg3b-5WtYV4-wwJ1Z-6EdA7y-5f79J2-6G8fja-3yZu6S-4Y6cn2-rjKsj-dwh5ee-4D1juK-7uidYY-nkcwB-4VG9yz-3jUx3T-cu4KkC-cu4PmE-7498qy-6wrgXr-7Rubrv-348E4E-5yBq3E-8e96oG-bWZwfy-6QSudj-6QNEER-6QSug5-6QNEDp-6QNEFX/
  6. http://www.flickr.com/photos/xerones/101094011/sizes/o/in/photostream/
  7. http://www.calwatchdog.com/wp-content/uploads/2011/04/JohnCleeseSillyWalk1.jpg
  8. http://www.flickr.com/photos/ekcragg/5649296082/sizes/o/in/photostream/
  9. http://www.flickr.com/photos/37380823@N03/3442372197/sizes/o/in/photostream/