Publication sur Sketchfab - Partager un modèle publié sur Sketchfab (HTML / réseaux sociaux) - Publication directe sur site - WebGL - Three.js
Publication sur Sketchfab :
- créer son compte
j'ai un compte avec un lien nommé : https://sketchfab.com/LagardeF
au départ on m'a indiqué que je pouvait y mettre un modèle par mois, puis j'ai eu droit à plus de possibilités,
ils indiquent : " Set your model to downloadable or for sale to gain 1 credit for the current month".
il est possible de définir des collections (pas testé)
- charger un modèle .glb ou un modèle .obj avec sa texture , puis paramétrer orientation et éclairage
Certains logiciels (3DF Zephyr , Blender) permettent d'exporter directement le modèle créé sur Blender
- partager et intégrer un modèle publié dans une page web (iframe)
Charger le modèle sur Sketchfab.
A) chargement
- télécharger le fichier .glb ou les 3 ou 4 fichiers ensemble (obj, mtl, un ou 2 jpg)
- renseigner titre, description, tag
- choisir possibilité ou non que le visiteur télécharge, si oui choix des droits
- sauvegarder
B) orientation et éclairage par "Edit 3D settings"
- orientation (roue dentée), avec x/Y/Z
- éclairage (lampe)
A) Chargement :
Possibilité de charger les 3 fichiers { .obj, .jpg (texture) et .mtl (lien obj - texture) } en un seul glisser - déposer. Pour moi les 3 fichiers sont sous le même répertoire donc pas de problème d'adressage obj - texture
il peut y avoir 2 fichiers de texture ; contrairement à l'essai de septembre2021 pour transférer dans Blender à partir de Metashape.
J'ai augmenté ma lisibilité avec un peu de description choix de "catégorie" (Art&Abstract) et tags (photogrammetry et sculpture)
Les droits : Non-téléchargeable / Téléchargeable gratuitement avec licence / Téléchargeable contre payement (réservé à ....)
Pour téléchargement gratuit, possibilité de choisir la licence en combinant : Attribution / Non Commercial / No derivatives / Share alike (à l'identique)
Attribution : d'autres peuvent distribuer, remixer, modifier et s'appuyer sur votre travail tant qu'ils vous attribuent la création originale.
Non Commercial : Les autres ne peuvent pas utiliser votre travail commercialement.
Pas de dérivés : Les autres peuvent redistribuer tant qu'il est transmis tel quel et en totalité.
Partagez à l'identique : les autres peuvent remixer, modifier et s'appuyer sur votre travail tant qu'ils licencient leurs nouvelles créations sous les mêmes conditions.
Ne pas oublier de sauver (en bas à droite) avant d'éditer les "3D Settings"
B) orientation et éclairage par "Edit 3D settings"
- orientation (icône roue dentée de la barre de menu), essayer les cases X/Y/Z pour qu'il s'affiche correctement au départ
- éclairage (icône lampe de la barre de menu)
documentation sous https://help.sketchfab.com/hc/en-us/articles/203557159-Lighting
3 sources possibles de lumière
- les positionner et les orienter : mon expérience : c'est difficile ;
- choisir le type et paramétrer l'intensité (+ dans certains types) les types :
- "Direction" : La lumière directionnelle simule la lumière émise par le soleil.
- "Point" : Les lumières ponctuelles simulent de petites sources de lumière, telles que des ampoules.
- "Spot" : Le spot est similaire à un spot de théâtre ou à une lampe de bureau. Il projette la lumière comme un cercle.
- "Hemi" : La lumière hémisphérique simule l'effet d'un ciel couvert avec une lumière rebondissant sur le sol. Il est similaire à la lumière directionnelle.
Il y a d'autres possibilités - non explorées
(ex : The Ground Shadows feature allows you to automatically add a ground plane under a model without creating it yourself before uploading.)
Partager et intégrer un modèle publié sur Sketchfab dans une page web et sur les réseaux sociaux
La fonction de partage (Share) fournit un lien direct (court, ex : https://skfb.ly/o7tNV) un code d'intégration dans une page web, et des possibilité de partage sur nombre de réseaux sociaux
La fonction d'intégration (embed) permet de paramétrer le code d'intégration (la taille notamment).
Il semble possible de faire plus avec l'API Viewer en javascript ; ce viewer fournit des fonctions pour démarrer, arrêter la visionneuse, déplacer la caméra, prendre des captures d'écran et plus encore.
à explorer ...
Publication directe sur un site web - WebGL - Three.js - Blend4Web
A) les 3 couches logiciels :
- Diverses Bibliothèques ou API de fonctions directement appelables dans le fichier HTML : Three.js / Blend4Web / SceneJS / BabylonJS / ...
- WebGL API JavaScript qui est compatible avec la majeure partie des navigateurs Web et mobiles (successeur éventuel : WebGPU en cours de développement )
- OpenGL ES 3.1 or OpenGL / Vulkan = drivers adaptés à chaque types de machine (PC Windows, Mac, Téléphone Androïd, iPhone).
WebGL demande beaucoup de code pour réaliser des rendus basiques. Aussi WebGL est rarement utilisé directement, mais plutôt via des bibliothèques.
Les fichiers (HTML / JS) du site utilisent les fonctions de la librairie telle que Three.js, très répandu.
Les fonctions de la librairie (Three.js) appellent des fonctions WebGL
WebGL appelle le driver de la machine d'affichage selon le standard Open GL.
Voir présentation dans un mémoire : Intégration de la 3D sur un site Web grâce à WebGL
Pour les produits futurs, la version anglaise de Wikipédia est plus à jour que la version française , voir :
WebGPU : https://en.wikipedia.org/wiki/WebGPU
Vulkan suite de OpenGL (cf. https://en.wikipedia.org/wiki/Vulkan)
B) Three.js
Le site https://threejs.org/ Au menu : Learn (documentation / examples / editor) - Community - Code - Resources
Pour apprendre :
Un tutoriel vidéo sur Youtube - 53minutes : "Three.js Tutorial For Absolute Beginners"
https://youtu.be/xJAfLdUgdc4?list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho
3 nov. 2021 This tutorial covers the basics of the 3D library Three.js.
Un Tutoriel Three.js en texte+ illustration + code expliqué - EN Français !
"Intégrer un modèle 3D dans un site web " - par Florian, 2020"
https://florian-gouloubi.medium.com/tutoriel-three-js-9fceee4baa54
Premier exercice : le cube expliqué. Pour pouvoir afficher quoi que ce soit avec three.js, nous avons besoin de 5 éléments: la scène, la caméra, le moteur de rendu, un objet 3D et une boucle de rendu.
Création du document html/ La scène / La caméra / Le moteur de rendu / L’objet 3D / La boucle de rendu / Ajout des contrôles pour l’utilisateur
Deuxième exercice : la moto
Création d’un serveur web pour le développement web local/ Téléchargement du modèle 3D / Conversion du fichier compressé en .glb / Intégration du modèle 3D / Ajouts de lumières / Ajout du sol / Calcul des ombres / Ajout de paramètres de contrôles et rotation automatique / Responsive
Leçons en 45 h de vidéos à $95
Have you ever wanted to create stunning 3D websites?
The Best Way to Learn Three.js by Bruno Simon
In 45 hours of video, this course will teach you the secrets to create the coolest WebGL websites with Three.js whether your are a beginner or an advanced developer. 20,202 Students already enrolled
La stéréo dans Three.js
Un objet StereoCamera : "Dual PerspectiveCameras used for effects such as 3D Anaglyph or Parallax Barrier."
https://threejs.org/docs/index.html#api/en/cameras/StereoCamera
Des exemples de 3 type de présentation : :
- Anaglyphe : https://threejs.org/examples/#webgl_effects_anaglyph
- Entrelacé verticalement (pour écran à barrière de parallaxe ou lenticulaire) : https://threejs.org/examples/#webgl_effects_parallaxbarrier
- Stéréo côte-à-côte : https://threejs.org/examples/#webgl_effects_stereo
Exemple de mise en œuvre : http://www.flagarde.fr/modeles3D/index.php avec les modes suivant : Côte-à-côte, Croisé, Anaglyphe, Entrelacé H, Entrelacé V, Mono-2D
Remarques : pas de mode compressé ! (d'où pb. pour projection lunettes actives)
délai au chargement, une petite annonce d'attente serait bienvenue !
l'amplitude des mouvements est réduite volontairement, car le sol et les lumières sont liées à l'objet, c'est la scène d'ensemble qui tourne.
C) Blend4Web
Blend4Web est principalement un visionneur de modèles 3D ... (créés par Blender).
Blend4Web est un framework. Si le développeur utilise la version standard du « web player » mis à disposition qui permet de visionner ses créations sur un navigateur Web la licence est gratuite.
Pour passer de Blender à Blen4Web il faut simplement exporter son modèle 3D au format JSON ou HTML.
Site : https://www.blend4web.com Produit par Triumph Triumph LLC, a Moscow-based company
Deux tutoriels :
Blend4Web : exporter facilement en Html | Blenderlounge : tutoriel
http://blenderlounge.fr/blend4web-exporter-facilement-vos-scenes-en-html/
Making Links Between Web Based 3D Scenes, Turning an Object Into a Hyperlink, a blend4web Tutorial
https://www.youtube.com/watch?v=bggbicl6K70