تأثير المنظر في المستعرض مع TensorFlow.js + WASM + Three.js

هل تتذكر كيف قدمت Apple iOS7 مع تأثير المنظر؟ الآن يمكنك القيام بذلك مباشرة في متصفحك.

المنظر كاميرا ويب



تحتوي جميع أجهزة الكمبيوتر المحمولة والهواتف الآن على كاميرا ، لذا يمكنك استخدام نماذج tensoflow لتحليل وضع الرأس والعينين. أيضا ، مقال جديد في SIGGRAPH 2020 يشرح كيفية إنشاء مجموعات بيانات فوتوغرافية مناسبة لتأثير المنظر.



ربما يعلم الجميع أن هناك مكتبة Tensorflow للشبكات العصبية ، وهي تعمل تحت لغتي Python و Javascript. عملية الالتفاف في الشبكات العصبية هي حساب ثقيل إلى حد ما ومتوازي بشكل جيد وهناك إصدارات ليس فقط لوحدة المعالجة المركزية ، ولكن أيضًا في CUDA لـ Python و WebGL / WebGPU لـ Javascript. إنه أمر مضحك ، ولكن إذا لم يكن لديك NVidia ، فستعمل مجموعة Tensorflow الرسمية في Javascript بشكل أسرع على جهاز الكمبيوتر الخاص بك ، نظرًا لعدم وجود بنية رسمية بدعم OpenGL. لحسن الحظ للجميع ، يحتوي TF 2.0 على بنية معيارية تسمح لك بالتفكير فقط في الجوهر ، وليس في اللغة التي يتم إجراؤها بها. هناك أيضًا محولات 1.0 -> 2.0.







في الوقت الحالي هناك نموذجان رسميان للتعرف على الوجوه: الوجه و blazeface. الأول أكثر ملاءمة لتعبيرات الوجه والأقنعة ، والثاني أسرع ويحدد ببساطة نقاطًا مربعة ومميزة مثل العيون والأذنين والفم. لذلك ، أخذت النسخة الخفيفة - blazeface. لماذا المعلومات الزائدة؟ بشكل عام ، قد يكون من الممكن تقليل النموذج الحالي بشكل أكبر ، لأنه بصرف النظر عن موضع العينين ، لا أحتاج إلى أي شيء آخر.



يوجد حاليًا 5 خلفيات في المتصفح: cpu ، wasm ، webgl ، wasm-simd ، webgpu. أول وحدة معالجة مركزية بطيئة للغاية ولا يجب تناولها الآن في أي حال ، فالأخيران مبتكران للغاية وهما في مرحلة المحترفين ويعملان تحت العلامات ، لذلك لا يوجد دعم للعملاء النهائيين. لذلك ، اخترت بين اثنين: WebGL و WASM.







من المعايير الحالية ، يمكنك أن ترى أنه بالنسبة للنماذج الصغيرة ، يعمل WASM أحيانًا بشكل أسرع من WebGL. بالإضافة إلى ذلك ، يمكن استخدام المنظر مع المشاهد ثلاثية الأبعاد وإطلاق خلفية WASM عليها ، أدركت أن WASM يعمل بشكل أفضل ، لأن بطاقات الفيديو المنفصلة للكمبيوتر المحمول لا تصدر في الوقت نفسه الشبكات العصبية والمشاهد ثلاثية الأبعاد. للقيام بذلك ، أخذت مشهدًا بسيطًا يحتوي على 75 فصلاً بتنسيق .glb. الرابط قابل للنقر وهناك WASM.







إذا اتبعت الرابط ، فربما لاحظت أن المتصفح طلب الإذن للوصول إلى كاميرا الفيديو. السؤال الذي يطرح نفسه: ماذا سيحدث إذا نقر المستخدم على لا؟ سيكون من الحكمة عدم تحميل أي شيء في هذه الحالة والتراجع للتحكم في الماوس / الدوران. لم أجد إصدار ESM من tfjs-core و tfjs-converter ، لذلك بدلاً من الاستيراد الديناميكي ، استقرت على بنية زاحفة إلى حد ما مع مكتبة fetchInject ، حيث يهم ترتيب تحميل الوحدات.



زحف البناء
, (Promise.All), , , .

fetchInject([
  'https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface@0.0.5/dist/blazeface.min.js'
], fetchInject([
  'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter@2.0.1/dist/tf-converter.min.js',
  'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@2.0.1/dist/tfjs-backend-wasm.wasm'
], fetchInject([
  'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core@2.0.1/dist/tf-core.min.js'
]))).then(() => {

  tf.wasm.setWasmPath('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@2.0.1/dist/tf-backend-wasm.min.js');

  //some other code

}




من أجل العثور على موقف النظرة ، أأخذ المتوسط ​​بين العينين. ومن السهل أن نفهم أن المسافة إلى الرأس ستكون متناسبة مع المسافة بين العينين في الفيديو ، بسبب تشابه جوانب المثلث. البيانات حول موضع العيون التي تأتي من النموذج صاخبة تمامًا ، لذلك قبل إجراء الحسابات ، قمت بتخفيفها باستخدام المتوسط ​​المتحرك EMA (المتوسط ​​المتحرك الأسي):



pos = (1 - smooth) * pos + smooth * nextPos;


أو كتابتها بطريقة أخرى:



pos *= 1 - smooth;
pos += nextPos * smooth;


وبالتالي ، نحصل على الإحداثيات x ، y ، z ، في نظام إحداثيات كروي معين مع المركز في الكاميرا. علاوة على ذلك ، تكون x و y محدودة بزاوية رؤية الكاميرا ، و z هي المسافة التقريبية من الرأس إليها. بزوايا دوران صغيرةsin(α)αبحيث يمكن اعتبار x و y زوايا.



pushUpdate({
  x: (eyes[0] + eyes[2]) / video.width - 1,
  y: 1 - (eyes[1] + eyes[3]) / video.width,
  z: defautDist / dist
});


المسح التصويري



مجموعة تواريخ مضحكة جدًا من المنشور SIGGRAPH 2020 فيديو مجال ضوء غامر مع تمثيل شبكي متعدد الطبقات. لقد صنعوا صورًا على وجه التحديد بحيث يمكنك تحريك الكاميرا في نطاق معين ، والذي يناسب تمامًا فكرة اختلاف المنظر. مثال المنظر.







يتم إنشاء المشهد ثلاثي الأبعاد هنا في طبقات ، ويتم تطبيق نسيج على كل طبقة. لا يبدو الجهاز الذي أنشأوا به التصوير الفوتوغرافي مضحكا. اشتروا 47 كاميرا عمل Yi 4K رخيصة مقابل 10 آلاف روبل لكل منهم ، ووضعوها على نصف الكرة الأرضية على شكل مجسم عكسي يتضاعف فيه ثلاثة أضعاف الشبكة الثلاثية. بعد ذلك ، تم وضع كل شيء على حامل ثلاثي القوائم وتمت مزامنة الكاميرات للتصوير.







المراجع






All Articles