Running a game loop on a web worker

revised.ts

export const createNewPhysicsLoopWebWorker = (stepRate: number) => {
    return new Worker('data:application/javascript,' +
        encodeURIComponent(`
            
            var start = performance.now();
            var updateRate = ${stepRate};
            
            function getNow() {
                return start + performance.now();
            }
            
            var lastUpdate = -1;
            var accumulator = 0;
        
            function step() {
                if (lastUpdate < 0) {
                    lastUpdate = getNow() - updateRate;
                }
                var now = getNow();
                var delta = now - lastUpdate;
                lastUpdate = now;

                accumulator += delta;

                if (accumulator > updateRate) {
                    accumulator = 0;
                    self.postMessage('step');
                } else {
                    var difference = updateRate - accumulator;
                    if (difference < 3) {
                        var start = getNow();
                        var endTime = start + difference;
                        var now = getNow(); 
                        while (now < endTime) {    
                            now = getNow();
                        }
                        accumulator = 0;
                        self.postMessage('step');
                    }
                }
                
                setTimeout(step, updateRate - 2);
                
            }
            
            step()
            
        `) );
}

webWorkerGameLoop.js

const worker = new Worker('data:application/javascript,' +
            encodeURIComponent(`
            
            var start = performance.now();
            var updateRate = ${stepRate};
            
            function getNow() {
                return start + performance.now();
            }
            
            var lastUpdate = getNow();
            var accumulator = 0;
            
            while(true) {
                var now = getNow();
                var delta = now - lastUpdate;
                lastUpdate = now;
                
                accumulator += delta;
                
                if (accumulator > updateRate) {
                    accumulator -= updateRate;
                    self.postMessage('step')
                }
                
            }
        `) );

        worker.onmessage = (event) => {
            if (event.data === 'step') {
                stepWorld()
            }
        }

Because setTimeout defaults to a minimum of 4ms delay, methods such as the ones used here don't quite work, as the 4ms delay is typically enough for your updates to fall out of rhythm.

The solution? Create a dedicated web worker that is dedicated solely for determining when your game should update. In this case you can use the while true loop approach without blocking any other code from executing. As far as I can tell so far, it's working pretty flawlessly.