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
نحن نسعى لتوظيف مهندس واجهة ثلاثية الأبعاد / تقني إبداعي لبناء مُكوِّنًا تفاعليًا ثلاثي الأبعاد لملاءمة الأفاتار وتفعيل محرك دروب-الأنيميشن لتطبيق كرة القدم المحمول المخصص للأطفال. في هذا الدور، ستجسر الفجوة بين تجربة المستخدم والرسوميات ثلاثية الأبعاد، من خلال تحويل الأصول التي أنشأها فناننا ثلاثي الأبعاد إلى تجربة محمولة تفاعلية باستخدام React Native و React Three Fiber.\n
\n
المسؤوليات الأساسية\n
محرك تخصيص الأفاتار: بناء نظام modular يسمح للمستخدمين بتبديل شبكات ثلاثية الأبعاد وموادها بسلاسة (الشعر، القمصان، الأحذية، درجات البشرة) عبر حالة React القياسية.\n
آلة حالة التحريك: برمجة وحدة تحكم أنيميشن هيكلية مرنة لقراءة بنى العظام من .gltf/.glb، ودمج تمارين كرة القدم بسلاسة.\n
\n
التعاون في خط الإنتاج: العمل عن كثب مع فنان ثلاثي الأبعاد لإعداد قيود تحسين الأصول (عددي poly منخفض، شِدّات الملمس، تسميات العظام) مصممة لأداء WebGL على الأجهزة المحمولة.\n
\n
تحسين الأداء: تحسين إدارة الذاكرة، وجمع القمامة، وحلقات العرض لضمان استقرار 60 إطارًا في الثانية عبر كل من منصات iOS و Android\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
إلمام أساسي بأدوات نمذجة ثلاثية الأبعاد مثل Blender لمراجعة الأصول المقدمة من الفنان بسهولة.\n
معرفة بأنظمة الأفاتار المهيأة مسبقًا مثل Ready Player Me أو خطوط إنتاج Mixamo