Job Description: 3D Front-End Engineer (React Native & WebGL)
Role Overview:
We are seeking a 3D Front-End Engineer / Creative Technologist to build a responsive, interactive 3D avatar customizer and drill-animation engine for our kid-focused mobile football application. In this role, you will bridge the gap between user experience and 3D graphics, translating assets built by our 3D artist into an interactive mobile experience using React Native and React Three Fiber.
Key Responsibilities
Avatar Customization Engine: Build a modular system allowing users to swap 3D meshes and textures seamlessly (hair, jerseys, boots, skin tones) via standard React state.
Animation State Machine: Program a flexible skeletal animation controller to read .gltf/.glb bone structures, blending football drills (dribbling, passing, shooting) seamlessly.
Pipeline Collaboration: Work closely with our 3D artist to establish asset optimization constraints (low poly counts, texture atlasing, bone naming conventions) tailored for mobile WebGL performance.
Performance Tuning: Optimize memory management, garbage collection, and render loops to ensure a stable 60 FPS across both iOS and Android platforms
.
Required Technical Skills
Proficient in React Native layout design, state management, and component lifecycles.
Strong commercial experience with Three.js and React Three Fiber / @react-three/fiber.
Deep understanding of 3D graphics concepts: mesh manipulation, skeletal rigging, bone weight matrices, PBR materials, and lighting arrays.
Experience parsing and manipulating GLTF/GLB models dynamically at runtime.
Mastery of mobile performance profiling tools (CPU/GPU boundaries, memory leaks, draw call optimization).
Nice-to-Have Skills
Experience building software or gamified experiences aimed at children.
Basic familiarity with 3D modeling tools like Blender to easily audit assets provided by the artist.
Knowledge of pre-built avatar ecosystems like Ready Player Me or Mixamo pipelines
الوصف الوظيفي: مهندس واجهات ثلاثية الأبعاد (React Native و WebGL)\n
\n<التOverview>:\n
نحن نبحث عن مهندس واجهات ثلاثية الأبعاد / تكنولوجي إبداعي لبناء مُخصص أفاتار تفاعلي ثلاثي الأبعاد ومحرك أنيميشن تدريب لقابليّة الاستخدام في تطبيق كرة القدم المحمول الموجّه للأطفال. في هذا الدور، ستجسر الفجوة بين تجربة المستخدم والرسوم ثلاثية الأبعاد، من خلال ترجمة الأصول التي أنشأها فناننا ثلاثي الأبعاد إلى تجربة محمولة تفاعلية باستخدام React Native و React Three Fiber.\n
\n\nالمهام الأساسية\n
محرك تخصيص الأفاتار: بناء نظام معياري يمكّن المستخدمين من تبديل الشبكات ثلاثية الأبعاد والأنسجة بسلاسة (الشعر، القمصان، الأحذية، درجات البشرة) عبر حالة React القياسية.\n
آلة حالة الرسوم المتحركة: برمجة وحدة تحكّم مرنة للرسوم المتحركة الهيكلية لقراءة بنى العظام في ملفات .gltf/.glb، ودمج تمارين كرة القدم (المراوغة، التمرير، التسديد) بسلاسة.\n
\nخط التجميع والتعاون: العمل بشكل وثيق مع فناننا ثلاثي الأبعاد لتحديد قيود تحسين الأصول (عدد بولي منخفض، ترسيم الأنسجة، تسميات العظام) مصممة لأداء WebGL على الهاتف المحمول.\n
\n\nتحسين الأداء: تحسين إدارة الذاكرة وجمع القمامة وحلقات العرض لضمان ثبات 60 إطارًا في الثانية عبر منصتي iOS و Android\n
.\n\nالمهارات التقنية المطلوبة\n
متمكن في تصميم تخطيط React Native وإدارة الحالة ودورات حياة المكوّنات.\n
خبرة تجارية قوية مع Three.js و React Three Fiber / @react-three/fiber.\n
فهم عميق لمفاهيم الرسوميات ثلاثية الأبعاد: معالجة الشبكات، رباط العظام، مصفوفات أوزان العظام، مواد PBR، ومصفوفات الإضاءة.\n
خبرة في تحليل ومعالجة نماذج GLTF/GLB بشكل ديناميكي أثناء التشغيل.\n
إتقان أدوات قياس أداء الأجهزة المحمولة (حدود CPU/GPU، تسريبات الذاكرة، تحسين استدعاءات الرسم).\n
\n\nمهارات جيدة الإضافية\n
خبرة في بناء برمجيات أو تجارب ألعابية تستهدف الأطفال.\n
إلمام أساسي بأدوات النمذجة ثلاثية الأبعاد مثل Blender لتدقيق الأصول التي يقدمها الفنان بسهولة.\n>معرفة بنُظم الأفاتار المسبقة مثل Ready Player Me أو مسارات Mixamo