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: Spaces and Culling
Let's Build a 3D Graphics Engine: Rasterizing Triangles and Quads

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

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

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


خلاصة

فيما يلي مراجعة للصفوف التي قمنا بها حتى الآن:

يمكنك الاطلاع على نموذج البرنامج من الجزء الثالث من السلسلة لمعرفة كيفية عملهم معًا.

الآن ، دعونا نلقي نظرة على بعض الأشياء الجديدة!


التنقيط

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

نظرًا لأن الرياضيات ليست دائمًا بالدقة التي نحتاجها لاستخدامها في رسومات الكمبيوتر ، يجب أن نستخدم الخوارزميات لتلائم الأشكال التي تصفها على الشاشة الصحيحة. على سبيل المثال ، يمكن أن تقع نقطة على التنسيق \\ ((3.2 ، 4.6) \\) في الرياضيات ، ولكن عندما نعرضها ، يجب علينا دفعها إلى \\ ((3 ، 5) \\) حتى يمكن وضعها في هيكل بكسل لشاشتنا.

سيكون لكل نوع من الأشكال التي نقوم بتنقيطها خوارزمية خاصة بها للقيام بذلك. لنبدأ بأحد الأشكال الأكثر بساطة للتنقيط: مقطع الخط.


سطر القطعة

Source: http://en.wikipedia.org/wiki/File:Bresenham.svg
المصدر: http://en.wikipedia.org/wiki/File:Bresenham.svg

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

خطوة بخطوة ، تعمل خوارزمية Bresenham على النحو التالي:

  1. استلم نقطة البداية ونقطة النهاية لقطعة الخط كمدخل.
  2. تحديد الاتجاه مقطع خط بتحديد خصائصه \(dx\) و \(dy\) (\ (dx = x_ {1}-x_ {0} \)، \ (dy = y_ {1}-y_ {0} \)).
  3. تحديد sx ،sy, و ، سنلقي نظرة على بعض من أفضل تقويم وجدولة التطبيقات المتاحة عبر الإنترنت.
  4. تقريب كل نقطة في جزء السطر إلى البكسل الموجود أعلاه أو أسفله.

قبل أن ننفذ خوارزمية Bresenham ، دعنا نجمع فئة من الشرائح الأساسية لاستخدامها في محركنا:

إذا كنت تريد إجراء تحويل على صف LineSegment الجديد ، فكل ما عليك فعله هو تطبيق التحويل الذي اخترته على نقاط البداية والنهاية لـ LineSegment ثم وضعها مرة أخرى في الفصل. ستتم معالجة جميع النقاط التي تقع بين النقاط عندما يتم رسم LineSegment نفسه ، حيث تتطلب خوارزمية Bresenham نقطة البداية والنهاية فقط للعثور على كل نقطة لاحقة.

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

تبدو الدالة returnPointsInSegment() تشبه إلى حد ما هذا (في JavaScript):

تتمثل أسهل طريقة لإضافة شرائح الخط في فئة الكاميرا في إضافة بنية بسيطة if كانت مشابهة لما يلي:

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


الدوائر

Source: http://en.wikipedia.org/wiki/File:Bresenham_circle.svg
المصدر: http://en.wikipedia.org/wiki/File:Bresenham_circle.svg

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

تعمل الخوارزمية الجديدة لدينا على النحو التالي:

  1. استلم نقطة مركزية ونصف دائرة.
  2. اضبط النقاط في كل اتجاه أساسي
  3. دورة من خلال كل من الأرباع ، رسم الأقواس الخاصة بهم

سيكون فصل الدائرة لدينا مشابهًا جدًا لفئة شرائح الخط ، ويبحث عن شيء من هذا القبيل:

تعمل وظيفة returnPointsInCircle() الخاصة بنا بالطريقة نفسها التي تعمل بها وظيفة صف LineSegment ، حيث تقوم بإرجاع مجموعة من النقاط حتى تتمكن الكاميرا من تقديمها وإعدامها حسب الحاجة. يتيح ذلك لمحركنا التعامل مع مجموعة متنوعة من الأشكال ، مع وجود تغييرات طفيفة فقط مطلوبة لكل منها.

هذا ما ستبدو عليه وظيفة returnPointsInCircle() الخاصة بنا (في JavaScript):

الآن ،  نقوم فقط بإضافة عبارة if أخرى إلى حلقة الرسم الرئيسية الخاصة بنا ، وهذه الدوائر متكاملة تمامًا!

إليك كيفية ظهور حلقة الرسم المحدثة:

الآن بعد أن أصبح لدينا صفوف جديدة بعيدة عن الطريق ، دعونا نجعل شيء ما!


ماستر النقطية

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

دعونا نلقي نظرة على الكود:

مع أي حظ ، يجب أن تكون الآن قادرًا على استخدام محرك محدّث لجذب بعض الدوائر الرائعة.


استنتاج

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

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

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.