پرش به محتوای اصلی
پرش به محتوای مقاله

Gitframes رندرینگ ویدیو را از مرورگر خارج و به WebGPU منتقل کرد

·۱۳ مهر ۱۴۰۵۲۱ دقیقه مطالعه
گیت‌هاب - gatewai-dev/gitframes: ویدیوی مبتنی‌بر کد، با رندر بومی WebGPU.
گیت‌هاب - gatewai-dev/gitframes: ویدیوی مبتنی‌بر کد، با رندر بومی WebGPU.
اشتراک‌گذاری
واقعاً چه چیز جدید است؟

حذف کامل مرورگر (Chromium) از چرخه رندرینگ ویدیو و جایگزینی آن با محاسبات بومی WebGPU؛ این یعنی تبدیل رندرینگ از یک فرآیند سنگین مبتنی بر DOM به یک عملیات ریاضی مستقیم روی GPU.

تصور کنید یک عامل هوش مصنوعی به‌جای کلنجار رفتن با سه نرم‌افزار سنگین فتوشاپ برای ترکیب تصاویر، افترافکت برای موشن‌گرافی و تایپوگرافی، و بلندر برای صحنه‌های سه‌بعدی، تمام این فرآیند را تنها با یک دستور کدنویسی و یک پکیج npm انجام دهد. Gitframes — که در حال حاضر در نسخه بتا است و به‌طور فعال در حال توسعه قرار دارد — ترکیب ویدیو را به یک مسئله مهندسی نرم‌افزار تبدیل کرده و فریم‌ها را مستقیماً روی سخت‌افزار گرافیکی از طریق WebGPU، Metal و Vulkan رندر می‌کند. این پکیج سبک، قابلیت‌های سه اپلیکیشن دسکتاپ سنگین را در یک ابزار متمرکز و بهینه جمع کرده است. ⚠️ توجه: Gitframes در مرحله بتا است؛ بنابراین ممکن است APIها بین نسخه‌ها تغییر کنند و برخی ویژگی‌ها ناقص یا ناپایدار باشند.

برای سال‌ها، تولید ویدیو با کدنویسی بر پایه الگوی «مرورگر بدون سر» (Headless Browser) بود. ابزارهایی مثل Remotion برای تبدیل کامپوننت‌های React به فریم، نسخه‌هایی از کرومیوم را اجرا می‌کردند. این روش به‌شدت سنگین است؛ به‌طوری که هر Worker معمولاً به ۲ تا ۴ گیگابایت رم نیاز دارد و با مشکلاتی مثل بازسازی غیرقطعی DOM (non-deterministic DOM reflows) و ثبت تصویر (screenshot capture) آهسته دست‌وپنجه نرم می‌کند. Gitframes به عنوان یک چالش معماری مستقیم برای این پارادایم ظهور کرده و کل خط لوله را به شیدرهای محاسباتی بومی GPU منتقل کرده است. این رویکرد یادآور تلاش‌های اخیر برای جایگزینی تولید مستقیم پیکسل با کدهای انیمیشن قطعی است تا کنترل دقیق‌تری روی خروجی بصری حاصل شود.

معماری WebGPU

این موتور با حذف Puppeteer و هزینه‌های ارتباطی IPC در Chromium، مستقیماً با دستگاه‌های GPU از طریق Dawn صحبت می‌کند و ویدیوها را با استفاده از @napi-rs/webcodecs به‌صورت سخت‌افزاری کدگذاری می‌کند. طبق گزارش توسعه‌دهندگان، این تغییر منجر به جهشی عظیم در بهره‌وری شده است: یک Worker در Gitframes تنها به ۲۰۰ تا ۴۰۰ مگابایت رم نیاز دارد. این یعنی کاهش مصرف حافظه تا ۹۰٪ در مقایسه با جایگزین‌های مبتنی بر مرورگر، که آن را برای خوشه‌های رندر بدون سرور در AWS G4/G5، Modal، RunPod یا Kubernetes ایده‌آل می‌کند.

توان عملیاتی (Throughput) نیز جهش یافته است. در حالی که ابزارهای مرورگر-محور در هنگام رندر اغلب در محدوده ۵ تا ۲۰ فریم بر ثانیه (FPS) دست‌وپنجه نرم می‌کنند، هدف Gitframes رسیدن به ۶۰ تا ۱۲۰+ فریم بر ثانیه است. این یعنی اجرای GPU در زمان واقعی (Real-time) یا حتی سریع‌تر از زمان واقعی. برخلاف DOM، این موتور از یک ساعت دقیقِ فریم-محور (deterministic frame-accurate clock) با ساعت‌های مطلق فریم و نقاط نمونه‌برداری مجزا استفاده می‌کند تا هیچ تایمر شناور، رانش (drift) یا فریم حذف‌شده‌ای وجود نداشته باشد. این دقت با استفاده از BeatGridهای صوتی که با فریم‌ها هماهنگ هستند، تقویت شده است.

جلوه‌های ویژه و تایپوگرافی حرفه‌ای

یکی از سخت‌ترین چالش‌های فنی در ویدیوهای کدنویسی‌شده، رندر متن است. اکثر ابزارها از رسترایزیشن CPU یا اطلس‌های SDF با رزولوشن پایین استفاده می‌کنند که در هنگام تبدیل‌های سه‌بعدی تار می‌شوند. Gitframes الگوریتم Slug (SlugPipeline) را پیاده کرده است که کانتورهای حروف را در سطح پیکسل در WGSL ارزیابی می‌کند. نتیجه این است که تایپوگرافی از ۱۰ پیکسل تا ۱۰,۰۰۰ پیکسل کاملاً تیز باقی می‌ماند و هیچ نیازی به رسترایزیشن مجدد توسط CPU نیست.

موتور Slug قابلیت‌هایی در سطح افترافکت ارائه می‌دهد، از جمله:

  • انتخاب‌گرهای محدوده (Range Selectors): پشتیبانی از حالت‌های square، ramp_up، ramp_down، triangle و smooth.
  • حرکات پیشرفته: منحنی‌های easeHigh/easeLow و جابه‌جایی تصادفی کاراکترها با استفاده از PRNG Seed شده از طریق TextAnimator.
  • ریتم انسانی: شبیه‌ساز ماشین‌تحریر (TypewriterAnimator) با تأخیرهای وزنی برای علائم نگارشی (مثلاً تأخیر ۳ برابر برای کاما، ۵.۵ برابر برای پایان جملات و ۷ برابر برای خطوط جدید) و قابلیت حل رمز (scramble resolution) در انتهای متن.
  • تشکیلات حجمی: توانایی نگاشت متن روی استوانه‌ها، مارپیچ‌های لگاریتمی و نوارهای دو-مارپیچ (double-helix) با استفاده از evaluateVolumetricFormation برای مدیریت زاویه سطوح.
  • چیدمان پویا: برش‌های یونیمودولار (unimodular shear) با حفظ مساحت و فاصله خطوط آکاردئونی که به خط پایه، مرکز یا بالا متصل هستند.

علاوه بر متن، این موتور بیش از ۵۰ شیدر GPU ماژولار برای اصلاح رنگ حرفه‌ای ارائه می‌دهد:

  • اصلاح رنگ تونی (Tonal Grading): منحنی‌ها (اسپلاین‌های RGB/R/G/B)، سطوح (Levels شامل نقطه سیاه/سفید، گاما و خروجی)، سایه‌ها/هایلایت‌ها، رنگ‌های انتخابی (ایزولاسیون گاموت CMYK) و LUTهای سه‌بعدی (ApplyLUT).
  • استایل‌دهی: دانه‌ی فیلم گوسی (Gaussian film grain) با تغییرات Seed مکانی، Halftone (تک‌رنگ/RGB/CMYK با شکل و زاویه نقطه قابل تنظیم)، Gradient Map و High Pass.
  • اپتیک: تاری گوسی دوطرفه (Bilateral Gaussian blur)، Unsharp Mask، Vignette، شکست نور (Refraction Caustics) و شیشه‌مorphism (PBRGlass) با پراکندگی رنگی.
  • تغییر شکل (Warping): نقشه‌های جابه‌جایی (Displacement Maps)، Liquify، Mesh Warp و هموگرافی Corner Pin.

گراف صحنه سه‌بعدی یکپارچه

برخلاف کتابخانه‌های دوبعدی، Gitframes یک گراف صحنه سه‌بعدی بومی دارد. این سیستم از یک ریگ دوربین کالیبره شده (Camera3D) با دوربین‌های LookAt و Turntable پشتیبانی می‌کند که در آن مختصات z=0 دقیقاً با بوم دوبعدی ۱:۱ مطابقت دارد. موتور این ابزار طیف گسترده‌ای از فرمت‌های سه‌بعدی را بدون نیاز به وابستگی خارجی پشتیبانی می‌کند، از جمله OBJ، FBX، glTF/GLB، STL، PLY، VOX، 3DS و OFF.

کیفیت بصری با استفاده از Linear Blend Skinning با ۱۲۸ استخوان و تکنیک‌های پیشرفته سایه‌زنی ارتقا یافته است. این موتور از سایه‌زنی PBR چند-نوری، سایه‌های تماسی PCSS/Poisson، انسداد محیطی فضای صفحه (SSAO) و عمق میدان (DoF) اپتیکی پشتیبانی می‌کند. تاری حرکتی (Motion Blur) فیزیکی ۱۸۰ درجه با استفاده از بردارهای سرعت هر راس (per-vertex velocity vectors) که در بافرهای MRT از نوع rg16float بسته‌بندی شده‌اند، به دست می‌آید.

بینایی عصبی روی دستگاه

Gitframes هوش مصنوعی را مستقیماً وارد حلقه رندر می‌کند. با استفاده از مدل‌های ONNX تحت لایسنس Apache-2.0، موتور می‌تواند در زمان واقعی ردیابی اشیا، قطعه‌بندی (Segmentation) و تخمین ژست (Pose Estimation) را بدون نیاز به رفت‌وبرگشت به دیسک یا API خارجی انجام دهد. مدل‌ها در اولین استفاده به‌صورت تنبل (lazy) بارگذاری شده و به نسخه‌های تغییرناپذیر Hugging Face که توسط SHA-256 تأیید شده‌اند، متصل می‌شوند. روی CPU، پردازش یک فریم 2K تقریباً ۲۰۰ تا ۳۴۰ میلی‌ثانیه برای تشخیص و قطعه‌بندی، ۱۲۰ میلی‌ثانیه برای ژست و ۲۰ میلی‌ثانیه برای ماسک (در نسخه s) زمان می‌برد.

قابلیت‌های کلیدی بینایی عبارتند از:

  • RTMDet-Ins: ارائه باکس‌های COCO-80، امتیازات و ماسک‌های نرم برای هر نمونه. تشخیص و قطعه‌بندی در یک پاس استنتاج واحد برای هر فریم انجام می‌شود.
  • RTMO: ردیابی ۱۷ نقطه کلیدی COCO و وضعیت دید هر شخص برای تخمین ژست انسانی.
  • Selfie Segmenter: ماسک آلفای سریع برای جداسازی فرد از پس‌زمینه جهت قاب‌بندی پرتره (بهینه‌شده برای سوژه‌هایی که بیشتر قاب را پر می‌کنند).

این نتایج به صورت سیگنال‌های واکنشی ارائه می‌شوند. توسعه‌دهنده می‌تواند با pinToObject یک گره را به یک مسیر ردیابی شده با قابلیت‌های هموارسازی (smoothing) و منطق پنهان‌سازی خودکار متصل کند. ابزارهای سطح بالا شامل موارد زیر است:

  • ساندویچ سوژه (Subject Sandwich): بریدن سوژه پیش‌زمینه و قرار دادن تایپوگرافی یا گرافیک‌ها در پشت او.
  • بازقاب‌بندی هوشمند (Smart Reframing): برش خودکار ۱۶:۹ به ۹:۱۶ در حالی که سوژه را با دمپینگ و فضای بالای سر (headroom) ردیابی می‌کند.
  • خط دور سوژه (Subject Outline): ایجاد درخشش‌های کانتور واکنشی به صدا با رسم دور مرزهای قطعه‌بندی شده.
  • تاری ناحیه ردیابی شده: تاری چهره‌ها، پلاک‌ها یا هر کلاس شناسایی شده از طریق layer.blurRegion.

جزئیات پیاده‌سازی بینایی

برای تضمین پایداری و عملکرد، موتور بینایی از چندین مکانیسم تخصصی استفاده می‌کند:

  • ردیابی زمانی (Temporal Tracking): ابزار TemporalObjectTracker با استفاده از تداعی IoU، شناسه‌های ردیابی (trackIds) پایداری را اختصاص می‌دهد. این سیستم از هموارسازی موقعیت و پیش‌بینی مبتنی بر سرعت (velocity-based coasting) برای حداکثر ۱۵ فریم گم‌شده استفاده می‌کند تا از پرش تصویر در زمان‌های عدم تشخیص جلوگیری شود.
  • شرطی‌سازی GPU: موتور می‌تواند ۱۷ نقطه کلیدی COCO را از طریق PoseSkeletonRenderer به بافت‌های شرطی VRAM تبدیل کند و از SegmentationTexturePool برای بازاستفاده از بافت‌های سیلوئت استفاده نماید.
  • تحلیل توالی (Sequence Analysis): متد analyzeVisionSequence اجازه می‌دهد یک منبع بدون نیاز به ffmpeg تحلیل شود و گزارشی سریال‌شونده (zod-serializable) شامل میانگین سرعت، مسیرهای مرکز نمونه‌برداری شده و اطمینان هر کلاس برگرداند.
  • سیگنال‌های واکنشی: هر موجودیت ردیابی شده، ProgrammaticSignals را برای محدوده (x/y/width/height)، نقاط لنگر (۹ نقطه)، کینماتیک (سرعت x/y، شتاب) و ژست (هر ۱۷ نقطه کلیدی) ارائه می‌دهد.

صوت و بصری‌سازی داده‌ها

صوت در این موتور یک شهروند درجه یک است و از یک ساعت دقیق فریم-محور استفاده می‌کند. پشتیبانی از میکس چندتراکه و افکت‌های صوتی رویه‌ای (Procedural SFX) — مانند Whooshes، Impacts، Risers و Glitches — که دقیقاً با شبکه ضرب‌آهنگ (Beat Grid) با استفاده از renderSfx و mixSfxInto هماهنگ هستند، امکان‌پذیر است. این سیگنال‌های صوتی می‌توانند از طریق Signal.builder تغییرات بصری را هدایت کنند و انیمیشن‌های واکنشی بر اساس تمپو یا فرکانس ایجاد کنند.

برای محتوای داده‌محور، سیستم Layer.chart نمودارهای خطی، ناحیه‌ای، ستونی (گروهی یا انباشته)، پراکندگی (scatter)، شمعی (candlestick)، دایره‌ای و دونات می‌سازد. این‌ها تصویر ثابت نیستند، بلکه گره‌های برداری بومی هستند که هندسه آن‌ها توسط d3 محاسبه می‌شود. این نمودارها را می‌توان در فضای سه‌بعدی کج کرد یا با انیمیشن‌های مرحله‌ای (شامل شروع، مدت زمان، فاصله و ease) نمایش داد، در حالی که از همان رندر متن GPU استفاده می‌کنند.

تجربه توسعه‌دهنده عامل‌محور

Gitframes صراحتاً برای عامل‌های کدنویس مثل Claude Code، Cursor و GitHub Copilot طراحی شده است. این ابزار یک پلاگین «مهارت‌ها» (Skills) دارد که به عامل‌ها یاد می‌دهد چگونه ترکیب‌های ویدیو بنویسند، افکت‌ها را اعمال کنند و رندرها را تأیید کنند. برای Claude Code، کاربران می‌توانند آن را از طریق /plugin install gitframes نصب کنند. سایر عامل‌ها می‌توانند از npx skills add gatewai-dev/gitframes برای ادغام این مهارت‌ها استفاده کنند. این رویکرد در راستای تلاش‌هایی است که در آن پلاگین‌های تخصصی برای کاهش توهمات کدنویسی عامل‌های هوش مصنوعی توسعه یافته‌اند تا دقت اجرای دستورات در محیط‌های پیچیده گرافیکی افزایش یابد.

برای تضمین کیفیت، سیستم 'FrameGrid' معرفی شده است. به‌جای رندر کامل ویدیو برای بررسی یک انتقال (transition)، عامل‌ها می‌توانند یک صفحه تماس (contact sheet) از فریم‌های متوالی برای بازرسی سریع بصری تولید کنند. این سیستم با تأییدات (assertions) تغییرناپذیر نمونه‌برداری پیکسل در Vitest با استفاده از skia-canvas جفت شده است تا ریاضیات شیدرها، پوشش فونت و دلتای زمانی MSE (Mean Squared Error) را تأیید کند.

دکترین‌های مهندسی

برای خروجی حرفه‌ای، Gitframes قوانین سخت‌گیرانه‌ای را دنبال می‌کند:

  • ناپایدار بودن Premultiplied-Alpha: شیدرهای Fragment باید در حالت Blend خود از srcFactor: "one" استفاده کنند تا از مربع شدن آلفا جلوگیری شود؛ در غیر این صورت، محو شدن‌ها (fades) تیره و خاکستری می‌شوند.
  • برش‌های تطبیقی (Carrier Match Cuts): المان‌های بصری مانند نشان‌ها یا کارت‌ها در طول مرزهای صحنه با سرعت مداوم منتقل می‌شوند تا از برش‌های تکان‌دهنده جلوگیری شود.
  • هموارسازی فیزیکی (Physical Easing): استفاده از back.out(1.4–1.7) برای ورودهای ضربه‌ای با overshoot و spring یا expo.out برای حرکات کاهش سرعت.
  • قراردادهای تم (Theme Contracts): تعریف متمرکز THEME برای رنگ‌ها و فاصله‌ها تا از مقادیر Hex سخت‌افزاری (magic values) جلوگیری شود.

معماری Monorepo

پروژه با pnpm workspaces و turbo مدیریت می‌شود و به پکیج‌های تخصصی تقسیم شده است:

  • @gitframes/webgpu-renderers: شامل شیدرهای WGSL، موتور متن Slug و رندر سه‌بعدی.
  • @gitframes/tensor-webgpu: مدیریت خط لوله‌های محاسباتی برای Canny، تبدیل عمق به نرمال و جریان اپتیکال (optical flow).
  • @gitframes/vision: موتور ONNX برای تشخیص، قطعه‌بندی و ردیابی.
  • @gitframes/renderer: رندر بدون سر Node.js که از Dawn و WebCodecs استفاده می‌کند.
  • nodes/: مجموعه‌ای از بیش از ۵۸ گره تخصصی برای VFX، صوت و چیدمان.

تحلیل: تغییر به سمت «ویدیو به عنوان کد»

این رویکرد نشان‌دهنده یک تغییر بنیادین در نحوه تفکر ما درباره موشن‌گرافی است. با انتقال از جریان کاری GUI-محور (افترافکت) یا DOM-محور (Remotion) به یک SDK بومی GPU، تولید ویدیو به یک مسئله استاندارد مهندسی نرم‌افزار تبدیل می‌شود. این تحول در واقع بخشی از موج بزرگتری است که در آن اتوماسیون استودیوها از طریق رابط‌های API پیشرفته در حال بازتعریف فرآیندهای تولید ویدیو در مقیاس صنعتی است.

برای توسعه‌دهندگان، این بدان معناست که ویدیو اکنون می‌تواند با همان سخت‌گیریِ تست‌های واحد (unit tests) در خط لوله‌های CI/CD ادغام شود. برای عامل‌های هوش مصنوعی، این کار «جعبه سیاه» مرورگر را حذف می‌کند و به آن‌ها اجازه می‌دهد پیکسل‌ها را از طریق ریاضیات و شیدرها دستکاری کنند، به‌جای اینکه با باگ‌های چیدمان CSS و HTML بجنگند. برنده واقعی در اینجا هزینه تولید است؛ کاهش ۹۰ درصدی نیاز به رم، تولید ویدیوهای شخصی‌سازی شده در مقیاس انبوه را از نظر اقتصادی امکان‌پذیر می‌کند.

برای مشاهده این سیستم در عمل، می‌توانید دایرکتوری examples/ در گیت‌هاب — شامل فیلم برند ۳۰ ثانیه‌ای پروژه — را بررسی کنید یا مهارت‌ها را از طریق npx skills add gatewai-dev/gitframes نصب کنید تا عامل هوش مصنوعی شما شروع به ترکیب ویدیو کند.

چرا این موضوع مهم است؟

این ابزار با تکیه بر تخصص در WebGPU، هزینه تولید ویدیوهای برنامه‌ریزی‌شده را به‌شدت کاهش می‌دهد. این تغییر باعث می‌شود تولید محتوای ویدئویی پویا برای عامل‌های هوش مصنوعی از یک فرآیند کند و گران به یک عملیات سریع و ارزان تبدیل شود.

تأثیر برای ایران

برای توسعه‌دهندگان ایرانی که با محدودیت منابع سخت‌افزاری در سرورها مواجه‌اند، کاهش مصرف رم از ۴ گیگابایت به ۴۰۰ مگابایت یک فرصت واقعی برای اجرای پروژه‌های تولید ویدیو در مقیاس بالا است.

·نگاه ما
تحریریه دات‌هوش

انتقال رندرینگ ویدیو از لایه مرورگر به لایه سخت‌افزار (GPU-native) نشان می‌دهد که دوران «شبیه‌سازی محیط وب» برای تولید محتوا به پایان رسیده است. این رویکرد، ویدیو را از یک خروجی بصری به یک «ساختار داده‌ای» تبدیل می‌کند که می‌توان آن را در خط لوله‌های CI/CD مانند یک کد نرم‌افزاری تست و بهینه‌سازی کرد. کاهش ۹۰ درصدی مصرف رم، در واقع سد اقتصادی تولید ویدیوهای شخصی‌سازی‌شده در مقیاس میلیونی را می‌شکند.

منابع

این گزارش با خط‌لولهٔ خودکار دات‌هوش از منابع معتبر جهانی تدوین و زیر نظر تحریریه منتشر شده است. روش کار ما

گفتگو

پنج‌شنبه‌های هوش‌محور

بسته‌ی هفتگی دات‌هوش

۵ خبر، ۲ ابزار، ۱ پرامپت در هر شماره. به‌زودی راه‌اندازی می‌شود — هر پنج‌شنبه صبح.

خبر کلیدی
ابزار کاربردی
پرامپت حرفه‌ای
تحلیل پژوهش
به‌زودی
زاویه‌ی ایرانی
به‌زودی
تمرین این هفته
به‌زودی

راهنماهای دات‌هوش

راهنماهای کاربردیِ دات‌هوش برای کار با هوش مصنوعی — از همین‌جا شروع کنید:

دات‌هوش

راهنمای فارسی هوش مصنوعی — با نگاه به ایران

اخبار روزانه، معرفی ابزارها و مدل‌ها، و آموزشِ کار با هوش مصنوعی؛ همیشه با این پرسش که از ایران چه چیزی کار می‌کند و چه چیزی نه.