چگونه یک فیلتر چهره برای اینستاگرام بسازیم؟

در واقع هدف از این آموزش آشنایی مقدماتی و نحوه کار با نرم افزار واقعیت افزوده فیسبوک به اسم Spark AR Studio می باشد که این نرم افزار امکانی را برای شما فراهم می کند که بتوانید یک فیلتر برای اینستاگرام یا فیسبوک بسازید و در دسترس همگان قرار دهید.

ابتدا با تهیه یک فیلترشکن وارد سایت sparkar.facebook.com می شوید و آخرین نسخه از نرم افزار Spark AR Studio را دریافت و نصب می کنید.

بعد از نصب و وارد شدن به نرم افزار با پنجره ای مشابه تصویر بالا روبه رو می شوید که در تب Samples میتونید نمونه های آماده و کاربردی رو ببینید که با دیدن عملکرد هر کدوم روند کار را برای شما ساده تر می کند و با یک سری تغییرات کوچک میتوانید بر اساس آنها فیلتر های خود را طراحی کنید برای مثال فیلتر Visual Shaders را می توانید انتخاب کنید و رنگ یا طرح عینک را عوض کنید یا فیلتر Face Distortion را انتخاب کنید و ظاهر صورت را تغییر بدید.

در تب Recent هم میتوانید آخرین پروژه های خود را مشاهده کنید همچنین با انتخاب Open Project یک پروژه دیگر که قبلا بر روی کامپیوتر موجود بوده است را برای خود باز کنید.

اما ما اینجا قصد داریم که یک پروژه جدید را ایجاد کنیم برای این منظور بر روی Create Project کلیک می کنیم تا یک صحنه پیش فرض برای ما ایجاد شود.

اگر با انجین های بازی سازی نظیر Unity و Unreal Engine یا حتی محیط های سه بعدی مثل Blender و Maya کار کرده باشید با دیدن چنین محیطی گیج نمی شوید چرا که این نرم افزار بسیار شبیه به این محیط ها بوده و بسیار ساده تر از آنها برای ساخت افکت های واقعیت افزوده طراحی شده است.

اگر بخواهیم خیلی خلاصه و سریع بگوهیم که واقعیت افزوده یا AR چیست؟ به اضافه شدن عناصر کامپیوتری به دنیای واقعی که بتوان بویسله سنسورها، صدا، تصویر، GPS و ... تعاملی بین آنها (عناصر و دنیا واقعی) برقرار کرد واقعیت افزوده گفته می‌شود. پس در واقع نرم افزار یا اپلیکیشنی که بوسیله دوربین بتوان تصویر دنیای واقعی با عناصر کامپیوتری درون آن را مشاهده کرد مبتنی بر واقعیت افزوده است.

در اینجا ابتدا با محیط نرم افزار Spark AR Studio آشنا می شویم:

در تصویر بالا با محیط صحنه (Scene) نرم افزار آشنا می شویم:

1- در قسمت View می توانیم نحوه نمایش صحنه در چند جهت را تغییر بدهیم و همینطور به دو شکل Perspective یا Orthographic صحنه را مشاهده کنیم که به طور پیش فرض بر روی حالت Perspective می باشد اما برای تغییر جهت بر روی صحنه میتوانیم با نگه داشتن کلیک سمت راست موس این کار را به صورت دلخواه انجام دهیم و همینطور برای جلو و عقب در صحنه می توانیم با غلتاندن دکمه وسط موس این کار را انجام دهیم.

2- برای اینکه بتوانیم نمایش عناصر (نور، مدل سه بعدی و ...) در صفحه را محدود کنیم و تمرکز بیشتری روی عناصر مورد نظر داشته باشیم میتوانیم با اعمال Filter این کار را انجام دهیم. توجه کنید که با برداشتن یک عنصر از طریق فیلتر در خروجی نهایی آن عنصر وجود خواهد داشت و تنها در قسمت صحنه نمایش داده نمی شود.

3- با انتخاب گزینه موقعیت (Position) و کلیک بر روی یکی از عناصر می توانیم آنها را جابجا کنیم که کلید میانبر انتخاب این گزینه بر روی صفحه کلید حرف E می باشد.

4- با انتخاب گزینه چرخش (Rotation) و کلیک بر روی یکی از عناصر موجود در صحنه مثل مدل سه بعدی یا نور ها (Light) می توانیم جهت آنها را بچرخانیم که کلید میانبر برای این گزینه بر روی صفحه کلید حرف R می باشد.

5- با انتخاب گزینه مقیاس (Scale) و کلیک بر روی یکی از عناصر موجود در صحنه مثل یک مدل سه بعدی می توانیم اندازه آنها را بزرگ یا کوچک کنیم که اندازه استاندارد آن مقدار 1 در هر سه محور X,Y,Z می باشد که کلید میانبر برای این گزینه بر روی صفحه کلید حرف T می باشد.

6- با کلیک بر روی این گزینه مشخص می کنید دستگاه مختصات بصورت محلی (Local) یا جهانی (Global) بر روی عناصر قرار بگیرند که ممکن است بر روی موقعیت و چرخش آنها بر روی صحنه اثر گذار باشد.

7- در این قسمت هم میتوانید پیش نمایش کار را بر روی یک چهره از قبل موجود مشاهده کنید در ادامه خواهیم گفت که چگونه بجای این از چهره شخص دیگر یا با فعال کردن وبکم بر روی چهره خود فیلتر را مشاهده کنید.

8- محلی که عناصر بر روی صحنه قرار گرفته اند.

در این قسمت عناصر بر روی صحنه را به صورت یکجا مشاهده می کنید و در تب Layers هم می توانید لایه های خود را تعریف کنید که هر شی (Object) روی صحنه در یک لایه خواهد بود که به وسیله آن می توانیم عناصر را بوسیله لایه ها بر روی صحنه مدیریت کنیم اما ما در اینجا فعلا با یک لایه و همین لایه پیش فرض کار را شروع خواهیم کرد.

با انتخاب گزینه Add Object یا راست کلیک و انتخاب Add می توانید سایر شی ها را نیز به صحنه اضافه کنید همچنین از پنجره Assets هم می توانید سایر شی ها (مثل مدل های سه بعدی، تصاویر و ...) بر روی کامپیوتر را وارد صحنه کنید.

نکته 1) در هر کجا بعد از هر تغییر با دکمه ترکیبی Ctrl + Z می توانید به عملیات قبلی (Undo) برگردید یا با دکمه ترکیبی Ctrl + Y به عملیات جدید (Redo) خود برگردید.

نکته 2) اگر شی را به صحنه اضافه می کنید حتما اسم آنرا تغییر دهید و سعی کنید اسمی متناسب با کارایی آن انتخاب کنید.

معرفی عناصر اصلی و ثابت:

• دستگاه (Device): تنظمیات دستگاه و سایر عناصر اصلی داخل آن قرار می گیرند.
• دوربین (Camera): چگونگی نمایش صحنه و زاویه نمایش را بر روی دستگاه مشخص می کند.
• فاصله کانونی (Focal Distance): فاصله کانونی دوربین را تا اجسام مشخص می کند.
• میکروفن (Microphone): ضبط صدا از میکروفن گوشی را انجام می دهد که می توانید آنرا فعال یا غیر فعال کنید.

معرفی سایر عناصر:

• دنبال کننده صورت (Face Tracker) : صورت را تشخیص داده و با Transformations آن خود را تطبیق می دهد.
• دنبال کننده سطح (Plane Tracker) : یک سطح یا محیط مشخص شده بر روی صحنه را دنبال می کند.
• دنبال کننده هدف مشخص (Fixed Target Tracker) : یک هدف مشخص رو به صورت ثابت بر روی صحنه دنبال می کند.
• دنبال کننده دست (Hand Tracker) : دست ها را تشخیص داده و حرکت آنها را دنبال م یکند.
• سطح (Plane) : یک سطح بر روی صحنه ایجاد می کند.
• شی خالی (Null Object) : یک شی خالی ایجاد می کند که کاربرد اون بیشتر برای دسته بندی و مشخص کردن محل بسط و محور (Pivot) گروهی از شی های دیگر است.
• مدل سه بعدی (3D Object) : می توانید مدل های سه بعدی را وارد کنید.
• مدل صورت (Face Mesh) : از روی صورتی که بوسیله Face Tracker تشخیص داده میشه یک مدل (Mesh) ایجاد می کند.
• متن سه بعدی (3D Text) : یک متن سه بعدی بر روی صحنه ایجاد می کند.
• بوم (Canvas) : یک بوم یا محیط در دو بعد که معمولا برای UI کاربرد دارد ایجاد می کند.
• مستطیل (Rectangle) : یک تصویر (Sprint) خالی داخل Canvas ایجاد می کند.
• متن دو بعدی (2D Text) : یک متن دو بعدی در داخل Canvas ایجاد می کند.
• نور محیط (Ambient Light) : نور محیط مثل نور لامپ اتاق می باش که محیط را روشن می کند.
• نور از محیط (Environment Light) : در محیط با طرح دلخواه نور میدهد.
• نور نقطه ای (Point Light) : در یک نقطه و محدوده ای مشخص روشنایی می دهد.
• نور چراغ قوه ای (Spot Light) : مثل نور چراغ قوه در یک جهت و محدوده نور میتابد.
• بلندگو (Speaker) : میتوانید یک صدا یا صدای میکروفن را پخش کنید.
• سیستم ذرات (Particle System) : برای ساخت ذرات مثل آتش، آب، دود، باران و ... کاربرد دارد که جلوه قشنگی به طرح شما خواهد داد.
  

هر شی موجود در صحنه دارای یک Transformations که از سه اجزا زیر تشکیل می شود:

1- موقعیت (Position) : محل یا موقعیت قرار گیری هر آبجکت در صحنه را مشخص می کند.

2- چرخش (Rotation) :برای مشخص کردن زاویه و چرخش هر آبجکت در صحنه از آن استفاده می شود.

3- قیاس (Scale) : اندازه و تناسب هر آبجکت در صحنه را مشخص میکند.

همانطور که در تصویر بالا می بینید در این قسمت می توانید انتخاب کنید که دمو کار را از طریق وبکم یا یکی از نمونه های موجود مشاهده کنید.

1- میتوانید یک پیش نمایش (Preview) از افکت بر روی اینستاگرام یا فیسبوک ببینید که برای این کار نیاز هست شما فیلترشکن را روشن کنید سپس روی دکمه Send کلیک کنید تا بارگذاری انجام شود و به شما یک لینک می دهد که با باز کردن آن لینک بر روی گوشی می توانید یک preview از افکت را مشاهده کنید.

2- از این طریق می توانید افکت خود را خروجی (Export) بگیرید و درخواست انتشار آنرا بر روی اینستاگرام از طریق وب سایت facebook.com/sparkarhub را بدهید.

حالا نوبت به ساخت افکت می رسد

می خواهیم افکتی را بسازیم که باز کردن دهان آتش از آن بیرون بیاید

در اولین قدم یک Face Tracker را به صحنه اضافه می کنیم سپس در درون آن یک Particle System را اضافه می کنیم. حالا اسم Particle System که اضافه کردیم را به Fire تغییر نام می دهیم. حالا باید موقعیت آنرا دقیقا بر روی دهان قرار دهیم.

با انتخاب Fire یک پنجره سمت راست برای آن باز می شود. که مطابق تصویر زیر یک متریال برای آن ایجاد می کنیم.

حالا در پنجره Assets سمت راست پایین بر روی متریال ایجاد شده کلیک می کنیم و نام آنرا به FireMaterial تغییر میدهیم.

حالا با کلیک بر روی آن و پنجره سمت راست را مشاهده می کنیم. که نوع (Shader Type) آنرا را بر روی Flat قرار میدهیم و از قسمت Texture یک تصویر آتش انتخاب می کنیم میتوانید با یک جستجو ساده می توانید تکسچر مناسب خود را پیدا یا طراحی کنید بعد از انتخاب تصویر به Assets همه اضافه میشه که اسم آنرا به FireTexture تغییر میدهیم. حالا در قسمت Blend Mode مقدار آنرا بر روی Add قرار می دهیم.

دوباره بر روی Fire داخل صحنه کلیک می کنیم تا پنجره تنظیمات پارتیکل ظاهر شود با تغییر این گزینه سعی میکنیم اندازه آتش را با صورت فرد تطبیق دهیم که واقعی تر بنظر برسد.

حالا ما پارتیکل را ساختیم و موقعیت آنرا بر روی دهان قرار داده ایم حالا باید بگوییم که اگر دهانش را باز کرد پارتیکل فعال بشه و اگر بست پارتیکل غیر فعال شود. برای این کار ما میتوانیم از ابزار Patch نرم افزار کار کنیم که بدون نیاز به کدنویسی بسیاری از موارد رو میتوانیم به شکل ساده انجام بدیم.

در منو با انتخاب View و سپس Show Patch Editor این پنجره را ظاهر کنید. دو بار داخل آن کلیک کنید تا بتوانید چیزی را به داخل آن اضافه کنید.

حالا مطابق تصویر بالا موارد زیر را اضافه می کنیم:

اضافه کردن Face Finder برای پیدا کردن صورت های که داخل دوربین هستند.

اضافه کردن Face Select برای مشخص کردن صورتی که قرار روی آن کار کنیم.

اضافه کردن Mouth Open برای تشخیص اینکه دهان باز شده است یا خیر.

اضافه کردن Visible پارتیکل از طریق منو تنظیمات پارتیکل Fire با کلیک بر روی فلش کنار Visible که کار آن فعال و غیرفعال کردن است.

در مرحله آخر مثل تصویر مواردی را که اضافه کرده ایم را به همدیگر وصل می کنیم تا عملیات به پایان برسد.

حالا شما فیلتر خود را ایجاد کرده اید که می توانید پیش نمایش آن را بر روی موبایل خود روی اینستاگرام ببینید یا از آن Export بگیرید و درخواست انتشار بر روی اینستاگرام به صورت عمومی را بدهید و منتظر باشید که اینستاگرام افکت شما را بررسی و منتشر کند. اما قبل از ارسال درخواست حتما یه پیش نمایش از آن بر روی موبایل ببینید.

می توانید این پروژه را از طریق کانال تلگرام من (yoosefalipour@) یا این لینک دریافت کنید.

امیدوارم که این آموزش برای شما مفید بوده باشد و اگر سوالی هم دارید در زیر همین مطلب بپرسید.