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)
نظرة عامة عن الدور:
نحن نبحث عن مهندس واجهة أمامية ثلاثية الأبعاد / تقني إبداعي لبناء مخصص افتراضي تفاعلي ثلاثي الأبعاد وتشغيل أنظمة دوَّر للرسوم المتحركة من أجل تطبيق كرة القدم المحمول المخصص للأطفال. في هذا الدور، ستجسر الفجوة بين تجربة المستخدم والرسومات ثلاثية الأبعاد، من خلال تحويل الأصول التي أنشأناها بواسطة فنان ثلاثي الأبعاد إلى تجربة محمولة تفاعلية باستخدام React Native و React Three Fiber.
المسؤوليات الأساسية
محرك تخصيص الوجوه ثلاثي الأبعاد: بناء نظام معياري يسمح للمستخدمين بتبديل الشبكات الثلاثية الأبعاد والأنسجة بسلاسة (الشعر، القمصان، الأحذية، لون البشرة) عبر حالة React القياسية.
آلة حالة الحركة: برمجة متحكم حركة هيكل عظمي مرن لقراءة هياكل عظام .gltf/.glb، مزج تمارين كرة القدم بسلاسة (المراوغة، التمرير، التسديد).
التعاون في خط الإنتاج: العمل عن كثب مع فناننا ثلاثي الأبعاد لوضع قيود تحسين الأصول (عدد منخفض من الأوجه، تجميع الأنسجة، تسميات العظام) مصممة لأداء WebGL المحمول.
تحسين الأداء: تحسين إدارة الذاكرة، جامع القمامة، وحلقات العرض لضمان ثبات 60 إطاراً في الثانية عبر كل من منصات iOS وAndroid
.
المهارات التقنية المطلوبة
التمكن من تصميم واجهات React Native، إدارة الحالة، ودورات حياة المكونات.
خبرة تجارية قوية مع Three.js و React Three Fiber / @react-three/fiber.
فهم عميق لمفاهيم الرسومات ثلاثية الأبعاد: معالجة الشبكات، ربط الهيكل العظمي، مصفوفات أوزان العظام، مواد PBR، ومصفوفات الإضاءة.
خبرة في التحليل والتلاعب بنماذج GLTF/GLB أثناء التشغيل.
إتقان أدوات تقييم الأداء للهواتف المحمولة (حدود CPU/GPU، تسرب الذاكرة، تحسين استدعاءات الرسم).
المهارات المفضلة
خبرة في بناء برمجيات أو تجارب ألعاب موجهة للأطفال.
إلمام أساسي بأدوات النمذجة ثلاثية الأبعاد مثل Blender لمراجعة الأصول التي يقدمها الفنان بسهولة.
معرفة بنظم وجداول أدوار الأفاتار المسبقة البناء مثل Ready Player Me أو خطوط Mixamo