jeelizAR
1.0.0
تحذير: تم إهمال هذا المستودع ولم يعد يتم الحفاظ عليه. يرجى استخدام webar.rocks.object بدلاً من ذلك.
قهوة AR المستقلة - استمتع بقهوة مجانية تقدمها Jelez!
تم اكتشاف فنجان القهوة ويتم لعب الرسوم المتحركة ثلاثية الأبعاد في الواقع المعزز.
يعتمد هذا العرض التوضيحي فقط على Jelezar و Three.JS.
فيما يلي الميزات الرئيسية للمكتبة:
/demos/ : رمز المصدر للمظاهرات ،/dist/ : قلب المكتبة:jeelizAR.js : السيناريو الرئيسي المصغر ،/helpers/ : البرامج النصية التي يمكن أن تساعدك على استخدام هذه المكتبة في بعض حالات الاستخدام المحددة (مثل WebXR) ،/libs/ : مكتبات الطرف الثالث والمحركات ثلاثية الأبعاد المستخدمة في العروض التوضيحية ،/neuralNets/ : نماذج الشبكة العصبية. هذه بعض المظاهرات لهذه المكتبة. يتطلب البعض إعدادًا محددًا.
يمكنك الاشتراك في قناة Jeeliz YouTube أو إلى حساب STARTUPJEELIZ على تويتر ليتم إبلاغه بتطوراتنا المتطورة.
إذا كنت قد قدمت طلبًا أو عرضًا ممتعًا باستخدام هذه المكتبة ، فسنود أن نراه وإدراج رابط هنا! اتصل بنا على TwitterStartUpJeeliz أو LinkedIn.
تعمل هذه المظاهرات في متصفح الويب القياسي. أنها تتطلب فقط الوصول إلى كاميرا الويب.
لتشغيل هذه العروض التوضيحية ، تحتاج إلى متصفح ويب ينفذ WebXR. نأمل أن يتم تنفيذها قريبًا في جميع متصفحات الويب!
ثم يمكنك تشغيل هذه العروض التوضيحية:
تعمل هذه العروض التوضيحية في متصفح ويب قياسي على الهاتف المحمول أو الجهاز اللوحي. يعتمدون على محرك الجدار الثامن المذهل. نستخدم إصدار الويب من المحرك وبدأنا من عينة الويب Three.js. لم يتم إصدار محرك الويب علنًا حتى الآن ، لذلك تحتاج إلى:
<WEBAPPKEY> المفتاح في index.htmlالعرض التوضيحي:
مثال التكامل الأساسي على هذه المكتبة هو العرض التجريبي الأول ، العرض التوضيحي لاكتشاف التصحيح. <head> index.html /dist/jeelizAR.js MediaStramAPI getUserMedia API /helpers/JeelizMediaStreamAPIHelper.js demo.js
< script src = " ../../dist/jeelizAR.js " > </ script >
< script src = " ../../helpers/JeelizMediaStreamAPIHelper.js " > </ script >
< script src = " demo.js " > </ script > في قسم <body> من index.html ، نضع عنصر <canvas> الذي سيتم استخدامه لتهيئة سياق الويب الذي تستخدمه المكتبة لحساب التعلم العميق ، وربما عرض عرض تصحيح:
< canvas id = ' debugJeeARCanvas ' > </ canvas > بعد ذلك ، في demo.js ، نحصل على تغذية فيديو كاميرا الويب بعد تحميل الصفحة باستخدام مساعد MediaStream API :
JeelizMediaStreamAPIHelper . get ( DOMVIDEO , init , function ( ) {
alert ( 'Cannot get video bro :(' ) ;
} , {
video : true //mediaConstraints
audio : false
} ) يمكنك استبدال هذا الجزء بفيديو ثابت ، ويمكنك أيضًا توفير مواقف للوسائط لتحديد دقة الفيديو. عند التقاط خلاصة الفيديو ، init إطلاق وظيفة رد الاتصال. تهيئة هذه المكتبة:
function init ( ) {
JEEARAPI . init ( {
canvasId : 'debugJeeARCanvas' ,
video : DOMVIDEO ,
callbackReady : function ( errLabel ) {
if ( errLabel ) {
alert ( 'An error happens bro: ' , errLabel ) ;
} else {
load_neuralNet ( ) ;
}
}
} ) ;
} تعمل وظيفة load_neuralNet على تحميل نموذج الشبكة العصبية:
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 ) ;
}بدلاً من إعطاء عنوان URL للشبكة العصبية ، يمكنك أيضًا إعطاء كائن JSON المحسّن.
تبدأ وظيفة iterate حلقة التكرار:
function iterate ( ) {
var detectState = JEEARAPI . detect ( 3 ) ;
if ( detectState . label ) {
console . log ( detectState . label , 'IS DETECTED YEAH !!!' ) ;
}
window . requestAnimationFrame ( iterate ) ;
} يأخذ JEEARAPI.init قاموسًا كحجة مع هذه الخصائص:
<video> video : عنصر فيديو HTML5 (يمكن أن يأتي من Helper API Media). إذا كان false ، قم بتحديث نسيج المصدر من videoFrameBuffer object المقدم عند استدعاء JEEARAPI.detect(...) (مثل في WebXR Demos) ،<dict> videoCrop : شاهد قسم محصول الفيديو لمزيد من التفاصيل<function> callbackReady : تم إطلاق وظيفة رد الاتصال عند الاستعداد أو إذا كان هناك خطأ. استدعاء مع تسمية الخطأ أو false ،<string> canvasId : معرف القماش الذي سيتم إنشاء سياق الويب المستخدم لمعالجة التعلم العميق ،<canvas> canvas : إذا لم يتم توفير canvasId ، فيمكنك أيضًا توفير عنصر <canvas> مباشرة<dict> scanSettings : راجع قسم إعدادات المسح لمزيد من التفاصيل<boolean> isDebugRender : Boolean. إذا كان ذلك صحيحًا ، فسيتم عرض عرض تصحيح الأخطاء على عنصر <canvas> . مفيد لتصحيح الأخطاء ، ولكن يجب ضبطه على false للإنتاج لأنه يضيع موارد حساب GPU ،<int> canvasSize : حجم قماش الكشف بالبكسل (يجب أن يكون مربعًا). القيمة الخاصة -1 الحفاظ على حجم قماش. الافتراضي: 512 .<boolean> followZRot : يعمل فقط مع نماذج الشبكة العصبية التي تخرج زوايا الملعب والفة و yaw. اقتصس نافذة الإدخال باستخدام لفة الكشف الحالي أثناء مرحلة التتبع ،[<float>, <float>] ZRotRange : يعمل فقط إذا followZRot = true . عشوائي زاوية الدوران الأولية. القيم في راديان. الافتراضي: [0,0] . الوظيفة التي تؤدي إلى الكشف هي JEEARAPI.detect(<int>nDetectionsPerLoop, <videoFrame>frame, <dictionary>options) .
<int> nDetectionPerLoop هو عدد عمليات الاكتشافات المتتالية. كلما كان ذلك أعلى ، كلما كان الكشف أسرع. ولكن قد يبطئ التطبيق بأكمله إذا كان مرتفعًا جدًا لأن استدعاء الوظيفة سوف تستهلك الكثير من موارد GPU. ينصح قيمة بين 3 و 6 . إذا كانت القيمة 0 ، فإن عدد الكشف لكل حلقة يكون متكيفًا بين 1 و 6 مع قيمة أولية 3 ،<videoFrame> frame فقط مع Demos WebXR (انظر قسم تكامل WebXR). خلاف ذلك ، قم بتعيينه على null ،<dictionary> options هو قاموس اختياري يمكن أن يكون له هذه الخصائص:<float> thresholdDetectFactor : عامل يتم تطبيقه على عتبات الكشف للكائن المكتشف. القيمة الافتراضية هي 1 . على سبيل المثال إذا كان يساوي 0.5 ، سيكون الكشف أسهل مرتين.<string> cutShader : تعديل التظليل الافتراضي المستخدم لاقتصاص منطقة الفيديو. القيم المحتملة هي:null : القيمة الافتراضية ، لا تنطبق مرشحًا واحتفظ بقنوات RGBA ،IOS : قيمة محسّنة من أجهزة iOS لاستخدام WebXR فقط. انسخ القناة الحمراء إلى قنوات الألوان الأخرى وتطبيق مرشح متوسط 5 بكسلmedian : تطبيق مرشح متوسط 3 × 3 على قنوات RGB بشكل منفصل ،null : القيمة الافتراضية ، لا تطبق مرشحًا واحتفظ بقنوات RGBA<boolean> isSkipConfirmation : يجعل الكشف أسهل (أكثر حساسية) ولكن يمكن أن يؤدي إلى المزيد من الإيجابيات الخاطئة. الافتراضي: false ،<boolean> isKeepTracking : إذا كان ينبغي لنا الاستمرار في تتبع كائن بعد اكتشافه. الافتراضي: false ،[<float>,<float>,<float>] trackingFactors : تتبع حساسية الترجمة على طول محور x ، y والمقياس. الافتراضي: 1.0 ،<float> thresholdDetectFactorUnstitch : توقف عن التتبع إذا كانت عتبة الكشف أقل من هذه القيمة. تستخدم فقط إذا isKeepTracking=true . يجب أن تكون أصغر من thresholdDetectFactor ،<float> secondNeighborFactor : لا تؤكد كائنًا إذا كان كائن آخر يحتوي على درجة اكتشاف لا يقل عن secondNeighborFactor * objectDetectionScore . القيمة الافتراضية هي 0.7 ،<int> nLocateAutomoves : عدد خطوة الكشف في مرحلة LOCATE (Juste حرك نافذة اكتشاف الإدخال مع الضوضاء) (الافتراضي: 10 ) ،<float> locateMoveNoiseAmplitude : الضوضاء أثناء مرحلة LOCATE ، نسبة إلى أبعاد نافذة الإدخال (افتراضي: 0.01 ) ،<int> nConfirmAutoMoves : عدد خطوات الكشف خلال مرحلة CONFIRM (الافتراضي: 8 ) ،<float> thresholdConfirmOffset : Abord تأكيد المرحلة إذا كانت درجة الكشف أقل من عتبة اكتشاف الكائن + هذه القيمة (الافتراضي: -0.02 ) ،<float> confirmMoveNoiseAmplitude : ضوضاء أثناء مرحلة CONFIRM ، بالنسبة لأبعاد نافذة الإدخال (الافتراضي: 0.01 ) ،<int> nConfirmUnstitchMoves : في وضع التتبع ( isKeepTracking = true ، أوقف التتبع بعد هذا العدد من الاكتشافات غير الناجحة (الافتراضي: 20 ) ،[<float> position, <float> angle] : إذا كان الكشف الغامض (كائنان له درجات قريبة) خلال مرحلة CONFIRM ، قم بإمالة نافذة الإدخال. القيمة الأولى بالنسبة لأبعاد النوافذ ، والثانية هي الزاوية بالدرجات (افتراضي: [0.1, 10] ) ،<float> confirmScoreMinFactorDuringAutoMove : خلال مرحلة التأكيد ، الحد الأدنى للنتيجة لكل خطوة. إذا كانت النتيجة أصغر من هذه القيمة ، عد إلى مرحلة الاجتياح. الافتراضي هو 0.3 . تُرجع دالة الكشف كائنًا ، detectState . لغرض التحسين يتم تعيينه بالرجوع ، وليس بالقيمة. إنه قاموس مع هذه الخصائص:
<float> distance : مسافة التعلم ، أي المسافة بين الكاميرا والكائن أثناء تدريب مجموعة البيانات. يعطي فكرة عن المقياس الحقيقي للكائن ،<bool/string> label : false إذا لم يتم اكتشاف أي كائن ، وإلا فإن تسمية الكائن المكتشف. إنه دائمًا في أحرف كبيرة ويعتمد على الشبكة العصبية ،<array4> positionScale : مجموعة من العوامات تخزين 4 قيم: [x,y,sx,sy] حيث x و y هي المواضع النسبية الطبيعية لمركز الكائن المكتشف. sx ، sy هي عوامل المقياس الطبيعي النسبي لنافذة الكشف:x هو الموضع على المحور الأفقي. يذهب من 0 (يسار) إلى 1 (يمين) ،y هو الموضع على المحور العمودي. يذهب من 0 (أسفل) إلى 1 (أعلى) ،sx هو المقياس على المحور الأفقي. ينتقل من 0 (الحجم فارغ) إلى 1 (الحجم الكامل على المحور الأفقي) ،sy هو المقياس على المحور العمودي. ينتقل من 0 (حجم فارغ) إلى 1 (الحجم الكامل على المحور العمودي) ،<float> yaw : الزاوية في راديان دوران الكائن حول المحور العمودي (y) ،<float> detectScore : درجة الكشف عن الكائن المكتشف ، بين 0 (الكشف السيئ) و 1 (اكتشاف جيد جدًا).JEEARAPI.set_NN(<string> neuralNetworkPath, <function> callback) : يقوم بتبديل الشبكة العصبية ، واتصل بوظيفة عند الانتهاء ، إما مع false كوسيطة أو مع تسمية خطأ ،JEEARAPI.reset_state() : يعود إلى وضع المسح ،JEEARAPI.get_aspectRatio() : إرجاع نسبة العرض إلى <width>/<height> لمصدر الإدخال ،JEEARAPI.set_scanSettings(<dict> scanSettings) : راجع قسم إعدادات المسح لمزيد من المعلومات. رمز WebXR Demos الرئيسي مباشرة في ملفات index.html . يتم التعامل مع الجزء ثلاثي الأبعاد من قبل ثلاثة . نقطة انطلاق العروض التجريبية هي الأمثلة التي يوفرها [WebXR Oniger بواسطة تمويل Mozilla] (مستودع GitHub للعروض التجريبية).
نحن نستخدم Jeeliz AR من خلال مساعد معين ، helpers/JeelizWebXRHelper.js وننصح بشدة استخدام هذا المساعد لعروض الويب الخاصة بك. مع تطبيق iOS ، فإنه يتولى تحويل دفق الفيديو (يتم إعطاء دفق الفيديو كمخازن مؤقتة لـ YCBCR . نحن نأخذ فقط المخزن المؤقت Y ونطبق مرشحًا متوسطًا عليه.).
JEEARAPI.init رد الاتصال callbackReady ):"GL_INCOMPATIBLE" : WebGL غير متوفر ، أو أن تكوين الويب هذا لا يكفي (لا يوجد WebGL2 ، أو يوجد WebGL1 بدون OES_Texture_float أو OES_Texture_Half_Float Extension) ،"ALREADY_INITIALIZED" : تم تهيئة API بالفعل ،"GLCONTEXT_LOST" : فقد سياق الويب. إذا فقد السياق بعد التهيئة ، فسيتم إطلاق وظيفة callbackReady مرة ثانية مع هذه القيمة كرمز خطأ ،"INVALID_CANVASID" : لا يمكن العثور على عنصر <canvas> في DOM. لا يمكن تشغيل هذا الخطأ إلا إذا تم توفير canvasId لطريقة init() .JEEARAPI.set_NN ):"INVALID_NN" : نموذج الشبكة العصبية غير صالح أو تالف ،"NOTFOUND_NN" : لم يتم العثور على نموذج الشبكة العصبية ، أو حدث خطأ في HTTP أثناء الطلب. يمكن توفير معلمات محصول الفيديو. إنه يعمل فقط إذا كان عنصر الإدخال عنصرًا <video> . بشكل افتراضي ، لا يوجد زراعة فيديو (يتم التقاط صورة الفيديو بأكملها كمدخلات). يمكن توفير إعدادات محصول الفيديو:
JEEARAPI.init ، باستخدام المعلمة videoCrop ،JEEARAPI.set_videoCrop(<dict> videoCrop) يعد videoCrop Dictionnary خطأ (بدون عرض فيديو) ، أو يحتوي على المعلمات التالية:
<int> x : الموضع الأفقي للركن الأيسر السفلي من المنطقة المزروعة ، بالبكسل ،<int> y : الموضع الرأسي للركن الأيسر السفلي من المنطقة المزروعة ، بالبكسل ،<int> w : عرض المنطقة المزروعة ، بالبكسل ،<int> h : ارتفاع المنطقة المزروعة ، بالبكسل.يمكن توفير إعدادات المسح الضوئي:
JEEARAPI.init ، باستخدام scanSettings المعلمةJEEARAPI.set_scanSettings(<dict> scanSettings) يحتوي scanSettings على الخصائص التالية:
<float> margins : الهامش. لا تحاول اكتشاف ما إذا كان مركز نافذة الكشف قريبًا جدًا من الحدود. 0 → لا هامش ، 1 → هوامش 100 ٪. الافتراضي: 0.1 ،<int> nSweepXYsteps : عدد خطوات الترجمة لمقياس معين. الافتراضي: 6*6=36 ،<int> nSweepSsteps : عدد خطوات المقياس. إجمالي عدد خطوات الترجمة =nSweepXYsteps*nSweepSsteps . الافتراضي: 4 ،[<float>,<float>] sweepScaleRange : نطاق مقياس نافذة الكشف. 1 → النافذة الكاملة الحد الأدنى للبعد (بين العرض والارتفاع). لا تأخذ في الاعتبار الهوامش. الافتراضي: [0.3, 0.7] ،<int> sweepStepMinPx : الحد الأدنى لحجم الخطوة في وحدات البكسل. الافتراضي: 16 ،<boolean> sweepShuffle : إذا كان ينبغي علينا خلط المواضع للمسح أم لا. الافتراضي: true .يجب استضافة المظاهرات على خادم HTTPS ثابت مع شهادة صالحة. خلاف ذلك قد لا تتوفر WebXR أو MediaStream API.
كن حذرًا لتمكين ضغط GZIP لملفات JSON على الأقل. يمكن أن يكون نموذج شبكة الخلايا العصبية ثقيلًا جدًا ، لكن لحسن الحظ ، يتم ضغطه جيدًا بـ GZIP.
/dist/jeelizAR.module.js هو نفسه تمامًا من /dist/jeelizAR.js باستثناء أنه يعمل مع ES6 ، بحيث يمكنك استيراده مباشرةً باستخدام:
import 'dist/jeelizAR.module.js' نحن نقدم العديد من نماذج الشبكة العصبية في / neuralnets / المسار. سنضيف بانتظام شبكات عصبية جديدة في مستودع GIT هذا. يمكننا أيضًا توفير خدمات تدريب على الشبكة العصبية المحددة. يرجى الاتصال بنا هنا للتسعير والتفاصيل. يمكنك أن تجد هنا:
| ملف النموذج | العلامات المكتشفة | حجم الإدخال | تكلفة الكشف | مصداقية | ملاحظات |
|---|---|---|---|---|---|
basic4.json | كوب ، كرسي ، دراجة ، كمبيوتر محمول | 128*128px | ** | ** | |
basic4Light.json | كوب ، كرسي ، دراجة ، كمبيوتر محمول | 64*64px | * | * | |
cat.json | قطة | 64*64px | *** | *** | اكتشف وجه القط |
sprite0.json | Spritecan | 128*128px | *** | *** | الشبكة المستقلة (اكتشاف 6D) |
ARCoffeeStandalone01.json | كوب | 64*64px | ** | *** | الشبكة المستقلة (اكتشاف 6D) |
حجم الإدخال هو دقة صورة الإدخال للشبكة. نافذة الكشف ليست ثابتة: إنها تنزلق على طول الفيديو لكل من الموضع والحجم. إذا كنت تستخدم هذه المكتبة مع WebXR و iOS ، فستكون دقة الفيديو 480*270 بكسل ، وبالتالي فإن إدخال 64*64 بكسل سيكون كافيًا. على سبيل المثال ، استخدمت نموذج الشبكة العصبية 128*128 بكسل ، فغالبًا ما تحتاج صورة الإدخال إلى توسيعها قبل إعطاء الإدخال.
تستخدم هذه المكتبة تقنية التعلم العميق Jeeliz WebGL للكشف عن الكائنات. يتم تدريب الشبكة العصبية باستخدام محرك ثلاثي الأبعاد ومجموعة بيانات من النماذج ثلاثية الأبعاد. كل شيء معالجته من جانب العميل.
WebGL2 متاحًا ، فإنه يستخدم WebGL2 ولا يلزم امتداد محدد ،WebGL2 متاحًا ولكن WebGL1 ، فإننا نطلب إما امتداد OES_TEXTURE_FLOAT أو امتداد OES_TEXTURE_HALF_FLOAT ،WebGL2 متاحًا ، وإذا لم يكن WebGL1 متاحًا أو لا يتم تطبيق OES_TEXTURE_FLOAT أو OES_HALF_TEXTURE_FLOAT ، فإن المستخدم غير متوافق.إذا تم تشغيل خطأ التوافق ، فيرجى نشر مشكلة على هذا المستودع. إذا كانت هذه مشكلة في الوصول إلى كاميرا الويب ، فيرجى أولاً إعادة المحاولة بعد إغلاق جميع التطبيقات التي يمكن أن تستخدم جهازك (Skype ، Messenger ، علامات تبويب المتصفح الأخرى ، ...). يرجى تضمين:
WebGL1 الخاص بك) ،WebGL2 ) ،Apache 2.0. هذا التطبيق مجاني للاستخدام التجاري وغير التجاري.
نحن نقدر الإسناد من خلال تضمين شعار Jelez ورابط إلى موقع Jeeliz في التطبيق الخاص بك أو موقع سطح المكتب. بالطبع ، لا نتوقع رابطًا كبيرًا إلى Jelez على مرشح وجهك ، ولكن إذا تمكنت من وضع الرابط في قسم الاعتمادات/حول/مساعدة/تذييل ، فسيكون ذلك رائعًا.
Jelez Main Face Concelding and Tracking Library هي Cjeeliz FaceFilter API. إنه يتعامل مع التتبع متعدد الواجهات ، ولكل وجه تتبعه يوفر زوايا الدوران وعامل فتح الفم. إنه مثالي لبناء Snapchat/MSQRD مثل مرشحات الوجه التي تعمل في المتصفح. لأنه يأتي مع عشرات من التجريبي التكامل ، بما في ذلك مبادلة الوجه.
تكتشف مكتبة Webboji القائمة على التعلم العميق 11 تعبيرًا للوجه في الوقت الفعلي من تغذية فيديو كاميرا الويب. ثم يتم استنساخها على الصورة الرمزية ، إما في 3D مع عارض Three.js أو في ثنائي الأبعاد مع عارض SVG (حتى تتمكن من استخدامه حتى لو لم تكن مطورًا ثلاثي الأبعاد). يمكنك الوصول إلى مستودع GitHub هنا.
إذا كنت ترغب فقط في اكتشاف ما إذا كان المستخدم ينظر إلى الشاشة أم لا ، فإن Meeliz Glance Tracker هو ما تبحث عنه. قد يكون من المفيد تشغيل مقطع فيديو وإيقافه للتوقف عن ما إذا كان المستخدم يشاهد أم لا. تحتاج هذه المكتبة إلى موارد أقل وملف الشبكة العصبية أخف بكثير.
إذا كنت ترغب في استخدام هذه المكتبة للنظارات الافتراضية (النظارات الشمسية ، والنظارات ، وأقنعة التزلج) ، يمكنك إلقاء نظرة على عنصر واجهة المستخدم Jelez VTO. ويتضمن محركًا ثلاثي الأبعاد ذو جودة عالية وخفيفة الوزن يبرز الميزات التالية: التظليل المؤجل ، PBR ، ظلال Raytraced ، رسم الخرائط العادية ، ... كما أنه يعيد بناء بيئة الإضاءة حول المستخدم (الإضاءة المحيطة والاتجاهية). لكن النظارات تأتي من قاعدة بيانات مستضافة في خوادمنا. إذا كنت ترغب في إضافة بعض النماذج ، يرجى الاتصال بنا.
