Generate instances on build-time rather than run-time

[alvarosabu]

Goal

Generate three-shakeable components on build time to avoid the need for a catalog of global components. This will be probably a BREAKING CHANGE, especially for cientos.

<script setup lang="ts">

import { TresCanvas, TresPerspectiveCamera, TresScene, TresAmbienLight, useRenderLoop } from '@tresjs/core' 
import { OrbitControls, TransformControls } from '@tresjs/cientos'

const sphereRef = ref()

const { onLoop } = useRenderLoop()

onLoop(({ elapsed }) => {
  sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1
})
</script>
<template>
  <TresCanvas v-bind="state">
    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
    <OrbitControls make-default />
    <TresScene>
      <TresAmbientLight :intensity="0.5" />
      <TransformControls mode="scale" :object="sphereRef" />

      <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
        <TresSphereGeometry />
        <TresMeshToonMaterial color="#FBB03B" />
        <!-- <TresMeshToonMaterial color="#FBB03B" /> -->
      </TresMesh>
      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
        <TresMeshToonMaterial />
      </TresMesh>
      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
    </TresScene>
  </TresCanvas>
</template>

• Using a vite plugin to generate all the components from THREE instances (Except Scene)
• Each component should locally register components on the slots (is possible?)
• Typescript Definition for the components generated from the ThreeJS instance
• Include them in the final bundle
• Strategy for replacing catalog extend
• Update the way cientos extends the catalog

[alvarosabu]

@wheatjs You also mention you wanted to work on something like this right?

[wheatjs]

For sure, the type definition parts makes sense to me. What do you mean by the performance aspect?

[alvarosabu]

@wheatjs I was discussing with @Tahul, so right now instance components are generated on runtime, which contributes on blocking the main-thread if we generate the components on build-time we would not need to do this.

[wheatjs]

@alvarosabu sounds good to me, I think maybe using https://github.com/unjs/unplugin would be a good idea

[alvarosabu]

@wheatjs so this unplugin we can use it to generate the components whenever vite is building, I guess with a hook 🤔

[alvarosabu]

Maybe we can continue our parallel conversations about the topic here @wheatjs @Tahul