feat: update renderer access in components to use instance reference

- Updated various components to access the renderer through `renderer.instance.value` instead of `renderer.value`, ensuring compatibility with the latest core changes.
- Adjusted related watch and invalidate calls to check for `renderer.canBeInvalidated.value` before invoking invalidate, improving performance and stability.
- Refactored multiple files including shapes, controls, and materials to reflect these changes, enhancing overall code consistency and maintainability.

Author: alvarosabu

playground/vue/src/pages/shapes/ScreenQuadDemo.vue

@@ -40,8 +40,8 @@ const mat = new RawShaderMaterial({
 
 let r: WebGLRenderer
 function onReady({ renderer }) {
-  r = renderer.value
-  renderer.value.getDrawingBufferSize(resolution)
+  r = renderer.instance.value
+  renderer.instance.value.getDrawingBufferSize(resolution)
   target.setSize(resolution.x, resolution.y)
   mat.uniforms.uResolution.value = resolution
 }

src/core/abstractions/AnimatedSprite/component.vue

@@ -76,10 +76,12 @@ const emit = defineEmits<{
   (e: 'loop', frameName: string): void
 }>()
 
-const { invalidate } = useTresContext()
+const { renderer } = useTresContext()
 
 watch(props, () => {
-  invalidate()
+  if (renderer.canBeInvalidated.value) {
+    renderer.invalidate()
+  }
 })
 
 const positionX = ref(0)

src/core/abstractions/CubeCamera/useCubeCamera.ts

@@ -24,7 +24,7 @@ export interface CubeCameraOptions {
 
 export function useCubeCamera(props: CubeCameraOptions) {
   let { resolution, renderer, scene, envMap, fog, near, far } = props
-  renderer = renderer ?? useTres().renderer
+  renderer = renderer ?? useTres().renderer.instance
   scene = scene ?? useTres().scene
 
   const updateProps = () => {

src/core/abstractions/GlobalAudio.ts

@@ -91,7 +91,7 @@ export const GlobalAudio = defineComponent<AudioProps>({
     }, { immediate: true })
 
     const selector = document.getElementById(props.playTrigger ?? '')
-    const btnPlay = selector || renderer.value.domElement
+    const btnPlay = selector || renderer.instance.value.domElement
     useEventListener(btnPlay, 'click', () => {
       if (sound.isPlaying) {
         sound.pause()

src/core/abstractions/Levioso.vue

@@ -33,7 +33,7 @@ defineExpose({
   const { onBeforeRender } = useLoop()
   let elapsed = START_OFFSET
 
-  onBeforeRender(({ delta, invalidate }) => {
+  onBeforeRender(({ delta /* invalidate */ }) => {
     if (!groupRef.value) { return }
 
     elapsed += delta * props.speed
@@ -45,7 +45,8 @@ defineExpose({
     group.rotation.z = Math.sin(theta) * AMPLITUDE_ROTATION_Z * props.rotationFactor
     group.position.y = MathUtils.mapLinear(Math.sin(theta), -1, 1, props.range[0], props.range[1]) * props.floatFactor
 
-    invalidate()
+    // TODO: comment this until invalidate is back in the loop callback on v5
+    // invalidate()
   })
 }
 </script>

src/core/abstractions/MouseParallax.vue

@@ -54,13 +54,13 @@ const { disabled, factor, ease, local } = toRefs(props)
 const mouseOptions: UseMouseOptions = {}
 
 if (local.value) {
-  mouseOptions.target = renderer.value.domElement
+  mouseOptions.target = renderer.instance.value.domElement
   mouseOptions.type = 'client'
 }
 
 const { x, y } = useMouse(mouseOptions)
 const { width, height } = local.value
-  ? useElementSize(renderer.value.domElement)
+  ? useElementSize(renderer.instance.value.domElement)
   : useWindowSize()
 
 const cameraGroupRef = shallowRef<Group>()
@@ -81,7 +81,7 @@ const cursorY = computed(() => -(y.value / height.value - 0.5) * _factor.value[1
 
 const { onBeforeRender } = useLoop()
 
-onBeforeRender(({ delta, invalidate }) => {
+onBeforeRender(({ delta /* invalidate */ }) => {
   if (
     disabled.value
     || !cameraGroupRef.value
@@ -95,7 +95,8 @@ onBeforeRender(({ delta, invalidate }) => {
   cameraGroupRef.value.position.y
     += (cursorY.value - cameraGroupRef.value.position.y) * _ease.value[1] * delta
 
-  invalidate()
+  // TODO: comment this until invalidate is back in the loop callback on v5
+  // invalidate()
 })
 
 watch(

src/core/abstractions/Reflector.vue

@@ -72,7 +72,7 @@ const props = withDefaults(defineProps<ReflectorProps>(), {
   shader: Reflector.ReflectorShader,
 })
 
-const { extend, invalidate } = useTresContext()
+const { extend, renderer } = useTresContext()
 
 const reflectorRef = shallowRef<Reflector>()
 
@@ -81,7 +81,11 @@ extend({ Reflector })
 const { color, textureWidth, textureHeight, clipBias, multisample, shader }
   = toRefs(props)
 
-watch(props, () => invalidate())
+watch(props, () => {
+  if (renderer.canBeInvalidated.value) {
+    renderer.invalidate()
+  }
+})
 
 defineExpose({
   instance: reflectorRef,

src/core/abstractions/Text3D.vue

@@ -151,9 +151,13 @@ const {
   bevelSegments,
 } = toRefs(props)
 
-const { extend, invalidate } = useTresContext()
+const { extend, renderer } = useTresContext()
 
-watch(props, () => invalidate())
+watch(props, () => {
+  if (renderer.canBeInvalidated.value) {
+    renderer.invalidate()
+  }
+})
 
 extend({ TextGeometry })
 

src/core/abstractions/useFBO/index.ts

@@ -56,7 +56,7 @@ export function useFBO(options: FboOptions) {
   const { height, width, settings, depth, autoRender = ref(true) } = isReactive(options) ? toRefs(options) : toRefs(reactive(options))
 
   const { onBeforeRender } = useLoop()
-  const { camera, renderer, scene, sizes, invalidate } = useTresContext()
+  const { camera, renderer, scene, sizes } = useTresContext()
 
   watch(() => [width?.value, sizes.width.value, height?.value, sizes.height.value], () => {
     target.value?.dispose()
@@ -76,16 +76,18 @@ export function useFBO(options: FboOptions) {
       )
     }
 
-    invalidate()
+    if (renderer.canBeInvalidated.value) {
+      renderer.invalidate()
+    }
   }, { immediate: true })
 
   onBeforeRender(() => {
     if (autoRender.value) {
-      renderer.value.setRenderTarget(target.value)
-      renderer.value.clear()
-      renderer.value.render(scene.value, camera.value as Camera)
+      renderer.instance.value.setRenderTarget(target.value)
+      renderer.instance.value.clear()
+      renderer.instance.value.render(scene.value, camera.value as Camera)
 
-      renderer.value.setRenderTarget(null)
+      renderer.instance.value.setRenderTarget(null)
     }
   }, Number.POSITIVE_INFINITY)
 

src/core/abstractions/useSurfaceSampler/component.vue

@@ -11,9 +11,13 @@ const samplerRef = ref()
 const instancedRef = ref()
 const meshToSampleRef = ref()
 
-const { invalidate } = useTresContext()
+const { renderer } = useTresContext()
 
-watch(props, () => invalidate())
+watch(props, () => {
+  if (renderer.canBeInvalidated.value) {
+    renderer.invalidate()
+  }
+})
 
 // TODO: refactor to use watch instead.
 watchEffect(() => {