تسمح لك الفلاتر المخصصة أو أدوات تظليل CSS كما كان يتم استدعائها باستخدام قوة أدوات تظليل WebGL مع محتوى DOM. ونظرًا لأن أدوات التظليل المستخدمة في الاستخدام الحالي هي نفسها تقريبًا تلك الموجودة في WebGL، تحتاج إلى التراجع وفهم بعض المصطلحات ثلاثية الأبعاد وقليل من مسار الرسومات.
لقد أدرجتُ نسخة مسجَّلة من العرض التقديمي الذي قدَّمته مؤخرًا إلى صحيفة LondonJS. في الفيديو الذي أقدم، أستعرض نظرة عامة على المصطلحات ثلاثية الأبعاد التي تحتاج إلى فهمها، وأنواع المتغيرات المختلفة التي ستواجهها، وكيف يمكنك البدء في استخدام الفلاتر المخصصة اليوم. يجب أيضًا استيعاب الشرائح حتى تتمكن من اللعب بالعروض التوضيحية بنفسك.
مقدمة عن أدوات التحكم
لقد كتبت سابقًا مقدمة عن أدوات التظليل والتي ستقدّم لك شرحًا جيدًا عن أدوات التظليل وكيفية استخدامها من منظور 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() أيضًا.
الدفع من Pixel
إذا كنت معتادًا على استخدام أدوات التظليل في WebGL، فستلاحظ أن الأشياء في الفلاتر المخصصة تختلف قليلاً. أولاً، لا ننشئ الزخارف التي تستخدمها أداة تظليل الأجزاء لتعبئة وحدات البكسل. بدلاً من ذلك، يتم تعيين محتوى DOM الذي تم تطبيق الفلتر عليه إلى زخرفة تلقائيًا، وهذا يعني شيئين:
- لأسباب تتعلق بالأمان، لا يمكننا الاستعلام عن قيم اللون الفردية لوحدات البكسل لزخرفة DOM.
- نحن لا نعيّن (على الأقل في الاستخدامات الحالية) لون البكسل النهائي بأنفسنا، أي أنّ
gl_FragColorغير مسموح به. بدلاً من ذلك، يُفترض أنّك ستحتاج إلى عرض محتوى DOM، وما عليك فعله هو معالجة وحدات البكسل بشكل غير مباشر من خلالcss_ColorMatrixوcss_MixColor.
وهذا يعني أن Hello World من أدوات تظليل الأجزاء تبدو كما يلي:
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) في المصفوفة في الحصول على قيمة بكسل تم التلاعب بها من الجانب الآخر، وفي هذه الحالة، القيمة التي تُظهر أصفار المكونات الخضراء والزرقاء.
يتم استخدام css_MixColor بشكل أساسي كلون أساسي تريد مزجه مع محتوى DOM. يتم المزج من خلال أوضاع المزج التي ستكون على دراية بها من الحزم الفنية: التركيب، والشاشة، وتفادي الألوان، والإضاءة القوية، وما إلى ذلك.
هناك الكثير من الطرق التي يمكن من خلالها لهذين المتغيرين معالجة وحدات البكسل. يجب الاطلاع على مواصفات عوامل التصفية للحصول على فهم أفضل لكيفية تفاعل أوضاع المزج والوضع المركّب.
إنشاء Vertex
في WebGL، نتحمل المسؤولية الكاملة لإنشاء نقاط ثلاثية الأبعاد للشبكة المتداخلة، ولكن في عوامل التصفية المخصصة، كل ما عليك فعله هو تحديد عدد الصفوف والأعمدة التي تريدها وسيقوم المتصفح تلقائيًا بتقسيم محتوى DOM إلى مجموعة من المثلثات:
ويمرر كل رأس من هذه الرؤوس إلى أداة تظليل الرأس لدينا للمعالجة، وهذا يعني أنه يمكننا البدء في تحريكها في مساحة ثلاثية الأبعاد بالشكل الذي نحتاجه. لم يمض وقت طويل على إنشاء بعض التأثيرات الرائعة.
الصور المتحركة باستخدام أدوات التظليل
إن إضافة الرسوم المتحركة إلى أدوات التظليل هو ما يجعلها ممتعة وجذابة. للقيام بذلك، يمكنك ببساطة استخدام انتقال (أو صورة متحركة) في 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;
}
ابدأ اللعب.
تُعدّ الفلاتر المخصّصة ميزة رائعة، كما أنّ التأثيرات المذهلة التي يمكنك إنشاؤها أمر صعب (وفي بعض الحالات) بدونها. لا تزال هذه الأشياء في بداياتها، وتتغير الأمور قليلاً، لكن إضافتها ستضيف القليل من الإنجازات إلى مشروعاتك، فلماذا لا تمنحها الفرصة؟