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
1 like
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
2 likes · 65 views
The Gateless Gate: 49 Zen koans as procedurally generated ink-painting dioramas
Everything is generated in code: characters, animals, trees, grass, water, wind, bells and rain. The only recorded audio is the narration. Each scene has one red object that answers a touch.
Free in your browser: killedbyapixel.github.io
Open source: KilledByAPixel/GatelessGate
I made a free interactive edition of the Gateless Gate (Mumonkan), with each koan as a small scene you can visit
I was inspired by my visit to the Museum of Oriental Art in Italy, and wanted to make a piece of Buddhist art in my own way. All 49 koans and Mumon’s verses are here, with the whole book read aloud. The translation is the 1934 Senzaki and Reps version, checked line by line against the Chinese and gently modernized.
Free in your browser: killedbyapixel.github.io
Open source: KilledByAPixel/GatelessGate
4 points · 16 comments
I turned a 13th-century Zen koan book into 49 procedural 3D dioramas in Three.js
Every scene, model and sound is generated in code.
The animals share one quadruped rig, trees grow recursively, the ink look is a depth-edge post pass, and the wind and bells are synthesized live. Each scene has one red object to touch. There’s no build step and no image files!
Play it: killedbyapixel.github.io
Source: KilledByAPixel/GatelessGate
8 points · 2 comments
I wrote a short post about how it came together: the museum garden in Italy that inspired it, building the 3D scenes, and restoring the 1934 translation. 🙏
frankforce.com
Open source: KilledByAPixel/GatelessGate
I wrote a short post about how it came together: the museum garden in Italy that inspired it, building the 3D scenes, and restoring the 1934 translation. 🙏
frankforce.com
Open source: KilledByAPixel/GatelessGate
49 views
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
4 comments
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
1 point · 2 comments
Made for AI
LittleJS is small and fully documented in one file, which is exactly what coding AIs are good at.
Now there is a Claude Code plugin. Ask for a game, get a complete playable project in minutes. Templates and prompts for other AIs too.
KilledByAPixel/LittleJS-AI
19 views
Mentions
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
The Gateless Gate: 49 Zen koans as procedurally generated ink-painting dioramas Everything is generated in code: characters, animals, trees, grass, water, wind, bells and rain. The only recorded audio is the narration. Each scene has one red object that answers a touch. Free in your browser: killedbyapixel.github.io Open source: KilledByAPixel/GatelessGate
I made a free interactive edition of the Gateless Gate (Mumonkan), with each koan as a small scene you can visit I was inspired by my visit to the Museum of Oriental Art in Italy, and wanted to make a piece of Buddhist art in my own way. All 49 koans and Mumon’s verses are here, with the whole book read aloud. The translation is the 1934 Senzaki and Reps version, checked line by line against the Chinese and gently modernized. Free in your browser: killedbyapixel.github.io Open source: KilledByAPixel/GatelessGate
I turned a 13th-century Zen koan book into 49 procedural 3D dioramas in Three.js Every scene, model and sound is generated in code. The animals share one quadruped rig, trees grow recursively, the ink look is a depth-edge post pass, and the wind and bells are synthesized live. Each scene has one red object to touch. There’s no build step and no image files! Play it: killedbyapixel.github.io Source: KilledByAPixel/GatelessGate
I wrote a short post about how it came together: the museum garden in Italy that inspired it, building the 3D scenes, and restoring the 1934 translation. 🙏 frankforce.com Open source: KilledByAPixel/GatelessGate
I wrote a short post about how it came together: the museum garden in Italy that inspired it, building the 3D scenes, and restoring the 1934 translation. 🙏 frankforce.com Open source: KilledByAPixel/GatelessGate
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
Made for AI LittleJS is small and fully documented in one file, which is exactly what coding AIs are good at. Now there is a Claude Code plugin. Ask for a game, get a complete playable project in minutes. Templates and prompts for other AIs too. KilledByAPixel/LittleJS-AI