تقنية

ألفا قبل الاستيفاء: احسب لون المنتصف بين عينتين

مقارنة رقعتين محسوبتين فوق الأبيض، إحداهما من متوسط مباشر والأخرى بعد ضرب المكونات في ألفا
رقع أصلية من نتائجنا العددية فوق خلفية بيضاء. أرقام RGB المرفقة تحدد المقارنة، ولو اختلف مظهر الألوان بين الشاشات.

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

الخلاصة السريعة

  • عينتنا A هي (0.2, 0.6, 0.8, 1)، وB هي (0.8, 0.1, 0.6, 0).
  • الترتيب داخل كل رباعية هو الأحمر، ثم الأخضر، ثم الأزرق، ثم ألفا.
  • ينتج المسار المضروب مسبقًا في المنتصف اللون (0.2, 0.6, 0.8) بألفا 0.5.
  • فوق الأبيض تصبح قيمه (0.6, 0.8, 0.9)؛ هذه ثلاثية الناتج المعتم.
  • تبديل RGB في B لا يغير هذا المسار ما دامت ألفا B صفرًا.

حدد نوع الأرقام قبل حساب المتوسط

تصف مواصفة CSS Color استيفاء الألوان الشفافة بضرب المكونات في ألفا أولًا، ثم استيفائها، ثم القسمة على ألفا الناتجة إن لم تكن صفرًا. يطبق ذلك على المكونات كلها في نظام إحداثيات لوني مستطيل؛ للأنظمة ذات زاوية الصبغة معالجة مختلفة. [1]

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

اكتب A وB في سطرين. ألفا الأولى واحد، والثانية صفر. أما الثلاثية (0.8, 0.1, 0.6) في B فهي بيانات اخترناها، وليست رقعة بنفسجية مرئية في طرف الرسم. حين نعرض B وحدها فوق الأبيض، نرى الأبيض؛ لا نستطيع معرفة تلك الثلاثية من لون العرض وحده.

مسار يخلط القنوات قبل مراعاة ألفا

ابدأ بحساب المتوسط المعتاد لكل خانة. الأحمر (0.2+0.8)/2=0.5، والأخضر (0.6+0.1)/2=0.35، والأزرق (0.8+0.6)/2=0.7. ومتوسط ألفا (1+0)/2=0.5. احتفظ بالنتيجة (0.5, 0.35, 0.7, 0.5) للمقارنة.

هذه عمليات حساب صحيحة على الأعمدة التي أعطيناها، لكن الناتج يتضمن مساهمة من الثلاثية المختفية في B. لا نرفضه بسبب خطأ جمع؛ نسأل إن كان هو التمثيل المقصود لمسارنا. سنرى أثر تلك المساهمة بعد وضع النتيجة على خلفية ثابتة، ثم عند تغيير B وحدها.

مسار يضرب المكونات قبل المتوسط

في A لا يغير الضرب الأرقام، لأن ألفا واحد. تصبح الثلاثية المضروبة (0.2, 0.6, 0.8). في B يضرب الصفر كل مكون، فنحصل على (0, 0, 0). نحسب متوسط هاتين الثلاثيتين: (0.1, 0.3, 0.4)، ومتوسط ألفا ما زال 0.5.

لم ننته بعد إذا كنا نريد كتابة RGB منفصلة عن ألفا. نقسم 0.1 و0.3 و0.4 على 0.5، فتعود (0.2, 0.6, 0.8). نضع معها ألفا الجديدة، لا ألفا A القديمة. لذلك ليست العينة الوسطى نسخة معتمة من A؛ ثلاثيتها مماثلة لها، لكن عتامتها في المثال نصفها.

ثلاث مراحل: طرفان بعد الضرب، ومتوسط مضروب مع ألفا نصف، ثم قسمة المكونات لاستعادة RGB
خطوات أصلية لأعداد A وB. لا تقرأ الثلاثية في الوسط كأنها RGB النهائية؛ عنوان كل صندوق يحدد تمثيلها.

ضع النتيجتين فوق الأبيض

لمصدر لونه C وألفاه a فوق خلفية بيضاء معتمة، تختزل صيغة source-over إلى a×C+(1−a)×(1,1,1). ألفا التركيب النهائي واحد. هذه خطوة عرض لاحقة لحساب العينة الوسطى. [2]

للمسار الأول نضرب (0.5, 0.35, 0.7) في النصف ثم نضيف نصفًا لكل قناة. نحصل على (0.75, 0.675, 0.85). وللمسار الثاني نضرب (0.2, 0.6, 0.8) في النصف ثم نضيفه، فتكون النتيجة (0.6, 0.8, 0.9). الخلفية وألفا العينة متساويتان؛ الذي اختلف هو RGB التي ركبناها.

أرقام المنتصف والعرض فوق الأبيض
الطريقةRGB قبل الخلفيةRGB بعد الخلفية
متوسط القنوات مباشرة(0.5,0.35,0.7)(0.75,0.675,0.85)
ضرب ثم متوسط ثم قسمة(0.2,0.6,0.8)(0.6,0.8,0.9)

تستخدم الرقع في الصورة الأولى نتائج العمود الأخير كألوان معتمة. ليست لقطات من اختبار محرر صور، ولا تحافظ هذه الرقع وحدها على ألفا العينة الأصلية. احتفظ بالرباعية قبل الخلفية إذا أردت إعادة حساب العرض على خلفية أخرى؛ ثلاثية العرض فوق الأبيض تجيب عن سؤال مختلف.

بدل ما لا تراه في الطرف الثاني

استبدل B بـ(0,0,0,0)، واترك A كما هي. في المتوسط المباشر تصبح RGB الوسطى (0.1,0.3,0.4) بألفا نصف، ويصبح عرضها فوق الأبيض (0.55,0.65,0.7). تغيرت النتيجة مع أن B في الحالتين لا تضيف لونًا مرئيًا حين تعرض وحدها.

أما في المسار المضروب، فالثلاثية التي تدخل المتوسط من جهة B هي الصفر في الحالتين. لهذا تبقى الأرقام الوسطى والرقعة المعروضة كما كانت. يمكنك تجربة (1,1,0,0) بدلًا منها: أعمدة B مختلفة، لكن ضربها في صفر يعيد المدخل نفسه. هذا فحص مباشر لسبب الثبات في مثالنا.

لا تحذف لون طرف ذي ألفا غير صفرية

لنعد إلى ثلاثية B الأصلية، ونغير ألفاها هذه المرة إلى 0.5. يصبح طرفها المضروب (0.4,0.05,0.3). متوسطه مع طرف A المضروب هو (0.3,0.325,0.55)، ومتوسط ألفا 0.75. عند العرض فوق الأبيض نضيف ربعًا إلى هذه الثلاثية المضروبة، فنحصل على (0.55,0.575,0.8).

النتيجة مختلفة الآن لسبب واضح: غيرنا عتامة الطرف الثاني، لا البيانات المختفية وحدها. لا يصح الاحتفاظ بالرقعة السابقة ثم القول إن الضرب المسبق تجاهل B. قيمتها أصبحت تدخل المتوسط بوزن معلوم. ويمكن استعادة RGB قبل العرض بقسمة الثلاثية المضروبة على 0.75؛ لا تقسّم ألفا نفسها مرة ثانية.

راجع الحالة الصفرية وحدود المقارنة

إذا جعلت ألفا الطرفين صفرًا، صار المتوسط المضروب صفرًا وألفاه صفرًا. في حسابنا نحتفظ حينها بالرباعية الصفرية، ونتوقف قبل القسمة. لا نحتاج إلى اختراع RGB مرئية؛ عرض هذه العينة على خلفيتنا يعيد الأبيض. هذه حالة مختلفة عن مثال المنتصف الأول، الذي كانت ألفاه نصفًا.

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

اكتب فوق كل سطر في ورقتك: «RGB مستقلة» أو «RGB مضروبة» أو «ناتج فوق الأبيض». في حسابنا منع هذا التفريق استخدام (0.1,0.3,0.4) في المكان الخطأ. تستطيع الآن إعادة مثال A وB دون الاعتماد على تشابه الرقع: كل انتقال له عملية محددة، وكل رقم ينتمي إلى مرحلة معلومة.

المصادر

  1. W3C: CSS Color، الاستيفاء مع ألفا
  2. W3C: Compositing، التركيب بألفا

أُعد النص والحساب والرسوم بمساعدة الذكاء الاصطناعي. المثال العددي أصلي؛ لم نختبر صورة مستوردة أو محرر صور، ولم تجر مراجعة بشرية مستقلة.