خطوتك الأولى في تطوير ألعاب الويب باستخدام Three.js والـ Gaussian Splats
Your First Step Into Web Game Development with Three.js and Gaussian Splats
دليل عملي بدون تعقيد لبناء ألعاب في المتصفح برسومات ثلاثية الأبعاد فورية وبيئات واقعية مبنية بالـ Splats، باستخدام أدوات يقدر أي شخص يتعلّمها.
A practical, no-fluff guide to building browser games with real-time 3D rendering and photorealistic splat-based environments, using tools anyone can pick up.
01 ليش تبني ألعاب في المتصفح؟ Why Build Games in the Browser?
قبل فترة، السؤال كان يجاوب نفسه: المتصفح مو المكان المناسب لبناء الألعاب. الأداء ما كان كافياً، واجهات برمجة الرسومات كانت محدودة، واللاعبون كانوا يتوقعون تنزيل الملفات. لكن تلك الحقبة انتهت. المتصفحات الحديثة تشتغل على WebGL مسرَّع بالـ GPU، وتدعم WebAssembly لتنفيذ الكود بسرعة تقترب من الأصلية، وتقدر تشغّل صوت وفيزياء وترسم مشاهد بملايين المضلعات عند ٦٠ إطاراً في الثانية. الأدوات وصلت لمستوى الطموح.
The question used to be rhetorical: browsers were clearly the wrong place to build games. The performance wasn't there, the graphics APIs were limited, and players expected downloads. That era is over. Modern browsers run on hardware-accelerated WebGL, support WebAssembly for near-native code execution, and can stream audio, handle physics, and render scenes with millions of polygons at 60 frames per second. The tooling caught up with the ambition.
اللي تكسبه من بناء على الويب هو شيء ما يقدر أي محرك أصلي يقدّمه: توزيع بدون احتكاك. لعبتك تعيش في رابط. أي شخص عنده متصفح يقدر يلعبها في ثوان، على لابتوب، على جوال، في Discord embed، أو رابط من تغريدة. ما في صفحة Steam. ما في مراجعة متجر تطبيقات. ما في مثبّت. هذه الفورية ميزة تنافسية حقيقية، خصوصاً للمطوّرين المستقلين، المشاركين في game jams، والاستوديوهات اللي تبي تصمم بسرعة وتشارك على نطاق واسع.
What you get in return for building on the web is something no native engine can offer: frictionless distribution. Your game lives at a URL. Anyone with a browser can play it in seconds on a laptop, on a phone, in a Discord embed, linked from a tweet. No Steam page. No app store review. No installer. That immediacy is a genuine competitive advantage, especially for indie developers, game jam participants, and studios who want to prototype quickly and share widely.
Three.js هي أكثر مكتبات العرض نضجاً وانتشاراً لتجارب الويب ثلاثية الأبعاد، والـ Gaussian Splatting هي أحدث وأكثر تقنية مثيرة لجلب البيئات الواقعية لهذه التجارب. معاً، يكوّنون أساساً مفاجئ القدرة لنوع جديد من ألعاب المتصفح.
Three.js is the most mature and widely used rendering library for 3D browser experiences, and Gaussian Splatting is the newest and most exciting technique for bringing photorealistic, real-world environments into those experiences. Together, they form a surprisingly capable foundation for a new kind of browser game.
«لعبتك تعيش في رابط. أي شخص عنده متصفح يقدر يلعبها في ثوان. ما في تنزيل، ما في تنصيب، ما في عقبات.»
"Your game lives at a URL. Anyone with a browser can play it in seconds. No download, no install, no friction."
02 افهم المكدّس قبل ما تبني Understanding the Stack Before You Build
قبل ما تكتب سطر كود واحد، يفيد تفهم وش كل تقنية في مكدّستك مسؤولة عنه بالضبط، عشان تعرف وين تدور لما يصير خطأ أو لما تبي تتقدّم أكثر.
Before writing a line of code, it helps to understand what each technology in your stack is actually responsible for, so you know where to look when something breaks or when you want to push further.
Three.js هي محرك العرض عندك. تدير المشهد ثلاثي الأبعاد: الهندسة، المواد، الإضاءة، الكاميرات، وحلقة العرض اللي ترسم كل شيء على الشاشة ٦٠ مرة في الثانية. ما تتعامل مع الفيزياء أو منطق اللعبة أو المدخلات أو الصوت.
Three.js is your rendering engine. It manages the 3D scene: geometry, materials, lighting, cameras, and the render loop that draws everything to screen 60 times per second. It does not handle physics, game logic, input, or audio. Those are your job, or the job of companion libraries you wire in.
الـ Gaussian Splats هي صيغة لتمثيل البيئات ثلاثية الأبعاد الملتقطة من العالم الحقيقي. بدل المثلثات، تستخدم ملايين من الأشكال البيضاوية الصغيرة شبه الشفافة لإعادة بناء مظهر مكان من بيانات تصويرية. النتيجة واقعية بشكل استثنائي، ومشاهد الـ Splat تقدر تلتقطها بلا أكثر من جوال وبرنامج مجاني.
Gaussian Splats are a representation format for 3D environments captured from the real world. Instead of triangles, they use millions of small, semi-transparent ellipsoids to reconstruct the appearance of a place from photographic data. The result is extraordinarily photorealistic, and splat scenes can be captured with nothing more than a smartphone and free software.
المتصفح هو بيئة تشغيلك. يوفّر WebGL، واجهة Web Audio API، وPointer Lock للتحكم بالفأرة، وGamepad API لدعم وحدات التحكم، وWebAssembly لتشغيل محركات الفيزياء. ما تحتاج تنصّب أي شيء، كل شيء موجود في كل متصفح حديث.
The browser is your runtime. It provides WebGL, the Web Audio API, Pointer Lock for mouse capture in first-person games, Gamepad API for controller support, and WebAssembly for running physics engines at near-native speed. You don't need to install anything, it's already in every modern browser.
03 إعداد بيئة التطوير Setting Up Your Development Environment
تشغيل مشروع Three.js يأخذ حوالي عشر دقائق. تحتاج Node.js مثبّت على جهازك، محرر كود (VS Code هو الاختيار المعتاد)، وتيرمينال. من هناك، أسرع طريق لمشهد يشتغل هو Vite، وهو أداة بناء وخادم تطوير يعطيك hot-reloading فوري وسير عمل وحدات حديث.
Getting a Three.js project running takes about ten minutes. You need Node.js installed on your machine, a code editor (VS Code is the standard choice), and a terminal. From there, the fastest path to a running scene is Vite, a build tool and dev server that gives you instant hot-reloading and a modern module workflow without the complexity of Webpack.
# Create a new Vite project
npm create vite@latest my-game -- --template vanilla
# Move into the project and install dependencies
cd my-game
npm install
# Install Three.js
npm install three
# Start the dev server
npm run dev
لمّا Vite يشتغل، راح يكون عندك خادم محلي على localhost:5173 مع live reload. كل مرة تحفظ ملف، المتصفح يتحدّث فوراً بدون تحديث يدوي. هذه الحلقة المرتدّة السريعة ضرورية لما تكون تضبط مشهداً أو تعدّل زاوية كاميرا.
Once Vite is running, you'll have a local server at localhost:5173 with live reload. Every time you save a file, the browser updates instantly with no manual refresh needed. This tight feedback loop is critical when you're tweaking a scene, adjusting camera angles, or tuning physics.
لعرض الـ Gaussian Splat، أفضل مكتبة تضيفها لمشروع Three.js الآن هي gsplat.js، وهي محرك عرض Splat خفيف ومستقل يتكامل بسلاسة مع مشاهد Three.js.
For Gaussian Splat rendering, the best library to add to your Three.js project right now is gsplat.js, a lightweight, standalone splat renderer that integrates cleanly with Three.js scenes. Install it alongside Three.js and you can load a .splat or .ply file as a scene object.
# Install gsplat.js for splat rendering in Three.js
npm install @mkkellogg/gaussian-splats-3d
04 التقاط أول مشهد Gaussian Splat عندك Capturing Your First Gaussian Splat Scene
قبل ما تحط Splat في لعبتك، تحتاج واحد. خط أنابيب الالتقاط له ثلاث مراحل: تصوير الفيديو، استخراج الإطارات، وتشغيل عملية التدريب اللي تحوّل هذه الإطارات لملف .splat.
Before you can put a splat in your game, you need one. The capture pipeline has three stages: shooting the video, extracting frames, and running the training process that turns those frames into a .splat file.
صوّر فيديو ٣٦٠ درجة لموضوعك
Shoot a 360° video of your subject
امشِ ببطء حول موضوعك مع إبقائه في منتصف الإطار. حرّك الكاميرا عند ارتفاعات متعددة. استهدف دقيقتين لخمس دقائق من اللقطات في إضاءة جيدة ومتساوية. تجنّب الحركة السريعة وضبابية الحركة.
Walk slowly around your subject keeping it centred in frame. Move the camera at multiple heights. Aim for 2–5 minutes of footage in good, even lighting. Avoid fast movement and motion blur.
استخرج الإطارات من الفيديو
Extract frames from the video
استخدم سكريبت مثل video2imgs.py من أدوات LLFF، أو ببساطة استخدم FFmpeg لاستخراج إطار في الثانية. هدفك ٢٠٠ إلى ٥٠٠ إطار عالي الجودة يغطّي موضوعك من كل زاوية.
Use a script like video2imgs.py from the LLFF toolkit or use FFmpeg to extract one frame per second. You're aiming for 200–500 high-quality frames that collectively cover your subject from every angle.
شغّل COLMAP لتقدير وضع الكاميرا
Run COLMAP for camera pose estimation
COLMAP أداة مجانية للـ Structure-from-Motion تحلّل إطاراتك وتعرف وين كانت الكاميرا في كل إطار. تنتج المعاملات الداخلية والخارجية للكاميرا اللي تحتاجها عملية التدريب. هذا ممكن يأخذ ١٠ إلى ٣٠ دقيقة.
COLMAP is a free Structure-from-Motion tool that analyses your frames and figures out where the camera was positioned for each one. It produces the camera intrinsics and extrinsics your training process needs. This can take 10–30 minutes depending on your machine.
درّب نموذج الـ Gaussian Splat
Train the Gaussian Splat model
أعطِ إطاراتك ومخرجات COLMAP لمدرّب Gaussian Splatting. لنتيجة أسرع وأكثر كفاءة في الذاكرة، استخدم gsplat من NeRF-Studio. التدريب يأخذ ١٥ إلى ٤٠ دقيقة وينتج ملف .ply تقدر تحمّله مباشرةً في لعبتك.
Feed your frames and COLMAP output into a Gaussian Splatting trainer. For a faster and more memory-efficient result, use gsplat from NeRF-Studio. Training takes 15–40 minutes on a mid-range GPU and produces a .ply file you can load directly into your game.
لو ما عندك GPU يقدر يدرّب محلياً، Luma AI هي أسهل بديل سحابي. تسجّل فيديو على جوالك باستخدام تطبيق Luma، ترفعه، وتستلم ملف Splat مدرَّب في دقائق. الطبقة المجانية كافية للتجربة.
If you don't have a GPU capable of training locally, Luma AI is the easiest cloud alternative. You record a video on your phone using the Luma app, upload it, and receive a trained splat file back within minutes. It handles the entire COLMAP and training pipeline for you. The free tier is generous enough for experimentation.
05 برامج سهلة الاستخدام لكل مرحلة Easy-to-Use Software for Every Stage
خط أنابيب تطوير ألعاب الويب كان يحتاج أدوات احترافية في كل مرحلة. هذا لم يعد صحيحاً. إليك المشهد الحالي من البرامج السهلة المناسبة للمبتدئين:
The web game development pipeline used to require professional-grade tools at every stage. That's no longer true. Here is the current landscape of accessible, beginner-friendly software that covers everything from capture to deployment:
Luma AI
Capture & Training · Free tier availableسجّل على جوالك، ارفع، احصل على Splat. أسهل خط أنابيب شامل لالتقاط مشاهد Gaussian Splat. يصدّر لـ .splat و.ply.
Record on your phone, upload, get a splat back. The easiest end-to-end pipeline for capturing Gaussian Splat scenes without touching a terminal. Exports to .splat and .ply.
Polycam
Capture · iOS & Androidتطبيق التقاط موبايل قوي آخر بدعم Gaussian Splat. جيد بشكل خاص للبيئات الداخلية والأجسام. يوفّر عارض ويب وتصدير مباشر للاستخدام في الألعاب.
Another strong mobile capture app with Gaussian Splat support. Particularly good for indoor environments and objects. Offers a web viewer and direct export for game use.
VS Code + Vite
Development Environment · Freeالإعداد المعتاد لتطوير Three.js. VS Code يعطيك تمييز صيغة وIntelliSense؛ Vite يعطيك hot-reload فوري وخط أنابيب بناء بدون إعداد.
The standard setup for Three.js development. VS Code gives you syntax highlighting and IntelliSense; Vite gives you instant hot-reload and a zero-config build pipeline.
SuperSplat
Splat Editor · Free, browser-basedمحرر Gaussian Splat مجاني يعمل في المتصفح من PlayCanvas. يخلّيك تقصّ وتنظّف وتعيد تموضع مشاهد Splat قبل ما تحطّها في لعبتك. ما يحتاج تنصيب.
A free, browser-based Gaussian Splat editor from PlayCanvas. Lets you crop, clean, and reposition splat scenes before dropping them into your game. No install required.
Cannon.js / Rapier
Physics · Free & Open Sourceمحركات فيزياء خفيفة تتكامل بسلاسة مع Three.js. Cannon.js أسهل في التعلم؛ Rapier (مُصرَّف لـ WebAssembly) أسرع بشكل ملحوظ للمشاهد المعقدة.
Lightweight physics engines that integrate cleanly with Three.js. Cannon.js is simpler to learn; Rapier (compiled to WebAssembly) is significantly faster for complex scenes.
Netlify / Vercel
Deployment · Free tier availableنشر بسحب وإسقاط أو عبر Git لعبتك المكتملة. كلا المنصتين تقدّمان استضافة HTTPS مجانية وشبكة توصيل عالمية ونشراً فورياً في أقل من دقيقتين.
Drag-and-drop or Git-connected deployment for your finished game. Both platforms offer free HTTPS hosting, global CDN, and instant deploys. Your game is live in under two minutes.
06 ركّب كل شيء معاً: حلقة لعبة بسيطة Putting It All Together: A Simple Game Loop
لمّا يكون عندك ملف Splat ومشروع Three.js جاهز، ربطهم مباشر. النمط هو: حمّل الـ Splat ككائن مشهد، اعمل كاميرا بضوابط حركة أساسية، أضف أي هندسة Three.js تفاعلية فوقها، ثم شغّل حلقة العرض.
Once you have a splat file and a Three.js project set up, connecting them is straightforward. The pattern is: load the splat as a scene object, set up a camera with basic movement controls, add any interactive Three.js geometry on top, then run the render loop.
import * as THREE from 'three';
import { GaussianSplatsMesh } from '@mkkellogg/gaussian-splats-3d';
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 500);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
// Load your Gaussian Splat as the environment
const splat = new GaussianSplatsMesh(renderer);
await splat.addSplatScene('./scene.splat');
scene.add(splat);
// Add a game object on top of the splat scene
const playerGeo = new THREE.CapsuleGeometry(0.3, 1);
const playerMat = new THREE.MeshStandardMaterial({ color: '#1a52b8' });
const player = new THREE.Mesh(playerGeo, playerMat);
scene.add(player);
// Game loop
function animate() {
requestAnimationFrame(animate);
updatePlayerMovement(); // your input logic
splat.update(camera);
renderer.render(scene, camera);
}
animate();
مشهد الـ Splat يصبح خلفية عالمك: واقعي، ملتقط من الحقيقة، ما يحتاج أي مهارة في النمذجة. شخصية اللاعب والأعداء والعناصر القابلة للجمع وعناصر الواجهة هي شبكات Three.js عادية مرتّبة فوقه.
The splat scene becomes your world backdrop: photorealistic, captured from reality, requiring zero 3D modelling skill to create. Your player character, enemies, collectibles, and UI elements are standard Three.js meshes layered on top. The two systems coexist in the same render loop and the same scene graph.
لحركة اللاعب، أبسط طريقة هي الاستماع لأحداث لوحة المفاتيح وتحديث موضع الكاميرا مباشرةً. لتجربة من منظور الشخص الأول، ادمج هذا مع Pointer Lock API. للتصادم، أطلق أشعة من الكاميرا باستخدام Raycaster المدمج في Three.js.
For player movement, the simplest approach is to listen to keyboard events and update the camera position directly. For a first-person experience, combine this with Pointer Lock API to capture the mouse and drive camera rotation. For collision, cast rays from the camera using Three.js's built-in Raycaster.
07 قيود تصمّم حولها Limitations to Design Around
الـ Gaussian Splats في الألعاب لها قيود يستاهل تعرفها قبل ما تلتزم بالنهج. ملفات الـ Splat كبيرة، عادةً ١٠٠ إلى ٢٠٠ ميغابايت، مما يجعلها غير مناسبة كأصول تحمّل فوري. راح تبي تبثّها تدريجياً أو تستخدمها باختيار للبيئات الرئيسية. معظم محركات عرض الـ Gaussian Splat كذلك ما تدعم الظلال الفورية أو الإضاءة الديناميكية داخل الـ Splat نفسه.
Gaussian Splats in games come with constraints worth knowing before you commit to the approach. Splat files are large, typically 100 to 200 MB, which makes them unsuitable as instant-load assets. You'll want to stream them progressively or use them selectively for key environments. Most Gaussian Splat renderers also don't support real-time shadows or dynamic lighting within the splat itself, which means interactive lights won't cast shadows into the splat scene.
الكشف عن التصادم هو التحدي العملي الآخر. مشاهد الـ Splat ما عندها هندسة، فإطلاق الأشعة عليها ما يشتغل نفس طريقة الشبكات. الحل الشائع هو إنشاء شبكة تصادم مبسّطة غير مرئية في أداة مثل Blender تطابق الشكل التقريبي لبيئة الـ Splat، ثم تضيفها لمشهد Three.js وتطلق الأشعة عليها.
Collision detection is the other practical challenge. Splat scenes don't have geometry: they're clouds of coloured ellipsoids, so raycasting against them doesn't work the way it does with meshes. The common solution is to author a simplified invisible collision mesh in a tool like Blender that matches the rough shape of your splat environment, then add that invisible mesh to your Three.js scene and cast rays against it.
«الـ Splats تخلّي عالمك يبدو حقيقياً بدون أي نمذجة ثلاثية الأبعاد. بس تحتاج جولة حول موقع وبرنامج مجاني.»
"Splats make your world look real with zero 3D modelling. You just need a walk around a location and free software."
08 وين تكمل من هنا؟ Where to Go From Here
أفيد شيء تقدر تسوّيه الآن هو تبني شيء صغير وتطلقه. اختار فكرة تناسب الوسيلة: محاكي مشي، لعبة ألغاز قصيرة، تجربة استكشاف غلافية. استخدمها لتمر بكل مرحلة من خط الأنابيب مرة واحدة على الأقل. التقط Splat لغرفة في بيتك. حطّه في مشهد Three.js. أضف كاميرا قابلة للتحكم. أضف كائن تفاعلي واحد. ارفعه على Netlify. ارسل الرابط لأحد.
The most useful thing you can do right now is build something small and ship it. Pick a concept that fits the medium: a walking simulator, a short puzzle game, an atmospheric exploration experience. Use it to work through every stage of the pipeline at least once. Capture a splat of a room in your house. Drop it into a Three.js scene. Add a controllable camera. Add one interactive object. Put it on Netlify. Send the link to someone.
هذه الحلقة المرتدّة، بناء والتقاط وتكامل وإطلاق ومشاركة، هي كيف تطوّر حدسك لوش يقدر يسوّيه المكدّس. توثيق Three.js ممتاز وفيه أمثلة كود حية لقريباً كل ميزة. مجتمع Three.js Discord ومجتمعات Gaussian Splatting نشطة ومفيدة بجد للمبتدئين.
That feedback loop, build, capture, integrate, ship, share, is how you develop intuition for what the stack can do. The documentation for Three.js is excellent and has live code examples for almost every feature. The Three.js Discord and Gaussian Splatting communities are active and genuinely helpful for beginners.
الأدوات متاحة. خط الأنابيب قابل للتعلم. الشيء الوحيد بينك وبين أول لعبة متصفح عندك هو بعد ظهر واستعداد توجّه فيه الكاميرا لشيء مثير للاهتمام.
The tools are accessible. The pipeline is learnable. The only thing between you and your first browser game is an afternoon and a willingness to point a camera at something interesting.