I’ve heard that certain algorithms like sorting (or perhaps all algorithms) are improved quite a bit when the accessed data has high memory-locality (e.g. the CPU can load all of the relevant information in it’s cache for processing, instead of hitting RAM). A common way to work with this is using the Entity Component System (ECS) software architecture. However, it can be difficult to realize this for interpreted or OOP languages (Java, Python, Javscript), as they often don’t offer the developer as much control over their object memory location. My question is:

Is it possible to use an ECS-style architecture in Javascript? And can it use that to improve memory locality to get algorithmic performance improvements?

To test this, I created a complex-enough benchmark of… “balls bouncing around in a box”! This follows standard 2d physics engine techniques:

• A “broad-phase” collision step (AKA “do bounding boxes intersect?”)
• A “narrow-phase” collision step (AKA “given these intersecting boxes, resolve collisions!”)

And of course, I got very carried away and ended up creating a ton of benchmark types below. Try it for yourself!

This is my first attempt at 2d perlin noise, rendering with three.js.

Movement:

• Click & drag
• WASD
• tilt: EQ
• up/down: RF

As the camera moves around, the chunks will load in and out. This also splits the chunk geometry into groups to allow different materials to be used in the chunk. Simple height-based colors are used here.

Movement:

• Click & drag
• WASD
• tilt: EQ
• up/down: RF

Second iteration of noise & hexagons, this time I have chunking working. And the chunk is rendered as a single mesh, instead of one mesh per polygon. Uses three.js for rendering.

Movement:

• Click & drag
• WASD
• tilt: EQ
• up/down: RF