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

La réalité melangée dans vos applications

hellosct1
December 11, 2019
Technology
0
22

La réalité melangée dans vos applications

Présentation effectuée au Paris Open Source Summit 2019 (11 décembre 2019) par Christophe Villeneuve sur "La réalité mélangée dans vos applications".
Vous allez voir en associant la réalité augmentée et la réalité virtuelle la possibilité de manipuler les objets virtuelles pour les affichés dans les applications webs comme avec Drupal.

hellosct1

December 11, 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
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
強いチームと開発生産性
onk
PRO
38
12k
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
670
【LT】ソフトウェア産業は進化しているのか？ #Agilejapan
takabow
0
120
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
2
1.1k
組織成長を加速させるオンボーディングの取り組み
sudoakiy
3
320
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
340
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
150
セキュリティ運用って包括的にできていますか？SaaSを使って次のステップへ / Comprehensive Cyber Security Operations for Cloud Services Using SaaS
sakaitakeshi
0
150
OOM発生時のトラブルシューティング Profilerを活用できるか調査してみた
atsushii
0
150
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
250
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
260

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Rails Girls Zürich Keynote
gr2m
94
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Six Lessons from altMBA
skipperchong
27
3.5k
The Invisible Side of Design
smashingmag
298
50k
For a Future-Friendly Web
brad_frost
175
9.4k
RailsConf 2023
tenderlove
29
910
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Optimizing for Happiness
mojombo
376
70k
Music & Morning Musume
bryan
46
6.2k
How to train your dragon (web standard)
notwaldorf
88
5.7k

Transcript

  1. @hellosct1 @[email protected] Christophe Villeneuve La réalité mélangée dans vos applications

    Open Source Summit 2019

  2. ATOS OpenSource - @hellosct1 – La réalité…??xx!?& !!?? • Réalité

    Augmenté • Réalité Virtuelle • MiXte Réalité

  3. ATOS OpenSource - @hellosct1 – Aujourd’hui • Les fondamentaux /

    Les bases • La pratique • Interface utilisateur

  4. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface

    utilisateur

  5. ATOS OpenSource - @hellosct1 – La réalité mélangée ? •

    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. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – 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 : 5 Décembre 2019

  9. ATOS OpenSource - @hellosct1 – WebXR (2/2) • Soutenu par

    – Mozilla, Google, Microsoft, Amazon, Samsung… • Remplacera l’API WebVR • Actuellement compatible – Chrome – Firefox Réality • Prochainement : Firefox – Emulator WebXR

  10. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface

    utilisateur

  11. ATOS OpenSource - @hellosct1 – Frameworks AR

  12. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – Page web <!DOCTYPE html> <html>

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

  15. ATOS OpenSource - @hellosct1 – Avec un CMS / Framework

    (1/2) • Back office – Type de contenu – Views 03

  16. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – Frameworks (avec extensions) A-Frame React

    360 Three JS Babylon JS 4.0

  18. ATOS OpenSource - @hellosct1 – Objets en VR • Objets

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

  19. ATOS OpenSource - @hellosct1 – Outillage : objet / 3

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

  20. ATOS OpenSource - @hellosct1 – 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>

  21. ATOS OpenSource - @hellosct1 – XR : A-Frame + CMS

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

  22. ATOS OpenSource - @hellosct1 – XR : A-Frame + CMS

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

  23. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface

    utilisateur

  24. ATOS OpenSource - @hellosct1 – Interfaces utilisateurs http://www.createwebxr.com/webVR.html

  25. ATOS OpenSource - @hellosct1 – A-Frame editor / inspector https://github.com/aframevr/aframe-inspector

    • Télécharger Inspecteur • Activé l’inspecteur (CTRL + ALT + I)

  26. ATOS OpenSource - @hellosct1 – 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

  27. ATOS OpenSource - @hellosct1 – 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

  28. ATOS OpenSource - @hellosct1 – Christophe Villeneuve @hellosct1 @[email protected] Demo

    scripts : Merci https://github.com/hellosct1/mixte-reality Sources : - Liv Erickson - Hellosct1