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

[andretchen0]

Describe the bug

Problem

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

When onLoop is initially called, e.g.:

• camera.aspect has its default value of 1, regardless of screen aspect
• renderer.domElement.width has a value of 0
• sizes.width has a value of 0

These values change on the subsequent frame, making coding/debugging more difficult than necessary.

Solution

• useRenderLoop() should be dependent on the context's renderer.
• The system shouldn't tick onLoop until the renderer is ready.

Context

• Calling pause immediately after onLoop doesn't do anything #251
• Multiple instances of useRenderLoop per page share state #252

Reproduction

https://stackblitz.com/edit/tresjs-basic-t6zfd2?file=src%2Fcomponents%2FUseRenderer.vue

Steps to reproduce

See StackBlitz.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @tresjs/cientos: ^3.5.1 => 3.5.1 
    @tresjs/core: ^3.4.1 => 3.4.1 
    @tresjs/eslint-config-vue: ^0.2.1 => 0.2.1 
    vite: ^4.5.0 => 4.5.0

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[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: