كسر حاجز الأبعاد الثنائية: هندسة واجهات مستخدم مكانية غامرة باستخدام Expo و React Three Fiber

لسنوات طويلة، كنا نبني تطبيقات الجوال داخل صندوق. قمنا بتحسين القوائم، وأتقنا مسارات التنقل (Navigation Stacks)، واحترفنا استخدام Flexbox. لكن مؤخراً، وجدت نفسي أشعر بعدم الرضا. إن ظهور الحوسبة المكانية (Spatial Computing) والقوة المتزايدة لمعالجات الرسوميات (GPUs) في الأجهزة المحمولة قد فتحا باباً لم تكن أطر عمل واجهات المستخدم ثنائية الأبعاد التقليدية مصممة له.

لقد أمضيت الأشهر القليلة الماضية في التعمق في نقطة الالتقاء بين Expo و React Three Fiber (R3F). هدفي؟ تجاوز الشاشة وبناء واجهات موجودة داخل الفضاء، وليس فقط فوقه. إليكم ما تعلمته حول إجراء هذا الانتقال كمهندس برمجيات أول (Senior Engineer).

لماذا اختيار Expo + R3F Stack؟

في البداية، سألني البعض: "يا ماجد، لماذا لا تتوجه مباشرة إلى التطوير الأصيل (Native) باستخدام Swift و RealityKit؟" الإجابة بسيطة: الإنتاجية والمرونة (Portability).

لقد نضج نظام Expo ليصبح بيئة عمل مذهلة. مع expo-gl والجسر الذي توفره مكتبة three و @react-three/fiber أصبح بإمكاننا الآن كتابة كود ثلاثي الأبعاد بصيغة تعريفية (Declarative) وقائم على المكونات (Components) يعمل على iOS، Android، والويب من خلال كود برمجي واحد. نحن نحصل على تجربة المطور الخاصة بـ React — مثل Hot Module Replacement، والـ Hooks، والمجتمع الضخم — مع الاستفادة من العتاد الأساسي للأجهزة لتقديم رندر مكاني (Spatial Rendering) عالي الدقة.

التحول المعماري: الـ Canvas هو واجهتك الجديدة

في تطبيق React Native القياسي، يكون جذرك هو <View>. أما في واجهة المستخدم المكانية، فإن جذرك هو <Canvas>. هذا ليس مجرد تغيير في الصيغة البرمجية؛ بل هو تحول في النموذج العقلي (Mental Model). أنت لم تعد تضع العناصر باستخدام top و left؛ بل تتعامل مع Vectors، و Quaternions، ومصادر الإضاءة.

إليكم مقتطفاً من إعداد مكاني أساسي كنت أستخدمه كقالب (Boilerplate):

import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber/native';
import { useGLTF, Environment, ContactShadows } from '@react-three/drei/native';

function SpatialModel({ url, ...props }) {
  const { scene } = useGLTF(url);
  return <primitive object={scene} {...props} />;
}

export default function SpatialExperience() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 75 }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      
      <Suspense fallback={null}>
        <SpatialModel 
          url="https://path-to-your-asset.glb" 
          scale={1.5} 
          position={[0, -1, 0]} 
        />
        <Environment preset="city" />
        <ContactShadows opacity={0.4} scale={10} blur={2} far={4.5} />
      </Suspense>
    </Canvas>
  );
}

اختراق: الربط بين واجهة المستخدم 2D والفضاء 3D

كان أكبر تحدٍ واجهته هو التفاعل. كيف يمكنك تحفيز تغيير في الحالة (State) ثنائية الأبعاد بناءً على اختبار التصادم (Hit-test) لكائن ثلاثي الأبعاد؟

وجدت أن الطريقة الأكثر كفاءة هي استخدام مدير حالة موحد (مثل Zustand) يمكن لكل من الـ Canvas ومكونات الـ Overlay التقليدية الاستماع إليه. عندما ينقر المستخدم على Mesh ثلاثي الأبعاد في الـ Canvas، أقوم بتحديث الـ Store، وتتفاعل واجهة React Native التقليدية بشكل فوري. هذا يخلق مزيجاً سلسًا حيث يبدو العالم ثلاثي الأبعاد متكاملاً مع واجهة النظام.

هندسة الأداء: لا تنهك الـ Main Thread

في تطبيقات الجوال، الاختناق الحراري (Thermal Throttling) هو عدوك الأكبر. إليك ثلاث قواعد لا أقبل المساومة عليها لأداء واجهة المستخدم المكانية:

1. Texture Compression: لا تستخدم أبداً صور PNG الخام للقوام (Textures). أنا أستخدم تنسيقات .ktx2 أو ملفات .webp عالية الضغط.
2. The useFrame Hook: استخدم هذا الـ Hook بحذر شديد. أي منطق برمجي داخل useFrame يعمل 60 (أو 120) مرة في الثانية. إذا كنت تجري حسابات ثقيلة هنا، فسيتحول هاتفك إلى سخان فضاء.
3. Instance over Copies: إذا كنت بحاجة إلى 100 كرة طافية في واجهتك، استخدم InstancedMesh. إن رندرة 100 مكون Mesh فردي سيؤدي إلى زيادة هائلة في الـ Draw Calls مما يضعف الأداء.

الخاتمة: الآفاق الجديدة

إن بناء واجهات مستخدم مكانية باستخدام Expo و React Three Fiber يعيد شعور الأيام الأولى لتطوير تطبيقات الجوال — تجريبي، مثير، ومليء بالإمكانيات. لم نعد محدودين بحواف شاشة الهاتف الذكي. من خلال الاستفادة من الأدوات التي نعرفها بالفعل كمطوري React، يمكننا قيادة التغيير نحو البعد التالي من الحوسبة.

إذا لم تحاول وضع <Canvas /> في مشروع Expo الخاص بك بعد، فهذه هي إشارتك للبدء. الطريق ممهد، والاحتمالات لا نهائية.