`useRenderLoop().onLoop` ticks before the renderer can meaningfully render

[andretchen0]

`useRenderLoop().onLoop` ticks before the renderer can meaningfully render

[andretchen0]

Hey @alvarosabu ,

The approach you mention would work for the render phase. But ideally here, this needs to keep a few other things from happening too early.

We should avoid at least one of these until the system is ready:

• starting the loop
• calling any loop callbacks

If we do either of those, there's no need to modify the render phase specifically.

I'm working on a fix.

[andretchen0]

Hey @alvarosabu !

I saw that you labelled this as PR welcome. Great! I'll be happy to submit a PR eventually.

For now, I'm trying to submit issues highlighting rough spots encountered while building things with Tres.

My hope is that in assembling the issues, we'll be able to knock all (or most) of them out at once.

[andretchen0]

Related?

This issue maybe pops up with custom shaders and HMR.

When doing off-screen rendering using a custom shader, this error is thrown on HMR:

[alvarosabu]

This usecase is covered by the new useLoop composable available on v4 https://docs.tresjs.org/api/composables.html#useloop

[andretchen0]

Hey @alvarosabu ,

This is still an issue with useLoop in the latest v4, as far as I can see. If you modify the code from the docs like this:

let logged = false
const { off } = render(({ renderer, scene, camera }) => {
  if (!logged) {
    logged = true
    console.log("canvas width/height:", renderer.domElement.width, renderer.domElement.height)
    console.log(`camera.aspect: ${camera.aspect}`);
  }
  renderer.render(scene, camera)
})

It will log this:

canvas width/height: 0 0
camera.aspect: 1

As with v3 these initial values will be changed on the next tick.

[alvarosabu]

OHHHH ok I see @andretchen0 we could add a check that if the size is !=0 it does render here:

tres/src/composables/useTresContextProvider/index.ts

Lines 196 to 199 in 8d53bba

	if (camera.value && render.frames.value > 0) {
	renderer.value.render(scene, camera.value)
	emit('render', ctx.renderer.value)
	}