‏Miris: مدل سه‌بعدی 800 مگابایتی رو مثل ویدیو استریم کن

Kevan Barsky از تیم Miris تو این پست از یه دردسر آشنا برای فرانت‌اندکارها می‌گه. طراح یه مدل سه‌بعدی قشنگ تحویل می‌ده و توسعه‌دهنده یه هفته وقت می‌ذاره تا بدترش کنه. یعنی mesh رو ساده می‌کنه، تکسچرهای 4K رو به 1K می‌رسونه، فشرده‌سازی می‌کنه و چندتا نسخه LOD (یعنی نسخه‌های ساده‌تر مدل برای دستگاه‌های ضعیف‌تر) می‌سازه. نتیجه دیگه اون چیزی نیست که طراح ساخته بود.

نویسنده می‌گه glTF رایج‌ترین فرمت سه‌بعدی وبه، ولی وقتی مستقیم تحویلش می‌دی کاربر باید کلی داده دانلود کنه تا چیزی ببینه. راه‌حل Miris اینه که مدل رو یه بار به یه فرمت قابل استریم تبدیل می‌کنه. اولین فریم زیر یک ثانیه نشون داده می‌شه و جزئیات طی چند ثانیه بعد اضافه می‌شن. کیفیت هم بسته به دستگاه و سرعت اینترنت خودکار تنظیم می‌شه، پس کد LOD نوشتن لازم نیست.

خبر اصلی این پست، پلاگین جدید Miris برای Adobe Substance 3D Painter هست. طراح از منوی Miris گزینه Publish رو می‌زنه، اسم می‌ذاره و آپلود می‌کنه. پلاگین مدل رو با فرمت OpenUSD و متریال‌های OpenPBR خروجی می‌گیره و از UDIMها (یعنی تکسچرهایی که روی چند کاشی پخش شدن) و چند texture set تا حجم 10 گیگابایت پشتیبانی می‌کنه. هیچ چیزی کوچیک نمی‌شه و توسعه‌دهنده به جای یه فایل zip، فقط یه asset ID و یه viewer key می‌گیره.

سریع‌ترین راه گذاشتن مدل توی صفحه، Components API هست که یه سری web component (یعنی تگ‌های HTML سفارشی) داره. کافیه پکیج @miris-inc/components رو اضافه کنید و دوتا تگ miris-scene و miris-stream رو با viewer key و asset ID بذارید. موقعیت و چرخش هم با attributeهای ساده تنظیم می‌شه. viewer key برای کد سمت کلاینت ساخته شده و می‌شه با تگ محدودش کرد. ولی کلید آپلود و مدیریت جداست و هیچ‌وقت نباید توی مرورگر باشه.

اگه از قبل یه اپ Three.js دارید، پکیج @miris-inc/three یه کلاس MirisStream می‌ده که از Group خود Three.js ارث می‌بره:

const renderer = new WebGPURenderer({ requiredLimits });
const scene = new MirisScene({ viewerKey: "VIEWER_KEY" });

scene.add(new MirisStream({ uuid: "ASSET_ID" }));

دوربین و حلقه انیمیشن همون‌جوری می‌مونن. تنها تغییر واقعی اینه که باید از WebGPURenderer با requiredLimits خود SDK استفاده کنید. برای حذف هم کافیه stream.removeFromParent() رو صدا بزنید.

محدودیت‌ها رو هم خود نویسنده گفته. WebGPU الزامیه و با WebGLRenderer چیزی نمایش داده نمی‌شه. سایت باید روی HTTPS یا localhost باشه و استریم از WebSocket به *.miris.com استفاده می‌کنه، پس پراکسی‌های شرکتی باید اجازه بدن. فعلاً هر صحنه فقط یه viewer key داره، انیمیشن پشتیبانی نمی‌شه و نمی‌شه سطح کیفیت خاصی رو دستی درخواست کرد. Miris الان تو مرحله بتای عمومیه.

نکات کلیدی:

• اولین فریم زیر یک ثانیه نشون داده می‌شه و جزئیات کم‌کم اضافه می‌شن
• پلاگین Substance 3D Painter خروجی OpenUSD با OpenPBR می‌ده و تا 10 گیگابایت پشتیبانی می‌کنه
• اتصال به صفحه با دوتا تگ miris-scene و miris-stream از پکیج @miris-inc/components
• تو Three.js از MirisStream استفاده می‌شه و renderer باید WebGPURenderer باشه
• WebGPU الزامیه، انیمیشن پشتیبانی نمی‌شه و هر صحنه فعلاً یه viewer key داره