Combine frame & sync ops to avoid erratic renders

* fixes bodies sync bug

Co-authored-by: Simon Hales <simon.h@iconinteractive.com>

Author: simonghales

examples/yarn.lock

@@ -1437,18 +1437,6 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
-"@pmmmwh/react-refresh-webpack-plugin@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.3.3.tgz#40a3d674f42a011b7f30a9609aa8fb68ec3c39c9"
-  integrity sha512-uc6FmPEegAZawSHjUMFQwU7EjaDn7zy1iD/KD/wBROL9F4378OES8MKMYHoRAKT61Fk7LxVKZSDR5VespMQiqw==
-  dependencies:
-    ansi-html "^0.0.7"
-    error-stack-parser "^2.0.6"
-    html-entities "^1.2.1"
-    lodash.debounce "^4.0.8"
-    native-url "^0.2.6"
-    schema-utils "^2.6.5"
-
 "@react-spring/animated@9.0.0-rc.3":
   version "9.0.0-rc.3"
   resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.0.0-rc.3.tgz#e792cb76aacecfc78db2be6020ac11ce96503eb5"
@@ -3880,14 +3868,6 @@ cssstyle@^2.2.0:
   dependencies:
     cssom "~0.3.6"
 
-customize-cra-react-refresh@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/customize-cra-react-refresh/-/customize-cra-react-refresh-1.1.0.tgz#0bb3723028b94d8f6f97af26b1f4aec0636271df"
-  integrity sha512-v7moZc3mv0ZnM9hUnC9YpUhjpWkCjYSL/oLx/y8o5CKFOnd3yOPxlmfMjrmpWTVPbpOIFTCPGjDIAiEYu63TGg==
-  dependencies:
-    "@pmmmwh/react-refresh-webpack-plugin" "^0.3.2"
-    react-refresh "^0.8.1"
-
 customize-cra@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/customize-cra/-/customize-cra-1.0.0.tgz#73286563631aa08127ad4d30a2e3c89cf4e93c8d"
@@ -7058,11 +7038,6 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
 lodash.flow@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
@@ -9253,7 +9228,7 @@ react-reconciler@0.26.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
-react-refresh@^0.8.1, react-refresh@^0.8.3:
+react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==

src/Provider.tsx

@@ -30,10 +30,10 @@ type WorkerFrameMessage = {
   data: Buffers & {
     op: 'frame'
     observations: [string, any]
-    active: boolean
+    active: boolean,
+    bodies?: string[]
   }
 }
-type WorkerSyncMessage = { data: { op: 'sync'; bodies: string[] } }
 export type WorkerCollideEvent = {
   data: {
     op: 'event'
@@ -79,7 +79,7 @@ export type WorkerRayhitEvent = {
   }
 }
 type WorkerEventMessage = WorkerCollideEvent | WorkerRayhitEvent
-type IncomingWorkerMessage = WorkerFrameMessage | WorkerSyncMessage | WorkerEventMessage
+type IncomingWorkerMessage = WorkerFrameMessage | WorkerEventMessage
 
 export default function Provider({
   children,
@@ -143,6 +143,12 @@ export default function Provider({
     worker.onmessage = (e: IncomingWorkerMessage) => {
       switch (e.data.op) {
         case 'frame':
+          if (e.data.bodies) {
+            bodies.current = e.data.bodies.reduce(
+              (acc, id) => ({ ...acc, [id]: (e.data as any).bodies.indexOf(id) }),
+              {}
+            )
+          }
           buffers.positions = e.data.positions
           buffers.quaternions = e.data.quaternions
           e.data.observations.forEach(([id, value]) => subscriptions[id](value))
@@ -153,12 +159,6 @@ export default function Provider({
           }
           if (e.data.active) invalidate()
           break
-        case 'sync':
-          bodies.current = e.data.bodies.reduce(
-            (acc, id) => ({ ...acc, [id]: (e.data as any).bodies.indexOf(id) }),
-            {}
-          )
-          break
         case 'event':
           switch (e.data.type) {
             case 'collide':

src/worker.js

@@ -59,8 +59,10 @@ function createShape(type, args) {
   }
 }
 
+let bodiesNeedSyncing = false
+
 function syncBodies() {
-  self.postMessage({ op: 'sync', bodies: world.bodies.map((body) => body.uuid) })
+  bodiesNeedSyncing = true
   bodies = world.bodies.reduce((acc, body) => ({ ...acc, [body.uuid]: body }), {})
 }
 
@@ -116,16 +118,18 @@ self.onmessage = (e) => {
         }
         observations.push([id, value])
       }
-      self.postMessage(
-        {
-          op: 'frame',
-          positions,
-          quaternions,
-          observations,
-          active: world.hasActiveBodies,
-        },
-        [positions.buffer, quaternions.buffer]
-      )
+      const message = {
+        op: 'frame',
+        positions,
+        quaternions,
+        observations,
+        active: world.hasActiveBodies,
+      }
+      if (bodiesNeedSyncing) {
+        message.bodies = world.bodies.map((body) => body.uuid)
+        bodiesNeedSyncing = false
+      }
+      self.postMessage(message, [positions.buffer, quaternions.buffer])
       break
     }
     case 'addBodies': {