Fixed Update Loop

Questions
10

Hey!
I was thinking about how to mimic the Unity’s FixedUpdate method. I don’t think there is a solution using the main thread so you have to use a webworker which will loop forever on maximum speed and you can send back messages to the main thread at fixed intervals.

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon Template</title>

    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
      }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
  </head>

  <body>
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <!-- touch-action="none" for best results from PEP -->

    <script>
      const canvas = document.getElementById("renderCanvas");
      const engine = new BABYLON.Engine(canvas, true);

      const createScene = function () {
        const scene = new BABYLON.Scene(engine);

        BABYLON.MeshBuilder.CreateBox("box", {});

        const camera = new BABYLON.ArcRotateCamera(
          "camera",
          -Math.PI / 2,
          Math.PI / 2.5,
          15,
          new BABYLON.Vector3(0, 0, 0)
        );
        camera.attachControl(canvas, true);
        const light = new BABYLON.HemisphericLight(
          "light",
          new BABYLON.Vector3(1, 1, 0)
        );

        return scene;
      };

      const scene = createScene(); //Call the createScene function
      let frames = 0;
      let steps = 0;
      engine.runRenderLoop(function () {
        frames++;
        scene.render();
      });

      const worker = new Worker("worker.js");
      worker.addEventListener("message", (e) => {
        steps++;
        console.log("fixedUpdate: steps", steps, "frames", frames);
      });
      worker.postMessage({ deltaTime: 1 / 60 });

      window.addEventListener("resize", function () {
        engine.resize();
      });
    </script>
  </body>
</html>

worker.js

self.onmessage = function (evt) {
  const deltaTime = evt.data.deltaTime * 1000;
  let lastNow = performance.now();

  while (true) {
    const now = self.performance.now();
    if (now > lastNow + deltaTime) {
      lastNow = now;
      self.postMessage("fixedUpdate");
    }
  }
};

I’m running on 100 FPS so:
image