feat: deprecate disable render

docs/api/tres-canvas.md

@@ -78,7 +78,7 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
 | **depth** | Whether the drawing buffer has a [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) of at least 16 bits. | `true` |
 | **renderMode** | Render mode, can be `always`, `on-demand` or `manual`. See [Performance](../advanced/performance)  | `always` |
-| **disableRender** | Disable render on requestAnimationFrame, useful for PostProcessing | `false` |
+| **~~disableRender~~** | **⚠️ Deprecated**: since version 4.2. Use [`take-over render` approach](https://docs.tresjs.org/api/composables.html#take-over-the-render-loop) instead.  | `false` |
 | **failIfMajorPerformanceCaveat** | Whether the renderer creation will fail upon low performance is detected. See [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |
 | **logarithmicDepthBuffer** | Whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) optimization and can cause a decrease in performance. | `false` |
 | **outputColorSpace** | Defines the output encoding | `LinearEncoding` |

playground/src/pages/basic/index.vue

@@ -52,7 +52,6 @@ const toonTealMaterial = new MeshToonMaterial({
   <TresCanvas
     ref="canvasRef"
     v-bind="state"
-    @render="onRender"
   >
     <TresPerspectiveCamera
       :position="[11, 11, 11]"

src/components/TresCanvas.vue

@@ -10,7 +10,6 @@ import * as THREE from 'three'
 import type { App, Ref } from 'vue'
 import {
   Fragment,
-  computed,
   createRenderer,
   defineComponent,
   getCurrentInstance,
@@ -55,6 +54,9 @@ export interface TresCanvasProps
   camera?: TresCamera
   preset?: RendererPresetsType
   windowSize?: boolean
+  /**
+   * @deprecated since version 4.2. Use `take-over render loop` approach instead. To be fully removed on v5. See https://docs.tresjs.org/api/composables.html#take-over-the-render-loop
+   */
   disableRender?: boolean
 }
 
@@ -65,6 +67,9 @@ const props = withDefaults(defineProps<TresCanvasProps>(), {
   stencil: undefined,
   antialias: undefined,
   windowSize: undefined,
+  /**
+   * @deprecated since version 4.2. Use `take-over render loop` approach instead. To be fully removed on v5. See https://docs.tresjs.org/api/composables.html#take-over-the-render-loop
+   */
   disableRender: undefined,
   useLegacyLights: undefined,
   preserveDrawingBuffer: undefined,
@@ -144,8 +149,6 @@ const dispose = (context: TresContext, force = false) => {
   mountCustomRenderer(context)
 }
 
-const disableRender = computed(() => props.disableRender)
-
 const context = shallowRef<TresContext | null>(null)
 
 defineExpose({ context, dispose: () => dispose(context.value as TresContext, true) })
@@ -157,7 +160,6 @@ onMounted(() => {
     scene: scene.value as TresScene,
     canvas: existingCanvas,
     windowSize: props.windowSize ?? false,
-    disableRender: disableRender.value ?? false,
     rendererOptions: props,
     emit,
   })

src/composables/useRenderer/index.ts

@@ -111,7 +111,6 @@ export function useRenderer(
     options: UseRendererOptions
     emit: EmitEventFn
     contextParts: Pick<TresContext, 'sizes' | 'camera' | 'render'> & { invalidate: () => void, advance: () => void }
-    disableRender: MaybeRefOrGetter<boolean>
   },
 ) {
   const webGLRendererConstructorParameters = computed<WebGLRendererParameters>(() => ({

src/composables/useTresContextProvider/index.ts

@@ -88,14 +88,12 @@ export function useTresContextProvider({
   scene,
   canvas,
   windowSize,
-  disableRender,
   rendererOptions,
   emit,
 }: {
   scene: TresScene
   canvas: MaybeRef<HTMLCanvasElement>
   windowSize: MaybeRefOrGetter<boolean>
-  disableRender: MaybeRefOrGetter<boolean>
   rendererOptions: UseRendererOptions
   emit: EmitEventFn
 
@@ -150,7 +148,6 @@ export function useTresContextProvider({
       emit,
       // TODO: replace contextParts with full ctx at https://github.com/Tresjs/tres/issues/516
       contextParts: { sizes, camera, render, invalidate, advance },
-      disableRender,
     },
   )