jeelizAR
1.0.0
AVERTISSEMENT: Ce référentiel est déprécié et n'est plus maintenu. Veuillez utiliser webar.rocks.object à la place.
Café autonome AR - Profitez d'un café gratuit offert par Jeeliz!
La tasse de café est détectée et une animation 3D est jouée dans la réalité augmentée.
Cette démo ne s'appuie que sur Jeelizar et Three.js.
Voici les principales caractéristiques de la bibliothèque:
/demos/ : code source des démonstrations,/dist/ : coeur de la bibliothèque:jeelizAR.js : script principal minifié,/helpers/ : Scripts qui peuvent vous aider à utiliser cette bibliothèque dans certains cas d'utilisation spécifiques (comme WebXR),/libs/ : bibliothèques tiers et moteurs 3D utilisés dans les démos,/neuralNets/ : modèles de réseau neuronal. Ce sont quelques démonstrations de cette bibliothèque. Certains nécessitent une configuration spécifique.
Vous pouvez vous abonner à la chaîne YouTube Jeeliz ou au compte Twitter @startupjeeliz pour être tenu informé de nos développements de pointe.
Si vous avez fait une application ou une démonstration amusante en utilisant cette bibliothèque, nous serions ravis de le voir et d'insérer un lien ici! Contactez-nous sur Twitter @Startupjeeliz ou LinkedIn.
Ces démonstrations fonctionnent dans un navigateur Web standard. Ils ne nécessitent que l'accès à la webcam.
Pour exécuter ces démonstrations, vous avez besoin d'un navigateur Web implémentant WebXR. Nous espérons qu'il sera bientôt mis en œuvre dans tous les navigateurs Web!
Ensuite, vous pouvez exécuter ces démos:
Ces démos fonctionnent dans un navigateur Web standard sur mobile ou tablette. Ils comptent sur l'incroyable 8e moteur mural AR. Nous utilisons la version Web du moteur et nous avons commencé à partir de l'échantillon Web Three.JS. Le moteur Web n'est pas encore publié publiquement, vous devez donc:
index.html de la démo que vous souhaitez essayer (recherchez et remplacez <WEBAPPKEY> par votre vraie clé),La démo:
L'exemple d'intégration le plus élémentaire de cette bibliothèque est la première démo, la démo de détection de débogage. Dans index.html , nous incluons dans la section <head> Le script de bibliothèque principal, /dist/jeelizAR.js , l'assistance MediaStramAPI (anciennement appelé getUserMedia API ), /helpers/JeelizMediaStreamAPIHelper.js et le script de démonstration, demo.js :
< script src = " ../../dist/jeelizAR.js " > </ script >
< script src = " ../../helpers/JeelizMediaStreamAPIHelper.js " > </ script >
< script src = " demo.js " > </ script > Dans la section <body> d' index.html , nous mettons un élément <canvas> qui sera utilisé pour initialiser le contexte WebGL utilisé par la bibliothèque pour le calcul d'apprentissage en profondeur, et pour afficher éventuellement un rendu de débogage:
< canvas id = ' debugJeeARCanvas ' > </ canvas > Ensuite, dans demo.js , nous obtenons le flux vidéo webcam après le chargement de la page à l'aide de l'assistance MediaStream API :
JeelizMediaStreamAPIHelper . get ( DOMVIDEO , init , function ( ) {
alert ( 'Cannot get video bro :(' ) ;
} , {
video : true //mediaConstraints
audio : false
} ) Vous pouvez remplacer cette partie par une vidéo statique, et vous pouvez également fournir des contre-médias pour spécifier la résolution vidéo. Lorsque le flux vidéo est capturé, l' init la fonction de rappel est lancée. Il initialise cette bibliothèque:
function init ( ) {
JEEARAPI . init ( {
canvasId : 'debugJeeARCanvas' ,
video : DOMVIDEO ,
callbackReady : function ( errLabel ) {
if ( errLabel ) {
alert ( 'An error happens bro: ' , errLabel ) ;
} else {
load_neuralNet ( ) ;
}
}
} ) ;
} La fonction load_neuralNet charge le modèle de réseau neuronal:
function load_neuralNet ( ) {
JEEARAPI . set_NN ( '../../neuralNets/basic4.json' , function ( errLabel ) {
if ( errLabel ) {
console . log ( 'ERROR: cannot load the neural net' , errLabel ) ;
} else {
iterate ( ) ;
}
} , options ) ;
}Au lieu de donner l'URL du réseau neuronal, vous pouvez également donner l'objet JSON analysé.
L' iterate de la fonction démarre la boucle d'itération:
function iterate ( ) {
var detectState = JEEARAPI . detect ( 3 ) ;
if ( detectState . label ) {
console . log ( detectState . label , 'IS DETECTED YEAH !!!' ) ;
}
window . requestAnimationFrame ( iterate ) ;
} Le JEEARAPI.init prend un dictionnaire comme argument avec ces propriétés:
<video> video : élément vidéo HTML5 (peut provenir de l'assistance API MediaStream). Si false , mettez à jour la texture source à partir d'un videoFrameBuffer object fourni lors de l'appel JEEARAPI.detect(...) (comme dans les démos webxr),<dict> videoCrop : Voir la section des recadrages vidéo pour plus de détails<function> callbackReady : Fonction de rappel lancée lorsque vous êtes prêt ou s'il y avait une erreur. Appelé avec l'étiquette d'erreur ou false ,<string> canvasId : ID du canevas à partir duquel le contexte WebGL utilisé pour le traitement d'apprentissage en profondeur sera créé,<canvas> canvas : Si canvasId n'est pas fourni, vous pouvez également fournir directement l'élément <canvas><dict> scanSettings : Voir la section Paramètres de numérisation pour plus de détails<boolean> isDebugRender : Boolean. Si cela est vrai, un rendu de débogage sera affiché sur l'élément <canvas> . Utile pour le débogage, mais il devrait être réglé sur false pour la production car il gaspille les ressources informatiques GPU,<int> canvasSize : Taille de la toile de détection en pixels (doit être carré). Valeur spéciale -1 Gardez la taille de la toile. Par défaut: 512 .<boolean> followZRot : ne fonctionne qu'avec des modèles de réseau neuronal en diffusant des angles de tangage, de rouleau et de lacet. Cramez la fenêtre d'entrée en utilisant le rouleau de la détection actuelle pendant la phase de suivi,[<float>, <float>] ZRotRange : ne fonctionne que si followZRot = true . Randomiser l'angle de rotation initial. Les valeurs sont dans Radians. Par défaut: [0,0] . La fonction qui déclenche la détection est JEEARAPI.detect(<int>nDetectionsPerLoop, <videoFrame>frame, <dictionary>options) .
<int> nDetectionPerLoop est le nombre de détections consécutives procédées. Plus il est élevé, plus la détection sera rapide. Mais cela peut ralentir l'ensemble de l'application s'il est trop élevé car l'appel de fonction consommera trop de ressources GPU. Une valeur comprise entre 3 et 6 est conseillée. Si la valeur est 0 , le nombre de détection par boucle est adaptatif entre 1 et 6 avec une valeur initiale de 3 ,<videoFrame> frame est utilisée uniquement avec les démos Webxr (voir la section d'intégration WebXR). Sinon, définissez-le sur null ,<dictionary> options est un dictionnaire facultatif qui peut avoir ces propriétés:<float> thresholdDetectFactor : un facteur appliqué sur les seuils de détection pour l'objet détecté. La valeur par défaut est 1 . Par exemple, s'il équivaut 0.5 , la détection sera 2 fois plus facile.<string> cutShader : ajuster le shader par défaut utilisé pour recadrer la zone vidéo. Les valeurs possibles sont:null : valeur par défaut, n'applique pas de filtre et ne conserve pas les canaux RGBA,IOS : valeur optimisée des appareils iOS pour l'utilisation de WebXR uniquement. Copiez le canal rouge dans les autres canaux de couleur et appliquez un filtre médian de 5 pixelsmedian : appliquer un filtre médian 3x3 sur les canaux RVB séparément,null : valeur par défaut, n'applique pas de filtre et ne conserve pas les canaux RGBA<boolean> isSkipConfirmation : facilite la détection (plus sensible) mais peut déclencher plus de faux positifs. Par défaut: false ,<boolean> isKeepTracking : si nous devons continuer à suivre un objet après sa détection. Par défaut: false ,[<float>,<float>,<float>] trackingFactors : Sensibilité de suivi pour la traduction le long de l'axe X, Y et de l'échelle. Par défaut: 1.0 ,<float> thresholdDetectFactorUnstitch : arrêtez le suivi si le seuil de détection est inférieur à cette valeur. Utilisé uniquement si isKeepTracking=true . Devrait être plus petit que thresholdDetectFactor ,<float> secondNeighborFactor : ne confirmez pas un objet si un autre objet a un score de détection d'au moins secondNeighborFactor * objectDetectionScore . La valeur par défaut est 0.7 ,<int> nLocateAutomoves : nombre d'étape de détection dans l'étape LOCATE (Juste déplace la fenêtre de détection d'entrée avec le bruit) (par défaut: 10 ),<float> locateMoveNoiseAmplitude : bruit pendant l'étape LOCATE , par rapport aux dimensions de la fenêtre d'entrée (par défaut: 0.01 ),<int> nConfirmAutoMoves : nombre d'étapes de détection pendant l'étape CONFIRM (par défaut: 8 ),<float> thresholdConfirmOffset : Abord Confirmer Stage Si le score de détection est inférieur au seuil de détection d'objet + cette valeur (par défaut: -0.02 ),<float> confirmMoveNoiseAmplitude : bruit pendant l'étape CONFIRM , par rapport aux dimensions de la fenêtre d'entrée (par défaut: 0.01 ),<int> nConfirmUnstitchMoves : En mode de suivi ( isKeepTracking = true , arrêtez le suivi après ce nombre de détections infructueuses (par défaut: 20 ),[<float> position, <float> angle] : Si une détection ambiguë (2 objets ont des scores fermés) pendant l'étape CONFIRM , inclinez la fenêtre d'entrée. La première valeur est relative aux dimensions de la fenêtre, la seconde est l'angle en degrés (par défaut: [0.1, 10] ),<float> confirmScoreMinFactorDuringAutoMove : Pendant l'étape de confirmation, score minimum pour chaque mouvement. Si le score est plus petit que cette valeur, revenez à l'étape de balayage. La valeur par défaut est 0.3 . La fonction de détection renvoie un objet, detectState . À des fins d'optimisation, il est attribué par référence, et non par valeur. C'est un dictionnaire avec ces propriétés:
<float> distance : Distance d'apprentissage, c'est-à-dire la distance entre l'appareil photo et l'objet pendant la formation de l'ensemble de données. Donne un indice sur l'échelle réelle de l'objet,<bool/string> label : false si aucun objet n'est détecté, sinon l'étiquette de l'objet détecté. Il est toujours en lettres majuscules et cela dépend du réseau neuronal,<array4> positionScale : tableau de flotteurs stockant 4 valeurs: [x,y,sx,sy] où x et y sont les positions relatives normalisées du centre de l'objet détecté. sx , sy sont les facteurs d'échelle normalisés relatifs de la fenêtre de détection:x est la position sur l'axe horizontal. Il passe de 0 (à gauche) à 1 (à droite),y est la position sur l'axe vertical. Il passe de 0 (en bas) à 1 (en haut),sx est l'échelle de l'axe horizontal. Il passe de 0 (la taille est nul) à 1 (pleine taille sur axe horizontal),sy est l'échelle de l'axe vertical. Il passe de 0 (taille nul) à 1 (pleine taille sur l'axe vertical),<float> yaw : l'angle dans le radian de la rotation de l'objet autour de l'axe vertical (y),<float> detectScore : Score de détection de l'objet détecté, entre 0 (mauvaise détection) et 1 (très bonne détection).JEEARAPI.set_NN(<string> neuralNetworkPath, <function> callback) : change le réseau neuronal et appelez une fonction lorsqu'elle est terminée, soit avec false comme argument, soit avec une étiquette d'erreur,JEEARAPI.reset_state() : retourne en mode balayage,JEEARAPI.get_aspectRatio() : renvoie le rapport d'aspect <width>/<height> de la source d'entrée,JEEARAPI.set_scanSettings(<dict> scanSettings) : voir la section des paramètres de numérisation pour plus d'informations. Le code principal de démos Webxr est directement dans les fichiers index.html . La partie 3D est gérée par trois.js . Le point de départ des démos est les exemples fournis par [wEBXR Viewer par la Fundation Mozilla] (référentiel GitHub des démos).
Nous utilisons Jeeliz AR via une aide spécifique, helpers/JeelizWebXRHelper.js et nous conseillons fortement d'utiliser cet assistant pour vos démos Webxr. Avec l'implémentation iOS, il gère la conversion de flux vidéo (le flux vidéo est donné sous forme de tampons YCBCR . Nous ne prenons que le tampon Y et nous appliquons un filtre médian dessus.).
JEEARAPI.init callbackReady rappelback):"GL_INCOMPATIBLE" : WebGL n'est pas disponible, ou cette configuration WebGL n'est pas suffisante (il n'y a pas de webgl2, ou il y a webgl1 sans extension OES_TTEXTURE_FLOAT ou OES_TEXTURE_HALF_FLOAT),"ALREADY_INITIALIZED" : L'API a déjà été initialisée,"GLCONTEXT_LOST" : le contexte Webgl a été perdu. Si le contexte est perdu après l'initialisation, la fonction callbackReady sera lancée une deuxième fois avec cette valeur comme code d'erreur,"INVALID_CANVASID" : Impossible de trouver l'élément <canvas> dans le dom. Cette erreur ne peut être déclenchée que si canvasId est fourni à la méthode init() .JEEARAPI.set_NN ):"INVALID_NN" : le modèle de réseau neuronal n'est pas valide ou corrompu,"NOTFOUND_NN" : le modèle de réseau neuronal n'est pas trouvé, ou une erreur HTTP s'est produite pendant la demande. Les paramètres de recadrage vidéo peuvent être fournis. Il ne fonctionne que si l'élément d'entrée est un élément <video> . Par défaut, il n'y a pas de recadrage vidéo (toute l'image vidéo est prise en entrée). Les paramètres de culture vidéo peuvent être fournis:
JEEARAPI.init est appelé, en utilisant le paramètre videoCrop ,JEEARAPI.set_videoCrop(<dict> videoCrop) Le DictionNary videoCrop est soit faux (pas de vidéocrop), soit les paramètres suivants:
<int> x : position horizontale du coin inférieur gauche de la zone courte, en pixels,<int> y : position verticale du coin inférieur gauche de la zone courte, en pixels,<int> w : largeur de la zone courte, en pixels,<int> h : hauteur de la zone courte, en pixels.Les paramètres de numérisation peuvent être fournis:
JEEARAPI.init est appelé, en utilisant les scanSettings de paramètresJEEARAPI.set_scanSettings(<dict> scanSettings) Le DictionNary scanSettings a les propriétés suivantes:
<float> margins : marge. N'essayez pas de détecter si le centre de la fenêtre de détection est trop proche des frontières. 0 → Aucune marge, 1 → 100% des marges. Par défaut: 0.1 ,<int> nSweepXYsteps : nombre d'étapes de traduction pour une échelle donnée. Par défaut: 6*6=36 ,<int> nSweepSsteps : Nombre d'étapes d'échelle. Nombre total d'étapes de traduction =nSweepXYsteps*nSweepSsteps . Par défaut: 4 ,[<float>,<float>] sweepScaleRange : plage de l'échelle de la fenêtre de détection. 1 → Dimension minimale de fenêtre entière (entre la largeur et la hauteur). Ne tirez pas compte des marges. Par défaut: [0.3, 0.7] ,<int> sweepStepMinPx : Taille minimale d'une étape dans les pixels. Par défaut: 16 ,<boolean> sweepShuffle : Si nous devons mélanger les positions de balayage ou non. Par défaut: true .Les démonstrations doivent être hébergées sur un serveur HTTPS statique avec un certificat valide. Sinon, l'API WebXR ou MediaStream peut ne pas être disponible.
Veillez à activer la compression GZIP pour au moins des fichiers JSON. Le modèle de réseau de neurones peut être assez lourd, mais heureusement, il est bien compressé avec GZIP.
/dist/jeelizAR.module.js est exactement le même que /dist/jeelizAR.js sauf qu'il fonctionne avec ES6, afin que vous puissiez l'importer directement en utilisant:
import 'dist/jeelizAR.module.js' Nous fournissons plusieurs modèles de réseau neuronal dans le / NeuralNets / Path. Nous ajouterons régulièrement de nouveaux réseaux de neurones dans ce référentiel GIT. Nous pouvons également fournir des services de formation de réseau neuronal spécifiques. Veuillez nous contacter ici pour les prix et les détails. Vous pouvez trouver ici:
| fichier de modèle | étiquettes détectées | taille d'entrée | Coût de détection | fiabilité | remarques |
|---|---|---|---|---|---|
basic4.json | Tasse, chaise, vélo, ordinateur portable | 128 * 128px | ** | ** | |
basic4Light.json | Tasse, chaise, vélo, ordinateur portable | 64 * 64px | * | * | |
cat.json | CHAT | 64 * 64px | *** | *** | détecter le visage de chat |
sprite0.json | Spritecan | 128 * 128px | *** | *** | réseau autonome (détection 6D) |
ARCoffeeStandalone01.json | TASSE | 64 * 64px | ** | *** | réseau autonome (détection 6D) |
La taille d'entrée est la résolution de l'image d'entrée du réseau. La fenêtre de détection n'est pas statique: elle glisse le long de la vidéo à la fois pour la position et l'échelle. Si vous utilisez cette bibliothèque avec WebXR et iOS, la résolution vidéo sera de 480*270 pixels, donc une entrée 64*64 pixels sera suffisante. Si, par exemple, vous avez utilisé un modèle de réseau de neurones d'entrée de 128*128 pixels, l'image d'entrée devrait souvent être agrandie avant d'être donné en entrée.
Cette bibliothèque utilise Jeeliz WebGL Deep Learning Technology pour détecter les objets. Le réseau neuronal est formé à l'aide d'un moteur 3D et d'un ensemble de données de modèles 3D. Tout est traité côté client.
WebGL2 est disponible, il utilise WebGL2 et aucune extension spécifique n'est requise,WebGL2 n'est pas disponible mais WebGL1 , nous avons besoin d'extension OES_TEXTURE_FLOAT ou d'extension OES_TEXTURE_HALF_FLOAT ,WebGL2 n'est pas disponible et que si WebGL1 n'est pas disponible ou si OES_TEXTURE_FLOAT ou OES_HALF_TEXTURE_FLOAT ne sont implémentés, l'utilisateur n'est pas compatible.Si une erreur de compatibilité est déclenchée, veuillez publier un problème sur ce référentiel. S'il s'agit d'un problème avec l'accès à la webcam, veuillez d'abord réessayer après la fermeture de toutes les applications qui pourraient utiliser votre appareil (Skype, Messenger, autres onglets de navigateur et Windows, ...). Veuillez inclure:
WebGL1 ),WebGL2 ),Apache 2.0. Cette application est gratuite pour une utilisation commerciale et non commerciale.
Nous apprécions l'attribution en incluant le logo de Jeeliz et un lien vers le site Web de Jeeliz dans votre site Web d'application ou de bureau. Bien sûr, nous ne nous attendons pas à un grand lien vers Jeeliz sur votre filtre à visage, mais si vous pouvez mettre le lien dans la section des crédits / environ / aide / pied de page, ce serait génial.
La bibliothèque de détection et de suivi de la face principale de Jeeliz est l'API Cjeeliz facefilter. Il gère le suivi multiface et pour chaque visage suivi, il fournit les angles de rotation et le facteur d'ouverture de la bouche. Il est parfait pour construire vos propres filtres Snapchat / MSQRD comme les faces fonctionnant dans le navigateur. Il est livré avec une douzaine de démo d'intégration, y compris un échange de visage.
Notre bibliothèque basée sur l'apprentissage en profondeur Weboji détecte 11 expressions faciales en temps réel à partir du flux vidéo webcam. Ensuite, ils sont reproduits sur un avatar, soit en 3D avec un rendu à trois.js, soit en 2D avec un rendu SVG (vous pouvez donc l'utiliser même si vous n'êtes pas un développeur 3D). Vous pouvez accéder au référentiel GitHub ici.
Si vous souhaitez simplement détecter si l'utilisateur regarde l'écran ou non, Jeeliz Glance Tracker est ce que vous recherchez. Il peut être utile de lire et de faire une pause d'une vidéo, que l'utilisateur regarde ou non. Cette bibliothèque a besoin de moins de ressources et le fichier réseau neuronal est beaucoup plus léger.
Si vous souhaitez utiliser cette bibliothèque pour les lunettes Virtual Try-On (lunettes de soleil, lunettes, masques de ski), vous pouvez jeter un œil au widget Jeeliz VTO. Il comprend un moteur 3D de haute qualité et léger qui implémente les caractéristiques suivantes: ombrage différé, PBR, ombres Raytraced, cartographie normale, ... il reconstruit également l'environnement d'éclairage autour de l'utilisateur (éclairage ambiant et directionnel). Mais les lunettes proviennent d'une base de données hébergée dans nos serveurs. Si vous souhaitez ajouter des modèles, veuillez nous contacter.
