Taking over the render-loop

[maxibenner]

Hi,
I am still working on my canvas recorder component and I am looking for some insight.
My Canvas is set to frameloop="demand". My mesh is animated inside a useFrame hook inside of its own component. Now, from inside another component I'd like to stop the useFrame animation and continue rendering only manually. I've been trying to figure this out for a couple of days but haven't gotten anywhere. I'd be happy for any pointers.

[drcmda]

https://docs.pmnd.rs/react-three-fiber/API/hooks#taking-over-the-render-loop

function RenderComponent() {
  useFrame((state, delta) ) => {
    state.gl.render(state.scene, state.camera)
  }, 1)
  return null
} 

the 1 is like z-index, so you render on top of something else, higher comes last.

another component I'd like to stop the useFrame animation and continue rendering only manually.

This i don't understand, these two have no relation. useFrame in that one component rotates a cube. if you want to stop that then the parent communicates that with a prop:

function SpinningComponent({ dontSpin }) {
  useFrame(() => {
    if (dontSpin) { ...

<SpinningComponent dontSpin={condition} />

useFrame ties a component to the render-loop, or puts the render-loop into the hands of a component (by giving it an index), its that components responsibility now to render or else the screen stays blank. but it is not responsible for stopping/resuming the rendering, it renders when invalidation occurs.

frameloop=always renders 60 times per second, therefore it invalidates 60 times/s and that will trigger all useFrames 60 times/s. =demand renders only if props on native elements change (<mesh />, etc), or if something calls invalidate() manually, which lines up one single frame for execution.

import { invalidate } from '@react-three/fiber'

// Flag invalidation, this won't render immediately, it merely tells r3f that we want to ...
invalidate()

There's also advance which renders immediately but that's usually for testing only.

[maxibenner]

Thanks for taking the time to write this thorough answer!

I initially thought that setting a render priority on useFrame would control the global rendering. If useFrame just ties a component to the render-loop then the behavior I was observing makes much more sense.

The way I'm going about it now is to remove invalidate() from all useFrame implementations except one in a controller component from which I can then turn the loop on and off.

A little follow up questions though:
I want the recorded clip to be loopable so I am trying to tie the motion of the spinning component to the duration (in seconds) and fps (60) of the recording.

useFrame((state, delta) => {
        box.current.rotation.y += (Math.PI * 2) / (60 * duration)
    })

But for some reason the final animation always turns out about 20 frames short of a full loop. Am I calculating the rotation here right? Keep in mind that I am controlling the rendering manually now. Every frame rendered (no matter how long it takes) should account for one animation step.

Here is a simplified version of how I trigger the rendering:

useFrame(
        ({ gl }) => {
            if (recording) {

                // Progress
                if (frameCounter.current <= duration * 60) {

                    // Capture and send frame
                    const frame = gl.domElement.toDataURL()

                    // Advance counter
                    frameCounter.current += 1

                    send_frame_to_server(frame, sessionId).then(() => {

                        // Render next frame
                        gl.clearDepth()
                        gl.render(scene, camera)
                        invalidate()
                    })
                } else {

                    // Done
                    frameCounter.current = 0
                    setRecording(false)

                    // Process frames
                    start_processing(sessionId, duration, fps).then((url) => {
                        downloadResource(
                            `http://${serverUrl}/${url}`,
                            "clip.mp4"
                        )
                    })
                }
            }
        },
        recording ? 1 : 0
    )

[drcmda]

yes, using set, which you can get from useThree, with set you can change all internals. set({ frameloop: "always" }). as for intervals, i don't know too much about it but @gsimone is the expert, his input is the reason we have advance. he needed it for something similar to what you want.

[maxibenner]

set(), that's what I've been looking for. I used it wrong the first time and had disregarded it since (don't ask my how I managed to use set() wrong...)
Anyways, now it works. You are the r3f version of mugen over at three.js. Super helpful, thank you a bunch for the time you put into helping beginners here in the discussions!

[njm222]

@drcmda Can we add a note about how the frameloop property is not reactive in this section of the docs https://docs.pmnd.rs/react-three-fiber/API/canvas

[drcmda]

Would you make a quick or for this? The repo is on pmndrs called website under the docs branch

[njm222]

Yeah I'll make a quick PR for this