XR and animation

XR & Animation
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Very Important Party 2019

@hellosct1 - Very Important Party 2019
La réalité…??xx!?& !!??
● Réalité Augmenté
● Réalité Virtuelle
● MiXte Réalité
API
UX Design

Aujourd’hui
●
Les fondamentaux / Les bases
●
Les … réalités …
●
L’interface utilisateur
3

Christophe Villeneuve ?
●
Consultant
●
Dresseur animaux Free Software

WebAR / WebVR / WebXR
●
Apporter la réalité virtuelle performance
dans web ouvert

Les fondamentaux
Les réalités
Interface utilisateur

miXte Réalité ?
●
Etre dans la scène 3D
●
Immersion
●
Transporte l'utilisateur
dans un environnement
numérique
●
Positionnement objet 3D
– Environnement réel
●
Ajouter des éléments réels
– Champ de vision
●
Intègre le contenu
numérique dans notre
monde physique
Réalité Virtuelle Réalité Augmentée

Réalité Amplifiée
Réalité Augmentée
Réalité Mélangée
Virtualité Augmentée
Réalité Virtuelle
Réalité Virtualisée
Réalité Réelle Réel
Réalité mixte
Virtuel
Où se positionne-t-on ?

De nombreux essais → Réalité Augmenté
Virtual Box
Nintendo (1995)
CardboardCardboard
… Beaucoup de tentatives

Où encore...

Matériels

WebXR
●
Périphériques / matériels (devices)
●
Couverture
●
Interraction des utilisateurs
●
Rendu
https://www.w3.org/TR/webxr
Draft : 21 May 2019

Puissance et Extensible
jQuery React Redux Vue.js ...
DOM
A-Frame
A-Frame
Components
Entity-component
Gamepad
A
C
C
E
S
S
I
B
L
E
Navigateurs
WebGL Web Audio WebVR Web Speech

Frameworks (avec extensions)
A-Frame React 360
Three JS Babylon JS 4.0

Les fondamentaux
Les … réalités...
Interface utilisateur

La réalité augmentée… pas vraiment
01
<div style='position: fixed; top: 10px; width:100%; text-align: left; z-index: 1;'>
<img src= "assets/image.png" width="300px">
</div>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>

La réalité augmentée
●
Utilisation
– Framework A-frame
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>

Page web
<!DOCTYPE html>
<html>
<head>
<script src="assets/lib/aframe-x.x.x.min.js"></script>
</head>
<body>
...
</body>
</html>

Réalite virtuelle

Vue 360°
10
<a-scene>
<a-assets>
<img id="my-image" src="assets/media/garden.png">
</a-assets>
<a-sky src="#my-image" rotation="0 -130 0" height="140" radius="100"
thete-length="300" scale="0.8 0.8 0.8"></a-sky>
<a-text color="#FF0000" font="kelsonsans" value="Welcome"
width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text>
</a-scene>

Par le code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="lib/a-frame/aframe-v0.8.2.min.js"></script>
</head>
<body>
<a-scene>
<a-curvedimage
src="media/image.jpg"
height="140"
radius="100"
thete-length="300"
rotation="0 0 0"
>
</a-curvedimage>
<a-sky color="darkgrey"></a-sky>
</a-scene>
</body>
</html>

Objets en VR
●
Objets fixes
●
Objets animés
●
Animation
●
Vidéo
●
Son
●
Texture
●
Objets externes
11

Mixte realite

Objets animés
14 Demo : https://glitch.com/~4-anim-1-plane-xr

A-Frame editor / inspector
https://github.com/aframevr/aframe-inspector●
Télécharger Inspecteur
●
Activé l’inspecteur (CTRL + ALT + I)

XR : Aframe + ThreeJS
22

Outillage : contenu 3 D
●
SketchUp
●
Unity VR
●
Oculus
●
Dcatia
●
Blender
●
Unreal engine
●
Vive
●
Autodesk 3D mask
●
Microsoft store

Editeur de scène 3D : Spoke
https://hubs.mozilla.com/spoke
●
Création de son propre espace
– De Réalité virtuelle
●
Import objets au format GLTF
– Runtime 3D Asset Felivry

Spoke
https://hubs.mozilla.com/spoke/projects

Plus loin
●
Exemples :
– https://aframe.io/
●
Docs
– http://aframe.io/docs/guide
●
Plugins & showcases
– http://github.com/aframevr/awesome-aframe#guides
-and-tutorials
●
MDN Web docs
●
A-frame doc
– https://aframe.io/docs
●
ThreeJS docs
– https://threejs.org/docs
●
W3C
– https://www.w3.org/TR
/webxr

L’avenir
●
Les vêtements et les
intégrations vocales
offrent des opportunités
pour de nouveaux
modèles d'interaction
●
Hardware (matériels)
– Dispositifs à moindre coût,
matériel autonome, champs
de vision plus larges,
camears de profondeur
plus disponibles
●
(plus de) Web
– Wasm, webRTC, Speech
to text, temps réel,
traduction, robots,
communication
multimodale
●
Framework
– Réduire les obstacles
au développement et
à la création de
contenu AR & VR

Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Demo Scripts :Merci https://github.com/hellosct1/mixte-realitySources :
- Liv Erickson
- Hellosct1

XR and animation

Recomendados

Recomendados

Más contenido relacionado

Similar a XR and animation

Similar a XR and animation (20)

Más de Christophe Villeneuve

Más de Christophe Villeneuve (20)

XR and animation