هل يجب أن أعرف لغة C أو برمجة الرسوميات لاستخدامها؟

GLSL لغة صغيرة بأسلوب يشبه C: حلقات وشروط وحسابات أرقام عشرية. مَن جرّب C أو Java أو JavaScript سيألفها بسرعة. القوالب الجاهزة مُعلَّقة بالشروحات، فيكفي تعديل القيم للبدء دون خبرة سابقة في برمجة GPU.

تم تجميع الشيدر بنجاح لكن المعاينة سوداء، ما السبب؟

الأسباب الشائعة: الكتابة في `gl_FragColor` خارج دالة main، أو إرجاع `vec3` بدل `vec4`، أو القسمة على صفر داخل دالة ضوضاء. افتح وحدة تحكم المتصفح؛ WebGL يطبع تحذيرات مفيدة حتى عند نجاح التجميع.

هل يمكن أخذ عيّنات من Texture أو رفع صورة خاصة بي؟

نعم. اضغط زر «رفع صورة» في شريط المعاينة لربط أي PNG أو JPG بـ `sampler2D u_texture`. ويتغيّر متغيّر `u_hasTexture` من نوع float إلى 1.0 فور جاهزية الصورة، فيستطيع الشيدر التفرّع بحسب توفّر النسيج، وهو النمط نفسه الذي يستخدمه Shadertoy لمدخلات القنوات.

ما إصدار WebGL المستخدَم؟

WebGL 1 مع GLSL ES 1.0. هذا يعني استخدام `varying` بدل `in/out`، و`gl_FragColor` بدل مخرج مسمّى، ولا يوجد دعم لنماذج صحيحة العدد. شيدرات WebGL 2 أو OpenGL 3+ تحتاج تعديلات بسيطة في القواعد كي تعمل هنا.

هل تُرسَل أيّة بيانات إلى خادم؟

لا. التجميع والعرض يجريان على بطاقة GPU عبر المتصفّح. شيفرة الشيدر لا تغادر الصفحة، وإن أُغلِق التبويب دون نسخها فقد الشيفرة تماماً.

ملعب تظليل WebGL

اكتب وعاين تظليلات GLSL في الوقت الفعلي

تلقائيالسرعة1.0x0 إطار/ث

إعداد مسبق

precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  vec2 m = u_mouse / u_resolution;

  // Animated gradient with mouse interaction
  float d = distance(uv, m);
  float wave = sin(uv.x * 10.0 + u_time * 2.0) * 0.5 + 0.5;
  float pulse = smoothstep(0.4, 0.0, d);

  vec3 col1 = vec3(1.0, 0.45, 0.2);  // orange
  vec3 col2 = vec3(0.85, 0.3, 0.5);  // rose
  vec3 col3 = vec3(0.2, 0.1, 0.05);  // dark

  vec3 color = mix(col3, col1, wave * uv.y);
  color = mix(color, col2, pulse * 0.8);
  color += 0.05 * sin(u_time + uv.xyx * 20.0);

  gl_FragColor = vec4(color, 1.0);
}

المتغيرات الموحدة

float u_time

vec2 u_resolution

vec2 u_mouse

int u_frame

sampler2D u_texture

float u_hasTexture

sampler2D u_noise

ارفع صورة لربطها بـ u_texture. تكون قيمة u_hasTexture مساوية لـ 1.0 عند تحميل صورة وإلا 0.0.

u_noise نسيج ضوضاء جاهز قابل للتبليط بحجم 256×256 — خذ منه عيّنات للحصول على أنماط عضوية دون كتابة دوال hash. أمّا u_frame فيَعُدّ عدد الإطارات المعروضة منذ آخر تجميع.

ما هو ملعب تظليل WebGL؟

اكتب شادرات GLSL للرؤوس والأجزاء وشاهد النتيجة المعروضة فوراً عبر WebGL. لا حاجة لأي إعداد محلي. استخدمه لتعلم برمجة الشادرات أو نمذجة التأثيرات أو تجربة الرسومات المعتمدة على GPU.

تتضمّن قيم uniform الجاهزة `u_time` للأنيميشن و`u_resolution` لمقاس اللوحة و`u_mouse` لموقع المؤشّر و`u_frame` لعدد الإطارات المعروضة، إضافةً إلى نسيج ضوضاء جاهز قابل للتبليط `sampler2D u_noise`. ارفع أي صورة لتُربط بـ `sampler2D u_texture` فيستطيع الـ fragment shader أخذ عيّنات منها مباشرة. تتوفّر عشرة قوالب جاهزة (موجة تدرّج، بلازما، دائرة SDF، نفق ضوضائي، ماندلبروت، كرة ray march، كرات معدنية، فورونوي، حقل نجوم، خلايا وورلي)، إلى جانب شريط تمرير للتحكّم بسرعة الأنيميشن، وعدّاد إطارات لحظي، ومفتاح للتجميع التلقائي، وزرّ إيقاف يجمّد الزمن، ورابط مشاركة يحتوي شفرة المصدر كاملة، ومخرج PNG للقطة الحالية.

كيفية الاستخدام

اكتب كود شادر الأجزاء GLSL أو الصقه في المحرر. شادر افتراضي محمّل مسبقاً.
المعاينة المباشرة تتحدث أثناء الكتابة. تشمل المتغيرات المدمجة الوقت والدقة وموضع الماوس.
صدّر شادرك كلقطة شاشة PNG أو انسخ الكود لاستخدامه في مشاريع WebGL الخاصة بك.

متى تستخدم

تعلّم لغة GLSL دون تثبيت مشروع C++ أو Three.js محلياً.
تجربة تأثير على Fragment Shader قبل نقله إلى محرّك ألعاب أو إلى موقع.
إنشاء لقطات لخلفيات متحرّكة من أجل ملفّات الأعمال أو الشرائح أو منشورات التواصل.

النتيجة

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

الأسئلة الشائعة

هل يجب أن أعرف لغة C أو برمجة الرسوميات لاستخدامها؟: GLSL لغة صغيرة بأسلوب يشبه C: حلقات وشروط وحسابات أرقام عشرية. مَن جرّب C أو Java أو JavaScript سيألفها بسرعة. القوالب الجاهزة مُعلَّقة بالشروحات، فيكفي تعديل القيم للبدء دون خبرة سابقة في برمجة GPU.
تم تجميع الشيدر بنجاح لكن المعاينة سوداء، ما السبب؟: الأسباب الشائعة: الكتابة في `gl_FragColor` خارج دالة main، أو إرجاع `vec3` بدل `vec4`، أو القسمة على صفر داخل دالة ضوضاء. افتح وحدة تحكم المتصفح؛ WebGL يطبع تحذيرات مفيدة حتى عند نجاح التجميع.
هل يمكن أخذ عيّنات من Texture أو رفع صورة خاصة بي؟: نعم. اضغط زر «رفع صورة» في شريط المعاينة لربط أي PNG أو JPG بـ `sampler2D u_texture`. ويتغيّر متغيّر `u_hasTexture` من نوع float إلى 1.0 فور جاهزية الصورة، فيستطيع الشيدر التفرّع بحسب توفّر النسيج، وهو النمط نفسه الذي يستخدمه Shadertoy لمدخلات القنوات.
ما إصدار WebGL المستخدَم؟: WebGL 1 مع GLSL ES 1.0. هذا يعني استخدام `varying` بدل `in/out`، و`gl_FragColor` بدل مخرج مسمّى، ولا يوجد دعم لنماذج صحيحة العدد. شيدرات WebGL 2 أو OpenGL 3+ تحتاج تعديلات بسيطة في القواعد كي تعمل هنا.
هل تُرسَل أيّة بيانات إلى خادم؟: لا. التجميع والعرض يجريان على بطاقة GPU عبر المتصفّح. شيفرة الشيدر لا تغادر الصفحة، وإن أُغلِق التبويب دون نسخها فقد الشيفرة تماماً.

ملعب تظليل WebGL

ما هو ملعب تظليل WebGL؟

كيفية الاستخدام

متى تستخدم

النتيجة

الأسئلة الشائعة

أدوات ذات صلة

نموذج ثلاثي الأبعاد للعلبة/التغليف

مخطط انتشار ثلاثي الأبعاد

عارض التضاريس ثلاثي الأبعاد

عرض المنتجات ثلاثي الأبعاد

منشئ النصوص ثلاثية الأبعاد

عارض صور 360 درجة

ملعب تظليل WebGL