تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

مقدّمة عن الفلاتر المخصّصة (المعروفة أيضًا باسم "أدوات تظليل CSS")

Paul Lewis

تسمح لك الفلاتر المخصّصة، أو ما كان يُعرف سابقًا باسم "تأثيرات محوِّل وحدة معالجة الرسومات (CSS)"، باستخدام إمكانات تأثيرات محوِّل وحدة معالجة الرسومات (WebGL) مع محتوى DOM. بما أنّ Shaders المستخدَمة في التنفيذ الحالي هي نفسها تقريبًا في WebGL، عليك التراجع قليلاً وفهم بعض المصطلحات الثلاثية الأبعاد وبعض أساسيات مسار الرسومات.

لقد أدرجت نسخة مسجّلة من عرض تقديمي قدّمته مؤخرًا في LondonJS. في الفيديو، أقدّم نظرة عامة على المصطلحات المتعلّقة بالعروض الثلاثية الأبعاد التي عليك فهمها، وأنواع المتغيّرات المختلفة التي ستواجهها، وكيفية البدء في استخدام "الفلاتر المخصّصة" اليوم. يجب أيضًا الحصول على الشرائح حتى تتمكّن من تشغيل العروض التوضيحية بنفسك.

مقدمة عن Shaders

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

بعد ذلك، لنفعّل الفلاتر المخصّصة ونواصل العمل.

تفعيل الفلاتر المخصّصة

تتوفّر "الفلاتر المخصّصة" في كلّ من Chrome وCanary بالإضافة إلى Chrome لأجهزة Android. ما عليك سوى الانتقال إلى about:flags والبحث عن "تأثيرات CSS" وتفعيلها وإعادة تشغيل المتصفّح. يمكنك الآن المتابعة.

البنية

تعمل الفلاتر المخصّصة على توسيع مجموعة الفلاتر التي يمكنك تطبيقها حاليًا، مثل blur أو sepia، على عناصر DOM. كتب "إريك بيدلمان" أداة رائعة لتلك التطبيقات، وننصح بالاطّلاع عليها.

لتطبيق فلتر مخصّص على عنصر نموذج DOM، استخدِم البنية التالية:

.customShader {
    -webkit-filter:

    custom(
        url(vertexshader.vert)
        mix(url(fragment.frag) normal source-atop),

    /* Row, columns - the vertices are made automatically */
    4 5,

    /* We set uniforms; we can't set attributes */
    time 0)
}

ستلاحظ من هذا أنّنا نعلن عن برامج تشويش قمة الهرم والشريحة، وعدد الصفوف والأعمدة التي نريد تقسيم عنصر DOM إلى أقسامها، ثم أيّ قيم ثابتة نريد تمريرها.

نريد الإشارة إلى أنّنا نستخدم دالة mix() حول برنامج تظليل الشرائح مع وضع مزج (normal) ووضع مركب (source-atop). لنلقِ نظرة على برنامج تظليل الشرائح نفسه لمعرفة سبب احتياجنا إلى دالة mix().

دفع المحتوى إلى الشاشة

إذا كنت على دراية بتأثيرات WebGL، ستلاحظ أنّ الأمور مختلفة قليلاً في "الفلاتر المخصّصة". على سبيل المثال، لا ننشئ مواد النسيج التي يستخدمها برنامج Shader لتعبئة وحدات البكسل. بدلاً من ذلك، يتمّ ربط محتوى DOM الذي تمّ تطبيق الفلتر عليه بنسيج تلقائيًا، ويعني ذلك شيئين:

لأسباب تتعلق بالأمان، لا يمكننا طلب قيم ألوان وحدات البكسل الفردية لنسيج DOM.
لا نضبط لون البكسل النهائي بأنفسنا (على الأقل في عمليات التنفيذ الحالية)، أي أنّ gl_FragColor غير مسموح به. بدلاً من ذلك، يُفترض أنّك تريد عرض محتوى DOM، ويمكنك التلاعب بوحدات البكسل الخاصة به بشكل غير مباشر من خلال css_ColorMatrix وcss_MixColor.

وهذا يعني أنّ "مرحبًا بك" في برنامج "تظليل الشرائح" يبدو على النحو التالي:

void main() {
    css_ColorMatrix = mat4(1.0, 0.0, 0.0, 0.0,
                            0.0, 1.0, 0.0, 0.0,
                            0.0, 0.0, 1.0, 0.0,
                            0.0, 0.0, 0.0, 1.0);

    css_MixColor = vec4(0.0, 0.0, 0.0, 0.0);

    // umm, where did gl_FragColor go?
}

يتم ضرب كل بكسل من محتوى DOM في css_ColorMatrix، ولا يؤدي ذلك في الحالة أعلاه إلى أيّ إجراء لأنّه مصفوفة الهوية ولا يغيّر أيًا من قيم RGBA. إذا أردنا مثلاً الاحتفاظ بالقيم الحمراء فقط، سنستخدم css_ColorMatrix على النحو التالي:

// keep only red and alpha
css_ColorMatrix = mat4(1.0, 0.0, 0.0, 0.0,
                        0.0, 0.0, 0.0, 0.0,
                        0.0, 0.0, 0.0, 0.0,
                        0.0, 0.0, 0.0, 1.0);

نأمل أن تلاحظ أنّه عند ضرب قيم البكسل 4D (RGBA) في المصفوفة، ستحصل على قيمة بكسل تم التلاعب بها من الجانب الآخر، وفي هذه الحالة، تكون قيمة تم فيها تحويل المكوّنين الأخضر والأزرق إلى 0.

يُستخدَم css_MixColor بشكل أساسي كلون أساسي تريد مزجه مع محتوى DOM. يتم المزج من خلال أوضاع المزج التي ستكون على دراية بها من حِزم الأعمال الفنية: التراكب، والشاشة، وتخفيف اللون، والإضاءة القوية، وما إلى ذلك.

هناك العديد من الطرق التي يمكن بها لكلا المتغيّرَين التلاعب بالبكسل. عليك الاطّلاع على مواصفات تأثيرات الفلاتر للتعرّف بشكل أفضل على كيفية تفاعل وضعَي المزج والتركيب.

إنشاء قمة

في WebGL، نتحمّل المسؤولية الكاملة عن إنشاء نقاط الشبكة الثلاثية الأبعاد، ولكن في "الفلاتر المخصّصة"، ما عليك سوى تحديد عدد الصفوف والأعمدة التي تريدها وسيقسّم المتصفّح تلقائيًا محتوى DOM إلى مجموعة من المثلثات:

إنشاء رأس — صورة يتم تقسيمها إلى صفوف وأعمدة

بعد ذلك، يتم تمرير كل رأس من هذه الرؤوس إلى برنامج تشفير رؤوس المثلثات للمعالجة، ما يعني أنّه يمكننا البدء في نقلها في الفضاء الثلاثي الأبعاد حسب الحاجة. سيصبح بإمكانك قريبًا إنشاء بعض التأثيرات الرائعة.

تأثير أكورديون — صورة يتم تشويهها بتأثير Accordion

إضافة تأثيرات متحركة باستخدام Shaders

إنّ إضافة رسوم متحركة إلى مواد التشويش هي ما يجعلها ممتعة وتفاعلية. ولإجراء ذلك، ما عليك سوى استخدام انتقال (أو حركة) في CSS لتعديل القيم الموحّدة:

.shader {
    /* transition on the filter property */
    -webkit-transition: -webkit-filter 2500ms ease-out;

    -webkit-filter: custom(
    url(vshader.vert)
    mix(url(fshader.frag) normal source-atop),
    1 1,
    time 0);
}

    .shader:hover {
    -webkit-filter: custom(
    url(vshader.vert)
    mix(url(fshader.frag) normal source-atop),
    1 1,
    time 1);
}

لذا، يُرجى ملاحظة أنّ الوقت سيخفّ من 0 إلى 1 أثناء عملية النقل. داخل برنامج التظليل، يمكننا تحديد متغير الربط time واستخدام قيمته الحالية:

    uniform float time;

uniform mat4 u_projectionMatrix;
attribute vec4 a_position;

void main() {
    // copy a_position to position - attributes are read only!
    vec4 position = a_position;

    // use our time uniform from the CSS declaration
    position.x += time;

    gl_Position = u_projectionMatrix * position;
}

بدء اللعب

إنّ استخدام الفلاتر المخصّصة ممتع للغاية، والتأثيرات الرائعة التي يمكنك إنشاؤها باستخدامها يصعب (وفي بعض الحالات يكون من المستحيل) إنشاؤها بدونها. لا تزال هذه الميزة في مراحلها الأولى، وتشهد تغييرات كبيرة، ولكنّ إضافتها ستضفي لمسة من عالم الترفيه على مشاريعك، لذا ننصحك بتجربتها.