TheGhostFish

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

21 ردود في هذا الموضوع

bismql3.jpg

الموضوع ده هو جديد من نوعه هنا

و هو عن عمل مؤثرات ثابتة و متحركة على الموديلات الثلاثية الأبعاد ..

و كذلك على الscene ككل

و ده عن طريق لغة مشتقة من الC

و بيسموها C-Like

و لكن لو انت بتفهم C# أو جافا .. حتعرف تكمل كويس

و اسم اللغة دي هو HLSL

يعني High Level Shading Language

أي لغة الShading العالية المستوى ...

و طبعا هي خاصة بالدايركت إكس

و فيه زيها للأوبن جي إل بس مش موضوعنا

و فيه برامج كتير بتعمل الموضوع ده

منها البرنامج الشهير FX Composer اللي عملاه شركة nvidia المشهورة

و احنا حانشتغل في الموضوع ده بإذن الله ببرنامج تاني بسيط و سهل الاستخدام اسمه RenderMonkey

و هو تبع شركة ATI و فيه إمكانيات كويسة بتسهلنا التصميم

و كذلك real time rendering و انت بتكتب الكود

و على فكرة الShaders ديه ممكن تتكتب بالNotepad لو انت متمكن منها لكن احنا حانشتغل بالبرنامج علشان مانحتاسش

و طبعا فيه إصدارات من الshaders كتير و آخرها 4

و لكن هنا مش محتاجين أكتر من فيجا تستحمل pixel و vertex shader 2.0

و لتحميل برنامج الRenderMonkey من هنا

http://ati.amd.com/developer/rendermonkey/downloads.html

و بعد الانتهاء من تصميم الشيدر بتاعنا بنعمله export على صيغة fx و يتم إدراجه في الكود اللي فيه اللعبة بتاعتنا

و ده عن طريق أكثر من طريقة و أسهلها ID3DXBaseEffect

و ده ممكن أحط فيه درس بس لما نتطور شوية في الشيدرز

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

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

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

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

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

...

car1zt1.jpg

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

car2bk7.jpg

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

3omla1dd9.jpg

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

3omla2up1.jpg

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

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

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

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

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

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

تم تعديل بواسطه HGB
تحويل الصور على سيرفر الفريق العربي لضمان &#1
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

قبل ما نبدأ الدروس لازم نفهم ال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

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

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

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

compositiondm9.jpg

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

;)

gpuqm2.jpg

تم تعديل بواسطه HGB
تحويل الصور لسيرفر الفريق العربي
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

السلام عليكم

اهلا بيك اخ TheGhostFish ويلا شد حيلك عشان اثبت الموضوع

فكرنى

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

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

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

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

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

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

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

111dc6.jpg

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

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

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

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

222mr4.png

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

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

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

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

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

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

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

333ou7.png

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

;)

تم تعديل بواسطه HGB
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
السلام عليكم

اهلا بيك اخ TheGhostFish ويلا شد حيلك عشان اثبت الموضوع

فكرنى

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

;)

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

:s

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

ان شاء الله التفاعل موجود بس بسط الأمور عشان الناس متنشنش ولما الواحد يتنشن مخه بيقف ويزهق بسرعه

0

شارك هذا الرد


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

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

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

السلام عليكم

اهلا بك اخي الكريم TheGhostFish

درس اكثر من رائع تشكر عليه

هناك ملاحظة انك تكتب بالعامية المصرية و هذا مخالف لقواعد المنتدى بالاضافة الى انني تعبت من كثرة محاولتي فهم تعابيرك العامية

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

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

مرة اخرى شكرا على الموضوع الرائع

تحياتي

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

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

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

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

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

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

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

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

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

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

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

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

تم تعديل بواسطه TheGhostFish
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

جميل جدا أخي الكريم

بالنسبة للغة فان شاء الله لن تكون مشكلة كبيرة باستثناء بعض المصطلحات العامية الخاصة

وكما قال الأخ الكون فنحن نريد أن نستفيد من هذه المواضيع دون أن تضيع من كلمة (تسقط) :lol:

الآن نستطيع أن نقول أن قسم برمجة الألعاب بدأ ينشط أليس كذلك ؟

وبالتوفيق دائما للجميع

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

درس فعلا رائع اخى GhostFish

معاك باذن الله

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

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

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

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

نبدأ الدرس الأول برمجيا .. و هو سيوضحلنا الكثير و الكثير من لغة ال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\

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

32032664ic4.png

ff161wi5.gif

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

طبعا في Plastic.rfx

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

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


float4 view_position: register(c4);

struct VS_OUTPUT {
float4 Pos: POSITION;
float3 normal: TEXCOORD0;
float3 viewVec: TEXCOORD1;
};

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

Out.Pos = mul(view_proj_matrix, Pos);

// World-space lighting
Out.normal = normal;
Out.viewVec = view_position - Pos;

return Out;
}
float4x4 view_proj_matrix: register(c0);

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

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

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

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

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

ff161wi5.gif

الأن عندنا في أول الكود متغيرين اسمهما 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 متغيرين بنفس الإسم

59131860ej8.png

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

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

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

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

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

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

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

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

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

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

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

ff161wi5.gif

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


float4 Pos: POSITION;
float3 normal: TEXCOORD0;
float3 viewVec: TEXCOORD1;
};
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 هي العمودي على السطح الذي تتواجد به النقطة التي يتم حساب الضوء عندها

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

170pxreflectionanglessvcd6.png

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

ff161wi5.gif

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

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

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

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

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

80201177io7.png

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

42778064vu1.png

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

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

تلقائيا !!

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

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

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

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

ff161wi5.gif

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



Out.Pos = mul(view_proj_matrix, Pos);

// World-space lighting
Out.normal = normal;
Out.viewVec = view_position - Pos;
  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 ..

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

متابع معك .. موضوع جديد علينا ( او علي بالتحديد :D )

تم تعديل بواسطه الشمري
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

ماشاء الله الموضوع أكثر من رائع وسوف يفيد الكثير بإذن الله

الى الأمام

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

الله يعطيك العافية الموضوع رائع .. و الـ Shader يعطي نتائج جميلة فعلاً .. سأحاول متابعة الدروس قدر الإمكان

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

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

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

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

لا توقف الله معك

موضوع كان محيرني من مدة والله بس بمناسبة إنه إتفتح ممكن تشرح لي فوائد و استحدامات مجموعة Nvidia إللي إسمها CG Tool Kit ؟

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

ممتاز , لن أقول أن الموضوع جديد علي , بل الجديد أني فهمتبعضاً مما كان يحيرني , وهذا هو مفتاح فهم التقنية , والأهم هو جهلي التام بوجود برنامج هكذا P:

أتمنى ألا تتوقف أخي الفاضل , واستمر بشرحك , نحن متابعين معك ^^ لا توجد أسئلة حتى الآن , لكن أبشر بأمطار منها كلما تقدمنا D:

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

الرجاء اكمال الدورة

او اذا فيك تعمل كتاب

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

دروسك اكيد روعة :)

بس يا غالى عندى تعليق بسيط هل من الممكن ان تجمع الصور ووضعها فى المرفقات اسهل ولكى لا تضيع مع الوقت

وكمان لانها غير ظاهرة لدى :(

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .