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

Constuire le web en AR/VR

hellosct1
November 15, 2019
Technology
0
32

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
SQL et NoSQL associe developpement PHP
hellosct1
0
33
Menez l’enquête
hellosct1
0
25
La performance malgré l’augmentation de la volumétrie
hellosct1
0
10
De l'anglais ves le Français
hellosct1
0
9
Apprenez à protéger vos données
hellosct1
0
8
Transpilation dans GNU COBOL
hellosct1
0
28
Les tests de validation pour PHP
hellosct1
0
8
Markdown dans la programmation
hellosct1
0
13
Le SQL dans la cybersécurité avec MariaDB
hellosct1
0
160

Other Decks in Technology

See All in Technology
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
barometrica
2
1k
4年で17倍に成長したエンジニア組織を支えるアーキテクチャの過去と未来
sansantech
PRO
1
400
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
160
SDNという名のデータプレーンプログラミングの歴史
ebiken
PRO
2
220
Oracle Cloud Infrastructure データベース・クラウド：各バージョンのサポート期間
oracle4engineer
PRO
30
13k
TypeScript100%で作るMovable Typeプラグイン
usualoma
2
100
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
200
TypeScriptの次なる大進化なるか！？　条件型を返り値とする関数の型推論
uhyo
2
1.8k
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
420
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
580
Is Go A Good Language to Build Compilers?
kennethanceyer
0
100
Mastering Quickfix
daisuzu
1
360

Featured

See All Featured
How GitHub (no longer) Works
holman
310
140k
Speed Design
sergeychernyshev
25
620
Side Projects
sachag
452
42k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Producing Creativity
orderedlist
PRO
341
39k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Music & Morning Musume
bryan
46
6.2k
Building Your Own Lightsaber
phodgson
103
6.1k

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