LittleJS

Made with LittleJS, my tiny fast JavaScript game engine. Free and open source, and it's built to be easy for both humans and AI to work with. 👍 KilledByAPixel/LittleJS

Made with LittleJS, my tiny fast JavaScript game engine. Free and open source, and it's built to be easy for both humans and AI to work with. 👍 KilledByAPixel/LittleJS

LittleJS now supports 3D and 2D: a small, fast WebGL2 rendering system for the web LittleJS is an open source, dependency-free JavaScript game engine. It started as 2D, and this update adds a 3D renderer that draws into the same WebGL2 canvas, so a 2D game and a 3D scene can share a frame. The whole engine with 3D, Box2D physics and audio is about 150 KB gzipped. The trailer is the engine’s new website, a scrolling page over a 3D scene, with every stop a playable demo. Some of the rendering choices: - Forward rendering with a small light budget. The sun plus the 8 point or spot lights nearest the camera, chosen each frame. Lights can carry a soft additive glow, drawn in the transparent pass. - One shadow map, from the sun or from a single spotlight in its place, with blurred edges and a depth bias scaled by the light’s projection. - Reflections from an environment cube map, with Schlick Fresnel. Roughness comes from mip selection, driven by shininess, but also by how fast the reflected vector changes across a pixel, so small mirrors don’t sparkle. The lake in the trailer has an environment map of its own, rendered from the scene. - A normal hook in custom shaders. A shader snippet can define mainNormal to bend the normal per pixel before lighting, specular, Fresnel, reflection and fog. The lake’s waves are that hook, not baked normal maps. - Automatic instancing. Every opaque use of the same mesh goes out as one instanced draw. Draw state is versioned, so a batch checks a single number per draw while nothing changes, rather than comparing every material field. - Lens flares occluded by raycasts against the triangles of the scene’s meshes, rather than a depth readback. - 2D and 3D in one camera system. An orthographic camera can line up exactly with the 2D camera. In the trailer, a dolly zoom flattens the 3D view into that orthographic view, and a Breakout game playing over the train turns out to be 3D objects in the world. Also in there: height map terrain with exact raycasts, voxel maps drawn in chunks, glTF with skinning, normal maps, fog by distance or view depth, and a bloom post-process. I also built an open benchmark that runs the same sprite and lit-cube scenes through LittleJS, PixiJS, Three.js, PlayCanvas, Phaser and Babylon.js: KilledByAPixel/webgl-engine-bench Source, MIT: KilledByAPixel/LittleJS The site from the trailer: littlejsengine.com

LittleJS, my open source game engine, now does 2D and 3D! LittleJS just got the biggest update since it launched. It’s still the small, fast, dependency-free HTML5 game engine it always was, but now it also has a full 3D renderer that shares the canvas with your 2D game. 3D objects are regular LittleJS objects, with the same physics, children and timers as 2D, so the two mix freely: a 2D UI over a 3D scene, or a 2D game inside a 3D world. The trailer is the engine’s new website, which is exactly that: a scrolling page over a 3D train ride, where every stop is playable. Also new: 2D and 3D level editors built into the engine, a library of one-line particle effects, a new 2D lighting system, and a faster core. MIT licensed, as always. Site: littlejsengine.com GitHub: KilledByAPixel/LittleJS The LittleJS Game Jam is running until November 2 if you want to try it on something small: itch.io

Integrated Level Editors The level editor is built into the engine now, in 2D and 3D. Press Escape while your game runs, edit the level in place with undo, autosave and prefabs, press Escape again and keep playing. Then make it an editor for your game: github.com/KilledByAPixel/LittleJS/blob/main/EDIT… t.co

One Engine for 2D and 3D 3D objects in LittleJS are regular LittleJS objects. Put a 2D game inside a 3D world or a 2D UI over a 3D scene. Shadow maps, lights, terrain, voxels, glTF, custom shaders. Or render with Three.js if you prefer. KilledByAPixel/LittleJS t.co

Integrated Level Editors The level editor is built into the engine now, in 2D and 3D. Press Escape while your game runs, edit the level in place with undo, autosave and prefabs, press Escape again and keep playing. Then make it an editor for your game: github.com/KilledByAPixel/LittleJS/blob/main/EDIT…

One Engine for 2D and 3D 3D objects in LittleJS are regular LittleJS objects. Put a 2D game inside a 3D world or a 2D UI over a 3D scene. Shadow maps, lights, terrain, voxels, glTF, custom shaders. Or render with Three.js if you prefer. KilledByAPixel/LittleJS

LittleJS Jam 3: Cash prizes announced! LittleJS is a fully opensource, fast, and small engine for 2D or 3D games. The jam goes for the whole month of October. The theme is: ZIGZAG. Can't wait to see what you make! Jam: itch.io Engine: KilledByAPixel/LittleJS Demo: littlejsengine.com

free and open source on GitHub. 👍 KilledByAPixel/LittleJS