Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Constuire le web en AR/VR

hellosct1
November 15, 2019
Technology
0
28

Constuire le web en AR/VR

Présentation effectuée à Meetup Firefox (15 novembre 2019) par Christophe Villeneuve sur "Construire le Web en AR / VR".
Une occasion pour voir les possibilités qu'offre le framework aframe de Mozilla dans le web

hellosct1

November 15, 2019
Tweet

More Decks by hellosct1

See All by hellosct1
Le SQL dans la cybersécurité avec MariaDB
hellosct1
0
98
La machine comprend ma voix
hellosct1
0
24
Rendre un projet accessible
hellosct1
0
120
Mixer le JSON dans une base de données
hellosct1
0
86
La sécurité applicative par le design
hellosct1
0
15
DevTools Firefox
hellosct1
0
23
MariaDB une base de donnees NewSQL
hellosct1
0
120
La boîte à outils de développements dans Firefox
hellosct1
0
280
Pister les pisteurs
hellosct1
0
29

Other Decks in Technology

See All in Technology
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
300
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
430
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions （PSS）
pacificspatialsolutions
0
280
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
530
「スニダン」開発組織の構造に込めた意図 ～組織作りはパッションや政治ではない！～
rinchsan
3
570
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
250
Databricks における 『MLOps』
databricksjapan
2
170
データベース02: データベースの概念
trycycle
0
160
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
520
Azureの基本的な権限管理の勉強会
yhana
0
530
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Design by the Numbers
sachag
274
18k
YesSQL, Process and Tooling at Scale
rocio
164
13k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Music & Morning Musume
bryan
41
5.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
GraphQLとの向き合い方2022年版
quramy
32
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
17
6.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k

Transcript

  1. @hellosct1 @[email protected] Christophe Villeneuve Construire le Web en AR/VR Firefox

    France User groupe – 15 novembre 2019

  2. Firefox France User groupe – 15 novembre 2019 La réalité…??xx!?&

    !!?? • Réalité Augmenté • Réalité Virtuelle • MiXte Réalité

  3. Firefox France User groupe – 15 novembre 2019 Aujourd’hui •

    Les fondamentaux / Les bases • La pratique

  4. Firefox France User groupe – 15 novembre 2019 Les fondamentaux

    La pratique

  5. Firefox France User groupe – 15 novembre 2019 La 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

  6. Firefox France User groupe – 15 novembre 2019 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 ?

  7. Firefox France User groupe – 15 novembre 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 webXR

  8. Firefox France User groupe – 15 novembre 2019 WebXR (1/2)

    • Nouveau standard web VR / MR / XR • Périphériques / matériels (devices) • Couverture • Interraction des utilisateurs • Rendu https://www.w3.org/TR/webxr Draft : 10 octobre 2019

  9. Firefox France User groupe – 15 novembre 2019 WebXR (2/2)

    • Soutenu par – Mozilla, Google, Microsoft, Amazon, Samsung… • Remplacera l’API WebVR • Actuellement compatible – Chrome – Firefox Réality • Prochainement : Firefox 71 (10 décembre) – Emulator WebXR

  10. Firefox France User groupe – 15 novembre 2019 Frameworks (avec

    extensions) A-Frame React 360 Three JS Babylon JS 4.0

  11. Firefox France User groupe – 15 novembre 2019 Les fondamentaux

    La pratique

  12. Firefox France User groupe – 15 novembre 2019 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>

  13. Firefox France User groupe – 15 novembre 2019 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>

  14. Firefox France User groupe – 15 novembre 2019 Page web

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

  15. @hellosct1 Geek FaërIes 2019 Avec un CMS / Framework (1/2)

    • Back office – Type de contenu – Views 03

  16. @hellosct1 Geek FaërIes 2019 Avec un CMS / Framework (2/2)

    • Texte Wysiwyg • Librairie : aframe-html-shader <a-scene> <a-plane position="0 2 -6" height="3" width="3" rotation="-45 0 0" material="shader: html; target: #planeHTML; ratio: height;transparent: true; »> </a-plane> </a-scene> <div style="width: 1px; height: 1px; overflow: hidden"> <div id="planeHTML"> <h2>Welcome!</h2> <p>Circa hos dies anuginis adulescens,</p> <p>Lampadi <strong>manu</strong>….</p> </div> </div>

  17. Firefox France User groupe – 15 novembre 2019 Objets en

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

  18. Firefox France User groupe – 15 novembre 2019 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>

  19. Firefox France User groupe – 15 novembre 2019 Outillage :

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

  20. @hellosct1 Geek FaërIes 2019 XR : A-Frame + CMS Drupal

    (1/2) 24 Démo en ligne : https://glitch.com/~xr-a-frame-and-drupal

  21. Firefox France User groupe – 15 novembre 2019 A-Frame editor

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

  22. @hellosct1 Geek FaërIes 2019 XR : A-Frame + CMS Drupal

    (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front

  23. Firefox France User groupe – 15 novembre 2019 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

  24. Firefox France User groupe – 15 novembre 2019 Plus loin

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

  25. Firefox France User groupe – 15 novembre 2019 Christophe Villeneuve

    @hellosct1 @[email protected] Demo Scripts : Merci https://github.com/hellosct1/mixte-reality Sources : - Liv Erickson - Hellosct1