Performance discussion

[alvarosabu]

Vue reactivity is based on Proxy. This allows Vue 3 to automatically track changes to data objects and update the corresponding DOM elements whenever the data changes.

Since we are rendering a scene and updating it in every frame (60FPS), that means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update the scene 60 times per second. This is not a good idea 😅 and will be detrimental to performance, especially in big scenes

Here is a benchmark of the difference between using a Proxy object and a plain object.

Source: Proxy vs Plain Object

To discuss

• How can we improve the performance of the core (ex use shallowRef instead of ref) See Reactivity Advanced API
• How can we measure the performance of a scene, something like https://github.com/utsuboco/r3f-perf, maybe new package? #34

One real world example is updating an instance for animation:

<script setup lang="ts">
const boxRef: Ref<TresInstance | null> = ref(null)

onLoop(({ _delta, elapsed }) => {
  if (boxRef.value) {
    boxRef.value.rotation.y += 0.01
    boxRef.value.rotation.z = elapsed * 0.2
  }
})
</script>

<template>
  <TresMesh ref="boxRef" :scale="1" cast-shadow>
    <TresBoxGeometry :args="[1, 1, 1]" />
    <TresMeshStandardMaterial v-bind="pbrTexture" />
  </TresMesh>
</template>

Here we are getting the ref for the mesh with the Mesh instance so we can update the rotation, but boxRef remains a Proxy, a solution would be to unref or use a shallowRef since Direct template ref are not available see vuejs/core#1227

I would love to have your input here @wheatjs @kissu @Astanusic

Food for though

https://discoverthreejs.com/tips-and-tricks/#performance