Technique: réalité augmentée

2ème année Mastère Design Graphique - 21h d'enseignement


Hyper-Réalité de Keiichi Matsuda | http://km.cx

Le cours métrage propose une vision provocante et kaléidoscopique du futur, où les réalités physique et virtuelle n’en forment plus qu’une, et où la ville baigne dans une saturation médiatique.

 

Plus d'infos http://hyper-reality.co

Organisation du module de cours


6 Oct 7 oct 8 oct 10 Oct 18 Nov 20 Nov 8 Dec 11 Dec
Intro / démo / Exercice Exercices Exercices préparation Projet Projet Projet Projet Projet

3h

3h 3h 3h 2h 2h 3h 2h

Présentation théorique



Zapworks designer : créer un prototype AR en ligne


Multimédia et interaction

Insérer des textes, images, vidéos modèles3d animés...

 

Réalité augmenté en webAR

Expérience AR accessible depuis un QrCode pour voir un contenu en réalité augmenté sans application

 

Intégration site internet

Le projet peut être inséré dans une balise iframe sur n'importe quel site

 

AR, VR, Suivi google analytic...



Conseils sur Zapworks Designer


- Utiliser les calques ("Layer" en bas à gauche) pour sélectionner facilement un objet dans la scène par liste

- Glisser les calques en 2D avec transparence pour les organiser du plus éloigné (dessous) au plus près (dessus) 

- Utiliser des médias légers (5mo / média) pour ne pas ralentir le chargement de l'expérience  ( total 25 mo max ... hors vidéo .mp4)

- Choisir une Target Image avec visuels variés et riches (photo / texte) pour la stabilité de la reconnaissance

- Intégrer l'image du QRCode final dans votre Target Image pour améliorer la reconnaissance de l'image

- Le QRCode final imprimé sur votre image doit être celui téléchargé sur votre page projet publié (pas celui temporaire du preview!)

- Windows: Pour afficher les modèles 3D, télécharger gratuitement la visionneuse3D, sinon utiliser gltf-viewer


Exercices Zapworks


Télécharger
EXERCICE 1 - British Museum Flyer FR.zip
Archives compressées en format ZIP 41.8 MB

- Voir le Storyboard 1

Télécharger
EXERCICE 2 - New Balance Poster (FR).zip
Archives compressées en format ZIP 62.9 MB

- Voir le Storyboard 2

Télécharger
EXERCICE 3 - Traiteur Fredeville (FR).zi
Archives compressées en format ZIP 53.4 MB

- Voir le Storyboard 3

Ressources en ligne pour la création de contenus


 

Images 2D (.jpg, .png)

- Générer des images png transparentes par IA avec pnggen

- Textures & Images transparentes en png sur pngwing

- Photoshop / illustrator gratuit dans le navigateur avec Photopea / Vectorpea

  

Modèles 3D (.glb)

- Visualiser vos modèle 3d dans le navigateur web avec gltf-viewer

 

- Télécharger un modèle 3d en .glb sur Sketchfab (choisir "downloadable", sélectionner Texture size: 1k)

- Générer un modèle 3d avec Tripo3d.ai "Light version" (puis exporter .glb retopologize : "low" )

- Réduire le poids des modèles 3d pour les téléphones avec https://glb.babylonpress.org/

- Scanner un object en 3d depuis son téléphone avec Polycam

- Créer son avatar animé sur https://avaturn.me/ 

- Convertir une texture en .glb : éviter le bug d'animation image 2d dans Zapworks 

 

Vidéos (.mp4)

- Télécharger une vidéo youtube en .mp4 avec notube

- Créer des présentateurs video sur fond vert à partir de texte avec vidnoz

- Créer des avatars de plein pied et faire un montages riche avec deepbrain.io

- Télécharger des fichiers audio / bruitages en .mp3 sur freesound.org ou Soundbible

 

Divers

- Tester la stabilité d'une image Target avec Pictarize

- Générer un QrCode lié à un lien internet / médias / sms / contacts etc avec QR Code Generator

- Créer des formulaires intelligents basés sur demande avec formless.ai

- Convertir des fichiers avec freeconvert

- Paramétrer Google analytic avec Zapworks Designer après avoir créer un tracking ID

 

 

Exemple affiches Réalité augmentée (clic -> plein écran)


Réalité augmenté sur packaging (flasher en plein écran)


Présentation de produits "web embed" avec Designer


Pour insérer une expérience dans un site, Créer un trigger de type "Web Embed", puis paramétrer la vue dans le projet lui-même. https://docs.zap.works/designer/ar-web-embed/getting-started/

 

 

Présentation de produits "web embed" avec Designer


Exemple divers avec Zapworks Designer...


Devoirs à rendre


Evaluation 1 : Télécharger le devoir théorique. A rendre par email avec comme object "Evaluation 1" sur [email protected] avant le 18 novembre.

Evaluation 2 : Télécharger le devoir pratique à rendre jusqu'au 15 décembre (image target contenant un QrCode publié)