Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

دعونا نبني محرك رسومات ثلاثية الأبعاد: تحويلات خطية

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Let’s Build a 3D Graphics Software Engine.
Let's Build a 3D Graphics Engine: Points, Vectors, and Basic Concepts
Let's Build a 3D Graphics Engine: Spaces and Culling

Arabic (العربية/عربي) translation by Hamdan Veerlax (you can also view the original English article)

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

إذا لم تكن قد قرأت بالفعل الجزء الأول من هذه السلسلة ، أقترح عليك القيام بذلك الآن. فقط في حالة عدم التذكر ، إليك ملخص سريع لما أنشأناه في المرة السابقة:

هاتان الفئتان سيكونان أساس محرك الرسومات الخاص بنا بالكامل ، حيث يمثل الأول نقطة (موقع مادي داخل المساحة الخاصة بك) والثاني يمثل المتجه (المساحة / الحركة بين نقطتين).

لمناقشتنا حول التحولات الخطية ، يجب إجراء تغيير بسيط على فئة النقطة: بدلاً من إخراج البيانات إلى سطر وحدة تحكم كما كان من قبل ، استخدم واجهة برمجة تطبيقات الرسومات المفضلة لديك واستخدم الدالة رسم النقطة الحالية على الشاشة.


أسس التحولات الخطية

مجرد تحذير: تبدو معادلات التحول الخطي أسوأ بكثير مما هي عليه بالفعل. سيكون هناك بعض علم المثلثات المعنية ، ولكن ليس عليك أن تعرف بالفعل كيفية القيام بذلك المثلثات: سأشرح ما لديك لإعطاء كل وظيفة وماذا ستخرج ، وبالنسبة للأشياء الداخلية التي يمكنك استخدامها فقط أي آلة حاسبة أو مكتبة الرياضيات قد يكون لديك.

نصيحة: إذا كنت ترغب في الحصول على فهم أفضل للعمل الداخلي لهذه المعادلات ، فعليك مشاهدة هذا الفيديو وقراءة ملف PDF هذا.

تأخذ كل التحولات الخطية هذا الشكل:

[\(B = F(A]\

ذلك أنه إذا كان لديك تحويل خطي تعمل \(F()\)، والمدخلات الخاصة بك هو الناقل \(A\)، ثم الإخراج الخاص بك سوف تكون متجهة \(B\).

يمكن تمثيل كل من هذه القطع-موجهات اثنين والدالة-كمصفوفة: الناقل \(B\) كمصفوفة 1 × 3، الناقل \(A\) كآخر 1 × 3 مصفوفة، وتحويل خطي \(F\) كمصفوفة 3 × 3 (مصفوفة تحويل).

هذا يعني أنه عندما تقوم بتوسيع المعادلة ، يبدو كالتالي:

\[
\تبدأ {bmatrix}
\\ {b_{0
 \\{b_{1
{b_{2
{end{bmatrix\
=
{begin{bmatrix\
\\(f_{00} & f_{01} & f_{02
\\{f_{10} & f_{11} & f_{12
\\{f_{20} & f_{21} & f_{22
{end{bmatrix\
{begin{bmatrix\
\\(a_{0
\\{a_{1
{a_{2
{end{bmatrix\
\]

إذا كنت قد أخذت صف دراسي في علم المثلثات أو الجبر الخطي ، فمن المحتمل أنك بدأت تتذكر الكابوس الذي كان عبارة عن الرياضيات المصفوفة. لحسن الحظ ، هناك طريقة أبسط لكتابة هذه المعادلة لأخذ معظم المشاكل. تبدو هكذا:

\[
{begin{bmatrix\
\\{b_{0
\\{b_{1
{b_{2
{end{bmatrix\
=
{begin{bmatrix\
\\{f_{00}a_{0} + f_{01}a_{1} + f_{02}a_{2
\\{f_ {10} a_ {0} + f_ {11} a_ {1} + f_ {12} a_ {2
\\{f_{20}a_{0} + f_{21}a_{1} + f_{22}a_{2
{end{bmatrix\
\]

ومع ذلك ، يمكن تغيير هذه المعادلات من خلال الحصول على مدخلات ثانية ، كما هو الحال في حالات التدوير ، حيث يجب إعطاء كل من المتجه وكمية دورانه. دعونا نلقي نظرة على كيفية عمل التناوب.


تناوب

الدوران هو ، بحكم تعريفه ، حركة دائرية لكائن حول نقطة دوران. يمكن أن تكون نقطة الدوران لمساحتنا واحداً من ثلاثة احتمالات: إما طائرة XY ، أو طائرة XZ ، أو الطائرة YZ (حيث تتكون كل طائرة من اثنين من ناقلاتنا الأساسية التي ناقشناها في الجزء الأول من السلسلة ).

692px-Rotation_illustration2svg

لدينا ثلاث نقاط من التناوب يعني أن لدينا ثلاث مصفوفات دوران منفصلة ، على النحو التالي:

مصفوفة دوران XY:
\[
{begin{bmatrix\
\\cos \theta & -sin \theta & 0
\\sin \theta & cos \theta & 0
0 & 0 & 1\\
{end{bmatrix\
\]

XZ rotation matrix:

\[
{begin{bmatrix\
cos \theta & 0 & sin \theta\\
0 & 1 & 0\\
-sin \theta & 0 & cos \theta
\\ نهاية {} bmatrix
\]

مصفوفة دوران YZ:

\[
تبدأ {bmatrix}
1 & 0 & 0\\
0 & cos \theta & -sin \theta\\
0 & sin \theta & cos \theta
\\ نهاية {} bmatrix
\]

لذا لتدوير نقطة (A ) حول مستوى XY بمقدار 90 درجة ( ( pi / 2 ) راديان - معظم مكتبات الرياضيات لها وظيفة لتحويل الدرجات إلى راديان) ، عليك اتباع هذه الخطوات:

\[
\\ تبدأ {} الانحياز
تبدأ {bmatrix}
//{b_{0
{b_{1\\
{b_{2
\\ نهاية {} bmatrix
& =
تبدأ {bmatrix}
cos \frac{\pi}{2} & -sin \frac{\pi}{2} & 0\\
sin \frac{\pi}{2} & cos \frac{\pi}{2} & 0\\
0 & 0 & 1
نهاية {} bmatrix
\\ تبدأ {bmatrix}
a_{0}\\
{a_{ 1\\
{a_{2
نهاية {bmatrix}
& =
\\ تبدأ {bmatrix}
cos \frac{\pi}{2}a_{0} + -sin \frac{\pi}{2}a_{1} + 0a_{2}\\
sin \frac{\pi}{2}a_{0} + cos \frac{\pi}{2}a_{1} + 0a_{2}\\
0a_{0} + 0a_{1} + 1a_{2}
\\ نهاية {bmatrix} \\\\
& =
\\ تبدأ {bmatrix}
{0a_{0} + -1a_{1} + 0a_{2\\
{1a_{0} + 0a_{1} + 0a_{2\\
{0a_{0} + 0a_{1} + 1a_{2
\\ نهاية {bmatrix} \\\\
& =
\\ تبدأ {bmatrix}
{-a_{1\\
{a_{0\\
{a_{2
\\ نهاية {} bmatrix
\\ نهاية {} الانحياز
\]

حتى إذا كانت النقطة الأولية \\ (A \\) هي \\ ((3،4،5) \\) ، فإن نقطة الإخراج الخاصة بك \\ (B \\) ستكون \\ ((- 4،3،5) \\).

تمرين: وظائف التناوب

كتمرين ، حاول إنشاء ثلاث وظائف جديدة للفئة Vector. ينبغي للمرء أن تدور ناقلات حول الطائرة XY ، واحدة حول الطائرة YZ ، واحدة حول الطائرة XZ. يجب أن تحصل وظائفك على المقدار المطلوب من الدرجات للتدوير كمدخل ، وتقوم بإرجاع متجه كمخرج.

يجب أن يكون التدفق الأساسي لوظائفك كما يلي:

  1. خلق ناقل الإخراج.
  2. تحويل درجة المدخلات في شكل راديان.
  3. حل لكل جزء من مجموعة نواقل الإخراج باستخدام المعادلات الموضحة أعلاه.
  4. إرجاع ناقل الإخراج.

تدريج

التحجيم عبارة عن تحويل يقوم إما بتكبير أو تصغير كائن يعتمد على مقياس معين.

تنفيذ هذا التحويل بسيط إلى حد ما (على الأقل مقارنة بالتناوب). يتطلب تحجيم التحجيم مدخلين: مدخلاً للدخل ومجموعة قياس 3 ، والتي تحدد كيفية قياس متجه الإدخال في كل محور من محاور المساحة.

على سبيل المثال ، في tuple \\ (s_ {0} ، s_ {1} ، s_ {2}) \\) ، \\ (s_ {0} \\) يمثل المقياس على طول المحور X ، \\ (s_ {1} \\) على طول المحور Y و \\ (s_ {2} \\) على طول المحور Z.

مصفوفة التحجيم هي كما يلي (حيث (s_ {0} ) و (s_ {1} ) و (s_ {2} ) هي عناصر المقياس 3-tuple):

\[
\\ تبدأ {bmatrix}
s0 & 0 & 0\\
0 & s1 & 0\\
0 & 0 & s2
\\ نهاية {} bmatrix
\]

من أجل جعل المتجه المدخل A \\ ((a_ {0} ، a_ {1} ، a_ {2}) \\) ضعف الحجم على طول المحور X (أي ، باستخدام مقياس 3-tuple \\ (S = ( 2 ، 1 ، 1) \\)) ، سوف تبدو الرياضيات مثل هذا:

\[
تبدأ {} الانحياز
تبدأ {bmatrix}
{b_{0\\
{b_{1\\
{b_{2
\\ نهاية {} bmatrix
& =
تبدأ {bmatrix}
s0 & 0 & 0\\
0 & s1 & 0\\
0 & 0 & s2
\\ نهاية {} bmatrix
\\ تبدأ {bmatrix}
{a_{0\\
{a_{1\\
{a_{2
\\ نهاية {bmatrix} \\\\
& =
\\ تبدأ {bmatrix}
2 & 0 & 0\\
0 & 1 & 0\\
0 & 0 & 1
نهاية {} bmatrix
\\ تبدأ {bmatrix}
{A_ {0 \\\\
{a_{1\\
{a_{2
\\ نهاية {bmatrix} \\\\
& =
\\ تبدأ {bmatrix}
{2a_{0} + 0a_{1} + 0a_{2\\
0a_{0} + 1a_{1} + 0a_{2}\\
0a_{0} + 0a_{1} + 1a_{2}
\\ نهاية {bmatrix} \\\\
& =
\\ تبدأ {bmatrix}
2a_{0}\\
a_{1}\\
a_{2}
\\ نهاية {} bmatrix
\\ نهاية {} الانحياز
\]

لذلك إذا تم إعطاء متجه الإدخال \\ (A = (3،4،0) \\) ، فسيكون الناتج الخاص بك vector \\ (B \\) \\ ((6،4،0) \\).

scaling

التمرين: وظائف القياس

كممارسة أخرى ، قم بإضافة وظيفة جديدة إلى فئة المتجه الخاصة بك لقياسها. يجب أن تأخذ هذه الوظيفة الجديدة في 3-tuple التحجيم وإرجاع ناقل الإخراج.

يجب أن يكون التدفق الأساسي لوظائفك كما يلي:

  1. خلق ناقل الإخراج.
  2. حل لكل جزء من مجموعة متجهات الإخراج باستخدام المعادلة الموضحة أعلاه (والتي يمكن تبسيطها إلى y0 = x0 * s0؛ y1 = x1 * s1؛ y2 = x2 * s2).
  3. إرجاع ناقل الإخراج.

دعونا نبني شيئا!

الآن بعد أن أصبحت لديك تحويلات خطية تحت الحزام ، دعنا نبني برنامجًا صغيرًا سريعًا لاكتشاف مهاراتك الجديدة. سنقوم بعمل برنامج يرسم مجموعة من النقاط على الشاشة ، ثم يسمح لنا بتعديلها ككل من خلال إجراء تحويلات خطية عليها.

قبل البدء ، سنحتاج أيضًا إلى إضافة وظيفة أخرى إلى فئة النقطة. سيسمى هذا setPointToPoint () ، وسيقوم ببساطة بتعيين موضع النقطة الحالية إلى النقطة التي يتم تمريرها إليه. سيحصل على نقطة كمدخل ، وسوف يعيد شيئا.

فيما يلي بعض المواصفات السريعة لبرنامجنا:

  • سيحتوي البرنامج على 100 نقطة في صفيف.
  • عند الضغط على المفتاح D ، سيقوم البرنامج بمسح الشاشة الحالية وإعادة رسم النقاط.
  • عندما يتم الضغط على المفتاح A ، سيقوم البرنامج بقياس جميع مواقع النقاط بمقدار 0.5.
  • عندما يتم الضغط على المفتاح S ، سيقوم البرنامج بقياس جميع مواقع النقاط بمقدار 2.0.
  • عند الضغط على مفتاح R ، سيقوم البرنامج بتدوير كل موقع النقاط بمقدار 15 درجة على مستوى XY.
  • عند الضغط على مفتاح Escape ، سيقوم البرنامج بالخروج (إلا إذا كنت تستخدمه مع JavaScript أو لغة أخرى موجهة للويب).

فصولنا الحالية:

مع هذه المواصفات ، دعونا ننظر إلى ما يمكن أن تكون عليه الكود:

الآن يجب أن يكون لديك برنامج رائع ، صغير لإظهار جميع تقنياتك الجديدة! يمكنك التحقق من بلدي التجريبي بسيط هنا.


استنتاج

في حين أننا بالتأكيد لم نغطي كل تحول خطي ممكن ، فإن محركنا الصغير بدأ في التبلور.

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

في الجزء التالي من هذه السلسلة ، سنغطي مساحات عرض مختلفة وكيفية إعدام كائنات خارج نطاق رؤيتنا.

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

3D Design Modeling services
خدمات التصميم والنمذجة ثلاثية الأبعاد في Envato Studio
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.