LittleJS: Now Expanding into 3D

The latest update to LittleJS is the most significant since its inception. While it remains the same small, fast, and dependency-free HTML5 game engine developers love, it has evolved far beyond its original scope.

LittleJS was only for 2D. LittleJS is now a hybrid 2D and 3D powerhouse.

🚀 The New 3D Frontier

The engine now features a comprehensive 3D renderer that operates on the same canvas as your 2D elements. This allows for a seamless blend of dimensions.

Key 3D Capabilities:

• Geometry & Mapping: Meshes, shape builders, and voxel/terrain maps (complete with collision).
• Lighting & Atmosphere:
  • Colored lights and spotlights.
  • Shadow mapping and fog.
  • Reflections.
• Visual Effects: Particles, trails, and the ability to apply custom shaders to any object.
• Control: Integrated camera systems.

Unified Architecture

In LittleJS, 3D objects aren't a separate entity; they are standard LittleJS objects. This means they share the same physics, timer systems, and child-parent hierarchies as 2D objects.

This architecture enables creative layouts, such as:

1. A 2D User Interface overlaid on a 3D environment.
2. A 2D gameplay plane existing inside a 3D world.

---

🎨 Enhancements to 2D

The 2D side hasn't been neglected. New features include:

• Dynamic lighting systems.
• One-way platforms.
• Swept bullet collision for higher precision.
• Parallax background layers.
• Optimized object collision performance.

The Integrated Editor

By pressing Escape in a debug build, you can freeze the action and modify your level in real-time. This editor supports:

• Undo/Redo functionality.
• Autosave and Prefabs.
• Custom editor creation (see the editor guide).

Instant Particle Effects

Creating visuals is now a one-line affair. Whether in 2D or 3D, you can trigger effects like fire, rain, or explosions instantly:

particleEffect('fire', pos)

// Example: Spawning a spark effect at a specific position
particleEffect('sparks', player.pos); 

Every effect is customizable via scale, hue, and saturation, all of which can be fine-tuned using the particle designer.

The Example Browser contains over 100 single-file demos. These allow for live editing and sharing via a unique link.

---

⚡ Performance & Benchmarking

The rendering core has been completely overhauled to reduce per-draw overhead. This was achieved through WebGL2 batched 2D sprites and instanced 3D drawing.

To validate these claims, a WebGL Engine Bench was created to test how many objects could be rendered while maintaining a steady frame rate.

$\text{Target Performance} = 60 \text{ fps}$

---

🤖 Engineered for AI

LittleJS is designed to be "AI-friendly." Because the API is small and contained within a single reference file, LLMs can parse and utilize it with extreme accuracy.

"Keeping the core tiny and simple from day one is what makes an engine easy to learn and fast to run."

The AI Toolkit

LittleJS now provides a first-class toolkit for agents like Claude Code, Copilot, Codex, and Cursor, featuring:

• Starter templates.
• Helper modules.
• Specific agent instructions.

Because the engine handles the "heavy lifting" (audio, physics, input, rendering), AI can focus entirely on game logic. You can generate a complete, playable project that runs from a single file—no npm install or server required.

• LittleJS GPT: Build games directly within ChatGPT without writing code.
• LittleJS Arcade: A collection of 50+ open-source games created via AI to serve as templates.

---

🌐 Community & Future

Originally a solo project born from the constraints of js13k, LittleJS is now a community effort. Contributions for plugins, fixes, and examples now come from a wide array of developers.

Current Event: The 3rd LittleJS Game Jam is currently active from October 2 to November 2.

For a full demonstration of these features, visit littlejsengine.com, which features an interactive train ride showcasing the engine's capabilities.

Quick Links:

• [Examples] | [Docs] | [GitHub] | [Discord]