WebXR if X = how?

WebXR, si X = com?
Indira Knight Diego González
Començant amb la Web Immersiva

WebXR, if X = how?
Indira Knight Diego González
Getting started with the Immersive Web

• Chromium Based
• Evergreen browser

The physical
And virtual
Worlds are
Merging

Desktop browser Mobile browser XR browser
New browsers

https://samsunginter.net/fsf-xr

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

WebXR specification
WebVR 1.1
WebXR
var vrDisplay;
navigator.getVRDisplays().then(function (displays) {
if (displays.length > 0) {
vrDisplay = displays[0];
}
});
navigator.xr.requestDevice().then(device => {
onXRAvailable(device);
}).catch(error => {
console.error('Unable to retrieve an XR device: ', error);
});

Immersive Opportunities
Discoverability
Reach
Accessible VR
Immediacy
Socialness

Progressive Enhancement
6 DoF3 DoFMagic Window

https://samsunginter.net/pixel_travel

Frameworks
WebGL
THREE.JS
BABYLON.JS
A-FRAME
WebXR spec

BabylonJS
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.HemisphericLight();
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, false);
BABYLON.SceneLoader.Append("models/", "lapa_hi.glb", scene, function (newMeshes) {
scene.activeCamera = null;
scene.createDefaultCameraOrLight(true);
scene.activeCamera.attachControl(canvas, false);
});
return scene;
}

A-Frame
<a-scene>
<a-sky color="#33334C"></a-sky>
<a-gltf-model src="models/lapa_hi.glb" position="0 1.5 -1">
<a-animation attribute="rotation"
dur="5000"
fill="forwards"
to="0 360 0"
repeat="indefinite"></a-animation>
</a-gltf-model>
</a-scene>

A-Frame Entity component system
[ ]Position
Geometry
Material
Box
[ ]Position
Light
Color
Shadow
Light

pandapix
<a-entity a-layout="modifier:15;shape:circle" position="0 1.7 5" rotation="0 -5 0">
…
</a-entity>

pandapix
AFRAME.registerComponent('a-layout', {
schema: {
shape:{type: 'string', default: 'circle'},
modifier:{type:'int', default:4},
items:{type:'array', default:[]}
},
init: function(){
...
},
update : function(){
...
},
setCircleLayout : function(){
...
},
setGridLayout : function(){
...
},
setSpiralLayout : function(){
...
}
});

pandapix
init: function(){
this.data.items = this.el.children;
let curComp = this.el.components['a-layout’];
//set mutationObserver to the current element
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++)
curComp.refreshLayout();
});
});
observer.observe(this.el, { childList: true });
document.querySelector('a-scene').addEventListener('loaded', function(){
curComp.refreshLayout();
});
}

LOVE Sculpture

LOVE Sculpture
AFRAME.registerComponent("fly", {
schema: {
stepFactor: { type: "number", default: 0.005 },
isFlying: { type: "boolean", default: true }
},
tick: function () {
if (this.data.isFlying) {
let newP =
this.el.components.camera.camera.parent.position.add(this.el.components.camera.camera
.getWorldDirection().multiplyScalar(this.data.stepFactor));
this.el.setAttribute('position', newP)
}
}
});is.data.stepFactor));
}
});

LOVE Sculpture
<a-gltf-model
src="https://cdn.glitch.com/1244aa74-5494-4064-889a-
dea7bf841c8f%2Flove%20sculpture%20red.glb?1535453526033"
scale="4 4 4"
position="0 1 -4.5">
</a-gltf-model>

LOVE Sculpture
<a-assets>
<img id="union1-img" src="https://cdn.glitch.com/1244aa74-
5494-4064-889a-dea7bf841c8f%2Fmain.JPG?1536215311404">
</a-assets>
<a-image src="#union1-img" position="11.009 1.776 5.347"
rotation="0 90 0" scale="15 15 15"></a-image>

Ava

• Based in PNG images
• Using a ‘look-at’ component
• Structures built with help of online editor
• Explain sound in different browsers
Ava

• Depending on the browser, a ‘user gesture’
is required to start playing audio.
Ava - sound
https://bit.ly/webaudio-api

Solar System

Solar System
<a-entity id="mercury" position="0.3 0 0">
<a-animation
attribute="rotation"
dur="5000"
fill="forwards"
to="0 360 0"
repeat="indefinite"
easing="linear">
</a-animation>
<a-entity
geometry="primitive:sphere;radius:0.06"
position="3.5 0 0"
material="src:#mercury-img">
</a-entity>
</a-entity>

Solar System
<a-entity id="cameraRig" position="12.90811182621961 0.5 14.399030151885867">
<a-entity
id="player"
camera
look-controls
rotation="0 0 0">
</a-entity>
</a-entity>>

Thinking in 360
Users can look
anywhere
Where is the user able to
look?
How can the user move around the
scene?

Thinking in 360
Text can be hard to
read
Think in degrees and distance not pixels
Line length
Font weight
Distances-Independent Millimeters

Thinking in 360
Is the user a passive
participant
How will the user be able to
interact?

-ize it
• Manifest file + Service Worker
• Icon on home screen
• Add Offline capabilities
• True mobile VR experience

{
"lang": "en",
"dir": "ltr",
"name": "pandapix",
"description": "fotos + pandes",
"short_name": "pandapix",
"icons": [ {
"src": "imgs/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "imgs/icon512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "./indexr.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#3d3d3d",
"background_color": "#3d3d3d"
}

Physics System
https://samsunginter.net/word-drop/

Data Arduino
var serialport = new SerialPort('/COM3', {
parser: SerialPort.parsers.readline('n')
});
serialport.on('data', function(data){
var dataArray = data.split(',');
socket.emit("data", dataArray);
});
github.com/developdata/xr-sensors

Data Arduino
socket.on("data", function(data){
if(data[2]> 7){
box.setAttribute('material', 'color', color1);
} else {
box.setAttribute('material', 'color', color2);
}
})
<a-entity
id="box"
sensor ="color1: #1B3440; color2: #F2845C;"
geometry="primitive: box"
position="1 0.5 -3"
shadow="receive: false; cast: true">
</a-entity>
github.com/developdata/xr-sensors

AFRAME.registerComponent('rotation-reader', {
init: function(){
this.difference = function (a, b) { return Math.abs(a - b); }
this.player = document.getElementById('player')
this.initialRotation = 0;
this.move = true;
},
tick: function () {
var currentRotation = this.el.getAttribute('rotation');
if(this.initialRotation !== currentRotation.y){
var temp = this.difference(this.initialRotation, currentRotation.y);
if(temp > 10){
if(!this.moving){
this.player.setAttribute("universal-controls", "movementControls: automove,keyboard");
this.moving = true;
} else {
this.player.setAttribute("universal-controls", "movementControls: keyboard");
this.moving = false;
}
}
}
this.initialRotation = currentRotation.y;
}
});
github.com/developdata/web-vr-ux-ui

AR
• WebARonARCore
• WebARonARKit
• Three.ar.js
• AR.js
• Aframe-AR

WebXR, X =
• Accesible XR
• Linkability – The power of the URL
• Immediacy
• Democratic
• Bring designers and creative people to the development mix
• Explore new storytelling
• Play with depth and semantics of elements
• Progressive enhancement in a whole new dimension
• Allows you to explore and interact with data in new ways
• It´s ready now!*

What’s coming?
• WebXR specification
• Augmented Reality
• New devices
• Declarative depth?

Moltes gràcies!
@visual_stuff
@diekus
començant amb la web immersiva
@samsunginternet

WebXR if X = how?

More Related Content

What's hot (20)

Similar to WebXR if X = how? (20)

More from Luis Diego González-Zúñiga, PhD (17)

Recently uploaded (20)

WebXR if X = how?