Amit Vermaأداء Pixlr عبر WebGL: بناء Pixlr X وPixlr E لخدمة الملايين من المستخدمين
Pixlr هو تحرير للصور داخل المتصفح دون الحاجة إلى أي تثبيت، يستخدمه ملايين الأشخاص شهريًا. لقد عنى بناء Pixlr X وPixlr E جعل التحرير المعزز بوحدة معالجة الرسومات يبدو فوريًا عبر نطاق هائل من الأجهزة والمتصفحات، حيث يدفع المستخدم ثمن كل إطار يسقط وكل ميغابايت يُستهلك. تتناول دراسة الحالة هذه أعمال WebGL وThree.js وراء هذين المحرّرين، إضافةً إلى خطوط معالجة الفلاتر التي كان عليها أن تبقى سريعة على نطاق المتصفح.
المشكلة
كان على التحرير المعزّز بوحدة معالجة الرسومات أن يبدو فوريًا عبر نطاق غير متوقع من المتصفحات ووحدات معالجة الرسومات والأجهزة، وعلى نطاق ملايين المستخدمين شهريًا.
المنهجية
نقل العمليات على مستوى البكسل إلى وحدة معالجة الرسومات عبر مظللات WebGL وThree.js، مع إبقاء الخيط الرئيسي متفرّغًا لتظل الواجهة سلسة وسريعة الاستجابة.
النتيجة
منتجان على أساس WebGL موحّد: تحرير يومي سريع في Pixlr X وعمق احترافي في Pixlr E، بأداء عالٍ على نطاق استهلاكي واسع.
السياق والتحدي
Pixlr محرّر صور سحابي يعمل بالكامل داخل المتصفح، عبر منتجَين يخدمان جمهورَين مختلفَين: Pixlr X للتحرير اليومي السريع وسهل الوصول، وPixlr E بصفته محررًا بمستوى احترافي مصممًا للعمق والقوة والأداء. يصل المنتجان معًا إلى ملايين المستخدمين النشطين شهريًا، وهو ما يفرض معيارًا صارمًا. فالمحرّر مطالب بأن ينطلق بسرعة، وأن يستجيب لضربات الفرشاة وتغييرات الفلاتر دون تأخير، وأن يتصرف باتساق سواء كان المستخدم على وحدة معالجة رسومات مكتبية متطورة أم على حاسوب محمول متواضع.
تكمن الصعوبة الجوهرية في تحرير الصور على الويب في أن معالجة البكسل مكلفة وبيئة التشغيل غير قابلة للتنبؤ. إذ يتعين على الشيفرة نفسها أن تؤدي عبر طيف واسع من المتصفحات ووحدات معالجة الرسومات وأحجام الشاشات، دون أي تحكم في عتاد المستخدم. ولن يكون أداء العبء الثقيل على وحدة المعالجة المركزية قابلًا للتوسع، لذا كان لا بد من نقل هذا العمل إلى وحدة معالجة الرسومات عبر WebGL مع إبقاء الواجهة هادئة وسريعة الاستجابة.
المنهجية
بنيت Pixlr X وPixlr E على WebGL وThree.js، مستخدمًا وحدة معالجة الرسومات بوصفها المحرّك لمعالجة الصور بدلًا من التعامل مع لوحة الرسم كسطح سلبي. وقد عُبِّر عن الفلاتر والتعديلات وعمليات التركيب بوصفها عمليات تظليل (Shader) بحيث يجري العبء الثقيل لكل بكسل حيث ينبغي له، تاركًا الخيط الرئيسي حرًّا للحفاظ على سلاسة الواجهة وتفاعليتها.
تشارك المنتجان الأساس الرسومي ذاته، لكنهما عبّرا عنه بطريقتين مختلفتين. إذ آثر Pixlr X السرعة وانخفاض حاجز الدخول، فكانت الأولوية للاستجابة الفورية ولسير عمل لا يُبقي المستخدم في انتظار. أما Pixlr E فقد أتاح عمقًا احترافيًا أكبر، ما عنى أن على خط المعالجة نفسه أن يصمد تحت تحرير أثقل وطبقي دون أن يفقد أداءه. وقد حافظ بناء كلا المنتجين على أساس مشترك من WebGL وThree.js على اتساق السلوك الرسومي عبر هذه العائلة.
القرارات الهندسية
تمثّل القرار المحوري في تحسين خط معالجة الفلاتر المعزز بوحدة معالجة الرسومات بدلًا من ملاحقة تحسينات دقيقة معزولة. وفلاتر الصور تناسب وحدة معالجة الرسومات بطبيعتها لأنها تطبّق العملية نفسها على كل بكسل، لذا فإن هيكلتها بوصفها مرورات تظليل (Shader passes) حوّلت ما كان حلقات بطيئة على وحدة المعالجة المركزية إلى عمل تنجزه عتاد الرسومات على التوازي. وانصبّ التركيز على إبقاء هذا الخط فعّالًا مع تسلسل الفلاتر وتحديث المعاينات بشكل مباشر، بحيث يظل التفاعل سريع الاستجابة حتى على الأجهزة الأقل قدرة.
كما فرض العمل على هذا النطاق انضباطًا في تحديد ما يُشغَّل ومتى. فمع ملايين المستخدمين النشطين شهريًا على عتاد يتعذر التنبؤ به، كان الأداء مسألة صحة لا لمسة ختامية. وقد وفّر Three.js تجريدًا مستقرًا فوق WebGL لإدارة عملية التصيير، في حين ضُبطت أعمال الفلاتر بحيث يبدو التحرير فوريًا لا مجمَّعًا أو معيقًا.
النتيجة
تمثّلت الحصيلة في محرّرين إبداعيين أصيلين على المتصفح يصمدان عند نطاق استهلاكي حقيقي. فيقدّم Pixlr X سير عمل تحرير سريعًا وسهل الوصول مبنيًّا للاستخدام واسع النطاق على المتصفح، بينما يوفّر Pixlr E تحريرًا بمستوى احترافي داخل المتصفح بعمق أداء يضاهي ذلك. ويعمل المنتجان كلاهما على خط معالجة WebGL المعزز بوحدة معالجة الرسومات الذي يُبقي الفلترة والتعديلات سريعة الاستجابة لملايين المستخدمين النشطين شهريًا.
وإلى جانب المنتجَين نفسيهما، أثبت هذا العمل أن الأدوات الإبداعية الجادّة والحساسة للأداء يمكن أن تعيش بالكامل داخل المتصفح دون أي تثبيت، لتصل إلى أي شخص متصل بالويب بغض النظر عن جهازه.
ما يبرهن عليه هذا العمل
يُظهر هذا العمل القدرة على نقل المهام الرسومية الحرجة للأداء إلى المتصفح وإبقائها سريعة تحت قيود واقعية: عتاد غير قابل للتنبؤ، وقاعدة مستخدمين ضخمة ومتنوعة، وواجهة عليها أن تبقى هادئة بينما تؤدي وحدة معالجة الرسومات عملًا شاقًّا في الخلفية. وهو دليل ملموس على هندسة WebGL وThree.js مطبَّقة على منتج يعتمد عليه الناس فعلًا كل يوم.
كما يتصل هذا العمل اتصالًا مباشرًا بأعمال المؤسسات والرسومات ثلاثية الأبعاد في الوقت الفعلي الأكثر صعوبة التي تلته. فالحدس نفسه، أي نقل الحوسبة الثقيلة إلى وحدة معالجة الرسومات، وتصميم خطوط معالجة قابلة للتوسع، وحماية جودة التفاعل، ينتقل مباشرةً إلى لوحات المعلومات ثلاثية الأبعاد في الوقت الفعلي وأدوات التكوين وتطبيقات الويب المدعومة بالذكاء الاصطناعي، حيث تكون سرعة الاستجابة والموثوقية أمرًا غير قابل للمساومة.
النتائج
- تطوير Pixlr X وPixlr E، محرّري صور قائمين على WebGL وThree.js يستخدمهما ملايين المستخدمين النشطين شهريًا
- تحسين خطوط معالجة الفلاتر المعززة بوحدة معالجة الرسومات بحيث يبقى تحرير كل بكسل سريع الاستجابة عبر طيف واسع من المتصفحات والأجهزة
- تقديم تحرير سريع وسهل الوصول في Pixlr X إلى جانب عمق احترافي وأداء عالٍ في Pixlr E على أساس رسومي مشترك
- إثبات أن الأدوات الإبداعية الحساسة للأداء والخالية من التثبيت يمكن أن تعمل بالكامل داخل المتصفح على نطاق استهلاكي