Closed andretchen0 closed 3 months ago
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.
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:
This usecase is covered by the new useLoop
composable available on v4
https://docs.tresjs.org/api/composables.html#useloop
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.
OHHHH ok I see @andretchen0 we could add a check that if the size is !=0 it does render here:
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:
If we do either of those, there's no need to modify the render phase specifically.
I'm working on a fix.
Describe the bug
Problem
useRenderLoop().onLoop
ticks before the renderer can meaningfully render.When
onLoop
is initially called, e.g.:These values change on the subsequent frame, making coding/debugging more difficult than necessary.
Solution
useRenderLoop()
should be dependent on thecontext
's renderer.onLoop
until the renderer is ready.Context
251
252
Reproduction
https://stackblitz.com/edit/tresjs-basic-t6zfd2?file=src%2Fcomponents%2FUseRenderer.vue
Steps to reproduce
See StackBlitz.
System Info
Used Package Manager
npm
Code of Conduct