تبسيط الرسومات ثلاثية الأبعاد: بناء محرك تصيير ثلاثي الأبعاد من الصفر في لوحة ثنائية الأبعاد

إحداثيات الجهاز الموحدة (NDC)

نظام NDC هو نظام إحداثيات قياسي في الرسومات ثلاثية الأبعاد يُستخدم لتعيين تلك الإحداثيات الثلاثية الأبعاد إلى مساحة شاشة ثنائية الأبعاد. إنه مكعب رياضي حيث تقع (0, 0, 0) في مركزه تماماً، وتتراوح جميع محاوره بدقة من -1 إلى 1. يتم استبعاد أي شيء خارج هذا النطاق (يتجاهله المحرك ولا يتم رسمه).

نحصل على قيم NDC الخاصة بنا بعد الإسقاط الرياضي لكائناتنا ثلاثية الأبعاد من خلال كاميرتنا الافتراضية.

تعيين مساحة NDC الجديدة هذه إلى مساحة الشاشة ثنائية الأبعاد النهائية أمر بسيط للغاية. نضرب ببساطة كل نقطة في نصف حجم اللوحة (Canvas) ونضيف نفس المقدار مرة أخرى لإزاحة المركز. لا تنسَ عكس المحور الصادي (y-axis) للانتقال من الأعلى إلى الأسفل!

$x_{screen} = (x_{ndc} + 1) \times \left(\frac{width}{2}\right)$

$y_{screen} = (1 - y_{ndc}) \times \left(\frac{height}{2}\right)$

دعونا نختبر ذلك:

• إذا كانت x هي -1 تماماً، فإن (x + 1) تساوي 0 * w/2، وهي 0 (الحافة اليسرى).
• إذا كانت x هي 0، فإن (x + 1) تساوي 1 * w/2، وهو منتصف اللوحة.
• إذا كانت x هي 1، فإن (x + 1) تساوي 2 * w/2، وهو ما يعادل العرض الكامل للوحة (الحافة اليمنى).

الآن بعد أن فهمنا إحداثيات عالمنا، دعونا نحدد النقاط (الرؤوس أو Vertices) التي ستشكل مكعباً ثلاثي الأبعاد في مساحة العالم، ولكن بدلاً من استخدام كائن جافا سكريبت عادي لكل نقطة، أريد تغليف هذا المنطق في فئة Vector3 الخاصة به:

class Vector3 {
  constructor(x, y, z) {
    this.x = x
    this.y = y
    this.z = z
  }
}

const cubeVertices = [
  new Vector3(-0.5, -0.5,  0.5), // 0 أسفل-يسار الأمام
  new Vector3( 0.5, -0.5,  0.5), // 1 أسفل-يمين الأمام
  new Vector3( 0.5,  0.5,  0.5), // 2 أعلى-يمين الأمام
  new Vector3(-0.5,  0.5,  0.5), // 3 أعلى-يسار الأمام

  new Vector3(-0.5, -0.5, -0.5), // 4 أسفل-يسار الخلف
  new Vector3( 0.5, -0.5, -0.5), // 5 أسفل-يمين الخلف
  new Vector3( 0.5,  0.5, -0.5), // 6 أعلى-يمين الخلف
  new Vector3(-0.5,  0.5, -0.5), // 7 أعلى-يسار الخلف
];

يمكنك تصور هذه الرؤوس ثلاثية الأبعاد على النحو التالي:

الإسقاط المتعامد (Orthographic Projection)

نحتاج الآن إلى طريقة لإسقاط نقاطنا ثلاثية الأبعاد على لوحتنا ثنائية الأبعاد المسطحة.

بالنسبة لإسقاطنا الأول، سنستخدم “الإسقاط المتعامد” الأساسي. في الإسقاط المتعامد، لا تتقلص الأشياء كلما ابتعدت. نحن ببساطة نقوم بتسطيح العالم ثلاثي الأبعاد من خلال تجاهل العمق (المحور Z) تماماً.

نظراً لأننا حددنا الإحداثيات ثلاثية الأبعاد لمكعبنا باستخدام قيم تتراوح بين -1 و 1، يمكننا التعامل معها تماماً مثل قيم NDC! دعونا نكتب دالة إسقاط تتجاهل z ببساطة وتعين قيم x و y (من -1 إلى 1) مباشرة إلى بكسلات الشاشة باستخدام الصيغة التي تعلمناها للتو:

function project(p) {
  const x = (p.x + 1) * canvas.width / 2
  const y = (1 - p.y) * canvas.height / 2
  return {x, y}
}

ثم، داخل دالة التصيير (render function)، لنأخذ كل رأس (vertex)، ونسقطه، ونرسمه كنقطة:

function render() {
 ctx.clearRect(0, 0, canvas.width, canvas.height)

 for (const vertex of cubeVertices) {
  const {x, y} = project(vertex)
  drawPoint(x, y)
 }

 requestAnimationFrame(render)
}

requestAnimationFrame(render)

function drawPoint(x, y) {
 ctx.beginPath()
 ctx.arc(x, y, 2, 0, Math.PI * 2)
 ctx.fill()
}

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

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

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

مصفوفة الدوران (Rotation Matrix)

لتدوير نقاطنا ثلاثية الأبعاد، النهج الرياضي القياسي هو ضرب كل نقطة في مصفوفة دوران 3x3. هناك مصفوفة محددة لكل محور تريد الدوران حوله (X أو Y أو Z). نتيجة هذا الضرب تعطينا الإحداثي ثلاثي الأبعاد الجديد والمدور للنقطة.

إليك مصفوفات الدوران الثلاث:

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

لتطبيق هذا الدوران في الكود، علينا ضرب مصفوفة 3x3 الخاصة بنا في كل نقطة. نظراً لأن النقطة تحتوي على ثلاث قيم (x، y، z)، فإننا نتعامل معها كشبكة 1x3 (تسمى متجه عمودي). يتضمن ضرب المصفوفات ببساطة ضرب صفوف المصفوفة في عمود المتجه الخاص بنا، كما هو موضح أدناه:

الآن، دعونا نضيف منطق الدوران إلى فئة Vector الخاصة بنا:

class Vector3 {
 // ...
  rotateX(angle) {
  // تخزين استدعاءات حساب المثلثات المكلفة
  const c = Math.cos(angle)
  const s = Math.sin(angle)

  return new Vector3(
    this.x,
    this.y * c - this.z * s,
    this.y * s + this.z * c,
  )
 }
 // يمكننا فعل الشيء نفسه بالنسبة لـ rotateY و rotateZ أيضاً
}

الآن يمكننا تدوير كل نقطة قبل إسقاطها على الشاشة:

let angle = 0 // يمكننا إنشاء زاوية لكل محور (مثلاً cubeRotation = new Vector3(0, 0.2, 0.1))

function render() {
 //...
 angle += 0.1

 for (const vertex of cubeVertices) {
  const rotated = vertex.rotateX(angle).rotateY(angle).rotateZ(angle)
  const {x, y} = project(rotated)
  drawPoint(x, y)
 }
 //...
}

مع هذا الدوران، يمكننا أخيراً رؤية الوجه الخلفي وتصور مكعبنا ثلاثي الأبعاد، حتى لو كان مجرد 8 نقاط عائمة في الوقت الحالي.

كما ذكرنا، يستخدم هذا الإسقاط المتعامد، الذي يفتقر إلى وهم العمق، لذلك دعونا نُرقِّي محركنا لاستخدام الإسقاط المنظوري.

الإسقاط المنظوري (Perspective Projection)

لفهم الإسقاط المنظوري، دعونا نتخيل عالمنا ثلاثي الأبعاد. تخيل كاميرا (أو عيناً) تسقط أشعة أو خطوطاً عبر الشاشة (أو النافذة) وترسم تقاطع الخط مع الشاشة؛ هذا التقاطع هو نقطتنا المسقطة.

الآن نحتاج إلى معرفة كيفية حساب نقطة الإسقاط هذه.

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

كما نرى، من خلال إطلاق شعاعنا التخيلي، نشكل مثلثاً قائم الزاوية عمودياً على المحور z.

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

$\frac{y^\prime}{f} = \frac{y}{z}$

بضرب كلا الجانبين في البعد البؤري (focal length) نحصل على صيغة الإسقاط الخاصة بنا:

$y^\prime = \frac{y \cdot f}{z}$

وبتطبيق نفس المنطق تماماً على المحور الأفقي:

$x^\prime = \frac{x \cdot f}{z}$

لكن ما هي قيمة f (المسافة بين الكاميرا والشاشة)؟

من المخطط، نلاحظ أن قسمة مجال الرؤية (field of view) على اثنين يعطينا مثلثين قائمي الزاوية متصلين، لذلك يمكننا استخدام علم المثلثات لمعرفة مسافة الكاميرا:

نعلم أن ظل الزاوية (tangent) هو المقابل مقسوماً على المجاور: $\tan(\theta) = \frac{o}{a}$ ، وهو في هذه الحالة:

$\tan\left(\frac{\theta}{2}\right) = \frac{1}{f}$

أخيراً، ننقل متغير البعد البؤري إلى اليسار لنحصل على:

$f = \frac{1}{\tan\left(\frac{\theta}{2}\right)}$

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

// مجال رؤية ضيق يعني تقريباً (zoom) أعلى

const fov = 90 * Math.PI / 180 // تحويل الدرجات إلى راديان

const focal = 1 / Math.tan(fov / 2)

function project(p) {
  const xp = p.x * focal / p.z
  const yp = p.y * focal / p.z

  const x = (xp + 1) * canvas.width / 2
  const y = (1 - yp) * canvas.height / 2

  return {x, y}
}

باستخدام منطق الإسقاط المُحدَّث هذا، تدور رؤوس المكعب حول الكاميرا، مما يتسبب في خروج بعض النقاط عن نطاق الرؤية. هذا منطقي لأن النقطة (0, 0, 0) هي مركز المكعب وموضع الكاميرا في نفس الوقت.

لإصلاح ذلك، يمكننا دفع المكعب إلى الخلف في المحور z بعد الدوران حتى نتمكن من رؤية المكعب بالكامل:

// داخل render()
for (const vertex of cubeVertices) {
    const rotated = vertex.rotateX(angle).rotateY(angle).rotateZ(angle)
    rotated.z += 1 // دفع المكعب في اتجاه z بعد تدويره حول المركز

    const {x, y} = project(rotated)
    drawPoint(x, y)
  }

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

الشبكات المثلثية (Triangular Meshes)

الشبكة المضلعة (Mesh) هي مجموعة من المضلعات، معظمها مثلثات، تحدد أي كائن ثلاثي الأبعاد.

ومع ذلك، يجب تحديد هذه المثلثات في تسلسل متسق يُعرف باسم ترتيب الالتفاف (Winding Order) (إما في اتجاه عقارب الساعة أو عكس اتجاه عقارب الساعة). يحدد هذا الترتيب الجانب المرئي من المثلث، حيث نقوم فقط بتصيير المثلثات التي تواجهنا. تُسمى هذه العملية “إخفاء الأوجه الخلفية” (Back-face culling) وستكون مفيدة عند تلوين المثلثات.

const cubeMesh = [
    // الأمام
    0, 1, 2,
    0, 2, 3,
    // الخلف
    5, 4, 7,
    5, 7, 6,
    // اليسار
    4, 0, 3,
    4, 3, 7,
    // اليمين
    1, 5, 6,
    1, 6, 2,
    // الأعلى
    3, 2, 6,
    3, 6, 7,
    // الأسفل
    4, 5, 1,
    4, 1, 0,
];

class Vector3 {
  // ... الكود السابق
  add(v) { 
    return new Vector3(this.x + v.x, this.y + v.y, this.z + v.z) 
  } 
}

const cubePosition = new Vector3(0, 0, 1); // جرب تغيير موضع المكعب 

function render() {
  // ...

  for (const vertex of cubeVertices) {...} 
  // القيام بالعمليات الرياضية الثقيلة على كل رأس مرة واحدة فقط
  const rotatedVertices = cubeVertices.map(vertex =>
      vertex.rotateX(angle).rotateZ(angle).rotateY(angle)
            .add(cubePosition) // دفع المكعب للخلف
  );

  // توصيل النقاط باتباع ترتيب الالتفاف عكس عقارب الساعة
  for (let i = 0; i < cubeMesh.length; i += 3) {
    const p1 = rotatedVertices[cubeMesh[i]];
    const p2 = rotatedVertices[cubeMesh[i + 1]];
    const p3 = rotatedVertices[cubeMesh[i + 2]];

    drawTriangle(
      project(p1),
      project(p2),
      project(p3)
    );
  }
  // ...
}

function drawTriangle(p1, p2, p3) {
  ctx.beginPath()
  ctx.moveTo(p1.x, p1.y)
  ctx.lineTo(p2.x, p2.y)
  ctx.lineTo(p3.x, p3.y)
  ctx.closePath()
  ctx.stroke();
}

تغيير حجم الإطار (Resizing the frame)

قبل أن أختتم، دعونا نصلح مشكلة التمدد. في البداية، حددنا وعملنا مع لوحة (Canvas) مربعة بنسبة 1:1، ولكن أي نسبة عرض إلى ارتفاع أخرى (مثل 16:9) ستؤدي إلى تمدد أو انكماش الكائنات.

لحسن الحظ، هناك حل بسيط؛ قبل أن نسقط النقطة، سنقوم بعمل توسيع عكسي (counter-scale) لمحور واحد (x أو y) بواسطة نسبة العرض إلى الارتفاع للوحة لإلغاء التمدد:

const ar = canvas.width / canvas.height

function project(p) {
  const xp = p.x / ar * focal / p.z // قسمة x على ar
  const yp = p.y * focal / p.z

  const x = (xp + 1) * canvas.width / 2
  const y = (1 - yp) * canvas.height / 2

  return {x, y}
}

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