دورة في برمجة الhlsl لعمل Shaders لألعاب الdirectx

علشان نفهم إيه الاختلافات و المميزات اللي الShading بيوفرهلنا في برمجة الألعاب نبص على الأمثلة دي من غير الShaders عاملة ازاي و بالShaders بقت شكلها إيه ...

و كل الأمثلة دي ملحقة بالبرنامج

و ده لو عايزين تتفرجوا عليها متحركة ...

نبص على هيكل العربية التعبانة ده من غير Shaders

...

شوفوا بقى الShader عمل فيها إيه

و بصوا كمان حتة الحديدة المدورة دي

بقدرة قادر بشوية Shader بقت قطعة أثري

نفهم من كده إنى الshaders بتتحكم في كل حاجة في المنظر اللي قدامك

يعني الإضاءة و الظلال و الtextures و كل حاجة

و ميزة الshaders إنها أسرع من الكود العادي اللي في محرك اللعبة

و ده لأنها بتتطبق في الGPU مش في الCPU و

طبعا بتخفف عن الCPU حاجات كتير علشان يحتاس هو بقى في المصايب اللي في كود اللعبة :D

و انتظروا أول درس بإذن الله

قبل ما نبدأ الدروس لازم نفهم الShader ده ماشي ازاي

فيه حاجتين رئيسيتين بيكونوا الShader ده

حاجة اسمها Vertex Shader و التانية اسمها Pixel Shader

و لا يخلوا منهما أي Shader

Vertex Shader

زي function كده لها برده Input و Output ..

الInputs بتاعتها هي المعلومات بتاعت الموديل الثلاثي الأبعاد اللي عندنا

يعني اللون و الخامة و و ....

أما الOutputs بتاعتها هي إنت اللي بتحددها

يعني حتطلع منها متغير أو لون أو أي حاجة تحبها حسب مانتا عايز

و الVertex Shader هي الوحيدة اللي بتتيحلك تشتغل و تعمل المعادلات اللي في الثلاث أبعاد ..

Pixel Shader

و هي برده function لها Input و Output ...

الInputs بتاعتها هي الOutput بتاعت الVertex Shader

و الOutputs بتاعتها هي اللون فقط

و الPixel Shader يتيحلك تحسب و تعمل معدلات في ال2D بتوع الشاشة ..

يعني بيتطبق المعادلات اللي بتحطها تلقائيا على كل Pixel من الشاشة بتاعت

كعلشان كده قلنا الOutPut بتاعه لازم يكون لون

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

و كمان بيخرج من الPixel Shader ذاكرة العمق Z-Buffer

و ديه اللي بتخليك تخلي الحاجات القريبة من عينك تغطي على الحاجات البعيدة عنها ...

و ديه بتتعمل تلقائيا و مالناش دعوة بيها ..

و الرسمة البسيطة اللي أنا عاملها ديه خلوها في دماغكم طول ما احنا شغالين علشان مانتلخبطش ..

استوعبتم خلاص ؟؟إليكم الرسمة المكلكعة للإطلاع فقط

;)

نبدأ بمقدمة كده علشان نعرف نستخدم البرنامج كويس

علشان نعرف بعد كده نركز على البرمجة ..

حنفتح البرنامج و حنلاقي على الشمال نافذة اسمها Workspace

و ديه بمثابة كده الSolution Explorer في الVisual Studios .net

يعني بتتحط فيها كل الملفات و الأكواد اللي تبع الProject بتاعنا

و كل مرة حانعمل كما بالصورة علشان نعمل مؤثر جديد في البرنامج بتاعنا ..

و حيطلعلنا زي كرة حمراء كده في نافذة عرض للDirectX جديدة ..

و حنلاقي في الWorkspace حاجات غريبة طلعت كد

هنعمل للعقد كلها Expand

كما بالصورة علشان نفهم إيه كل حاجة ...

طيب لو عيزين نغير كود أو أي حاجة نعمل بس Double Click عليها في الWorkspace و حانعرف نعلدلها

نيجي نغير الموديل بتاعنا من الكورة اللي مالهاش ملامح ديه إلى فيل بزلومة مثلا ..

يبقى Double Click على كلمة Model اللي في الEffect (مش الReference بتاعها اللي في الPass)

و نختار الموديل اللي اسمه ElephantBody.3ds من المجلد

Program Files\ATI Research Inc\RenderMonkey 1.62\Examples\Media\Models

و طبعا بإننا نعمل Drag للماوس بنعرف كويس نحرك الموديل و نلففه و نزوم عليه بالبكرة ...

و عندنا شوية أدوات تحكم في أعلى البرنامج كما بالصورة

و بكده نكون أخدنا فكرة عن استخدام البرنامج و مش فاضلنا غير الكود بقى نحتاس فيه

;)

ماشي يا سيد ثبته و ليك تثبيتة عندي هناك

;)

و أنا قررت أكمل الموضوع ده هنا بسبب قلة التفاعل اللي زهقني زي مانتا شايف

:s

و يارب ألاقي في المنتدى ده التفاعل المطلوب

أوكي أنا حاحاول أبسط شرح الأكواد على قد ما أقدر

يعني لو أي واحد بيعرف ألف به برمجة بإذن الله حايعرف يشتغل

شكرا على مشاركتك في الموضوع

و بالنسبة للغة العربية أنا معاك إنها يجب المحافظة عليها سليمة بدون إدخال العامية فيها

لكن بصراحة يعني قواعد المنتدى ده غريبة أوي

لأنه الموضوع ده أنا مش باحطه هنا و بس

و أسلوبي العامي في الشرح ده بيعجب ناس كتير تانية و بالعكس أنا شهرة موضوعاتي السابقة راجعة إليه

و بما إنكم هنا بتفضلوا العربية فأنا حاحاول أعدل النسخة العامية إلى عربية سليمة على قدر ما أقدر في المشاركات القادمة

و نخلي العامية في المنتديات التانية و هنا العربية بإذن الله

لكن لا تؤاخذني إن سهيت عن بعض الألفاظ

المهم بس تعم الفائدة العرب جميعا

و ألاقي تفاعل من أعضاء المنتدى الكرام

و السلام عليكم

بسم الله الرحمن الرحيم

شكرا جدا لكل من رد على الموضوع

و أرجو أن تستمروا فعلا معي فيه

نبدأ الدرس الأول برمجيا .. و هو سيوضحلنا الكثير و الكثير من لغة الHLSL

نفتح الSample الذي يسمى Plastic.rfx و الموجود في المسار

Program Files\ATI Research Inc\RenderMonkey 1.62\Examples\Dx9

و هذا المثال هو أبسط الأمثلة لكي نتعرف على شكل اللغة ..

فتحنا الملف .. وجدنا شكل فيل ..

ماذا فعل الHLSL في الفيل ؟؟

لكي نعرف الفارق نفتح الRenderMonkey مرة أخرى .. (اترك برده الأول مفتوح)

و Right Click على Effect Workspace و Add default effect ->> DirectX ->> Position

و Double Click على الموديل في الWorkspace

و نختار الموديل ElephantBody.3ds في المسار

Program Files\ATI Research Inc\RenderMonkey 1.62\Examples\Media\Models\

و الآن أكيد فهمنا الهدف من الدرس الأول ..

نقوم الأن بفتح من الWorkSpace الVertexShader

طبعا في Plastic.rfx

(حنلاقيه تحت Single Pass)

سنجد هذا الكود ..

float4x4 view_proj_matrix: register(c0);

قبلما نتعرف على الكود يجب أن نتذكر ما هي وظيفة الVertex Shader

كما قلنا الفارق بين الVertex Sahder و الPixel Shader

أن الVertex Shader يتطبق على كل نقطة ثلاثية الأبعاد موجودة ..

أما الPixel Shader يتطبق على كل Pixel من الشاشة ..

أي لو الشاشة 1024x768 مثلا يبقى الPixel Shader ستكرره الفيجا 786432 مرة في الRender الواحدة ..

الأن عندنا في أول الكود متغيرين اسمهما view_proj_matrix و view_position

و الأول منهما float4x4 أي مصفوفة فيها 4 rows و 4 cols

و الثاني Vector رباعي

كما قلنا في البداية أن الCPU يحسب الAPI بتاعت اللعبة .. و الGPU أي الفيجا تحسب الHLSL ..

المتغيرين السابقين يتم إرسالهم من الCPU إلى الفيجا .. و بالطبع أي متغيرات مفروضة بخارج الدوال مثلهم ..

و الview_position هي vector الرؤية ..

أي الposition بتعت عينك (الكاميرا)

و مصفوفة الview_proj_matrix تتكون من حاصل ضرب مصفوفة الView في مصفوفة الProjection ...

و نأتي بهذه المصفوفات من كود الDirectX في اللعبة عند ضبط الكاميرا و اللي شغال دايركت إكس بالتأكيد يعرف دول إيه ..

برنامج الRenderMonkey برنامج إبن حلال و طيب و سهل لنا تلك المأمورية (لتجربة الShader فقط قبل استخدامه في اللعبة)

سنجد تحت الEffect Workspace متغيرين بنفس الإسم

و كما نرى أن بجوار كل متغير شكل يعبر عنه كما في المصفوفة 4x4

و كذلك سنجد رمز الP الخضراء و هي تعني Predefined

أي الكاميرا اللي في برنامج الRenderMonkey سهلت علينا العملية و أرسلت لنا تلك المتغيرات مبدئيا حسب الرؤية في البرنامج

و ذلك كي تسهل علينا التصميم

و بالطبع لا نستطيع تغييرهما

نأتي على صورة الفيل مرة أخرى .. و نغير من وضع الكاميرا بالدوران أو الزوم ..

و نمر بالماوس على أي من المصفوفتين في الEffect Workspace

و نغير من وضع الكاميرا مرة أخرى و نمر على المصفوفة مرة أخرى

سنجدها تغيرت تلقائيا بسبب تحريك الكاميرا ..

هل نستطيع إضافة متغيرات غير Predefined ؟؟

نعم و سنرى لاحقا بإذن الله

الجزء القادم في الكود و هو

struct VS_OUTPUT {

و هو تم فيه فرض Structure كما في أي لغة برمجة

و اسمها VS_OUTPUT

و هي باين من إسمها إنها المخرجات التي يخرجها الVertexShader إلى الPixel Shader

و هم طبعا إختياريين تمااااااااما

على حسب هدفنا من الShader نضعهم ..

أما الPos فهي مكان الPixel على الشاشة التي توافق الVertex في ال3D world

و طبعا الإحداثيات في ال3D كانت X و Y و Z أما في الPixel Shader لازم نوصلهم X و Y فقط من أجل رسهمه على الشاشة

السؤال الوجيه هنا لماذا فرضنا Pos على إنه float4 ؟؟؟؟؟؟؟

مع أنه ممكن نفرضه float2 لأنه يتم تخزين X و Y فقط فيه ؟؟

سأقول لك من أجل إتمام عملية الضرب في المصفوفة و الصبر و سنفهم بإذن الله ..

بجوار Pos يوجد نقطتين و بعدهما POSITION

و هذه يسمونها Semantic و هي تعبر عن كيفيه استخدام المتغير اللذي يسمى Pos ده

و الSemantic ده يختلف عن الSemantics اللي وراه

نجد TEXCOORD0 و TEXCOORD1 مرقمين ..

و ذلك لأن يوجد أكثر من TEXCOORD فيجب التمييز بينهم ..

طيب إيه الTEXCOORD ديه ؟؟

هي إحداثيات الTextures و نستخدمها فقط لإرسال المتغيرات .. من غير ما تكون texture

طبعا الnormal سنرسل به العمودي على كل نقطة إلى الpixel shader

طبعا مبرمجي الدايكرت إكس فهمين الكلام ده

لكن سأشرحه مرة أخرى لأن الnormal مهمة و لا غنى عنها

الnormal هي العمودي على السطح الذي تتواجد به النقطة التي يتم حساب الضوء عندها

لأن انعكاس الضوء كما بالصورة يجب معرفة العمودي على السطح لكي يتم حسابه ..

و آخر متغير هو viewVec و هو الvector من النقة إلى العين و سنتحدث عنه لاحقا بإذن الله

الجزء القادم من الكود:

VS_OUTPUT main(float4 Pos: POSITION, float3 normal: NORMAL)

و هو دالة الVertex Shader أخيرا وصلنلها

و سميناها main و مع ملاحظة تطابق الاسم كما بالصورة بأعلى الكود

حتى يتعرف الShader على أن الmain هي المدخل اللي سيقوم بعمل compile له

و ديه قائمة بالSemantics الخاصين بالVertex Shader Input فقط .. (فيه Semantics كثيرة أخرى لكن لا يمكن إدخالها في الVS )

و هنا ليس هناك حاجة إلا للPOSITION و الNORMAL

من أين نحصل على هذين المتغيرين ؟؟

تلقائيا !!

نفترض أن الShader يحسب نقطة معينة ..

فستكون الPOSITION هي إحداثيات النقطة X و Y و Z و الNORMAL هي الVector العمودي عليها و برده يتكون من X و Y و Z

مع ملاحظة أن الPOSITION هي float4

و يتم وضع قيمة 1 في رابع إحداث .. و ذلك لإتمام الحسابات مع المصفوفات كما سنرى لاحقا

الجزء التالي من الكود

  VS_OUTPUT Out;

و في البداية فرضنا متغير يسمى Out و نوعه هو الStructure اللي اتكلمنا عليها

و هي مخرجات الVertex Shader إلى الPixel Shader

ثم حددنا أن الPos (اللي مفروضة في الstructure على أنها Position )

و هي حاصل ضرب الPosition بتعات النقطة في ال3d و مصفوفة الview_proj_matrix ..

و بكده نحصل على الPosition في ال2D لكي نرسلها إلى الPixel Shader

و نلاحظ أن من قوانين ضرب المصفوفات أن عدد الrows في الأول يجب أن يساوي عدد الcols في الثاني ..

و لذلك فرضنا الPOSITION على شكل float4 و ليس float3

و نلاحظ كلمة mul و هي تعني الضرب و هناك دوال كثيرة أخرى سنتطرق إليها في الدروس القادمة بإذن الله

ثانيا الnormal سنرسلها كما هي إلى الPixel Shader كما نرى في الكود

و الviewVec هي الvector من النقطة إلى العين

أي تساوي view_position مطروحا منها Pos

و طبعا ده من أساسيات الرياضيات ..

و في الآخر عملنا return للout لكي ندخل في الPixel Shader ..

يتبع بإذن الله

شكرا لكل اللي ردوا على الموضوع و متابعينه

و اعذروني أنا مشغول قليلا هذه الأيام

و بإذن الله سأكمل الدروس في خلال أسبوع ربنا يسهل