feat: 423 enable on demand render mode usage

[alvarosabu]

Closes #430

Controls

• [x] OrbitControls
• [x] CameraControls
• [x] MapControls
• [x] TransformControls
• [x] KeyboardControls
• [x] PointerLockControls
• [x] ScrollControls

Abstractions

• [x] Levioso
• [x] Text3D
• [x] MouseParallax
• [x] FBO/UseFBO
• [ ] ⚠️ Lensflare (see bellow https://github.com/Tresjs/cientos/pull/436#issuecomment-2169343624)
• [x] Sampler
• [ ] 🚫 useSurfaceSampler (see #440)
• [x] Reflector
• [ ] ⚠️ AnimatedSprite (see bellow https://github.com/Tresjs/cientos/pull/436#issuecomment-2169343624)
• [ ] ❓ Positional Audio (@andretchen0 Should?)

Staging

• [x] Smoke
• [x] Precipitation
• [x] Stars
• [x] Environment/useEnvironment
• [x] Backdrop (Doesnt need it)
• [] 🚫 Contact Shadow (broken component)
• [x] Sky
• [ ] 🚫 Sparkles (broken component)(Done by @andretchen0 here #446
• [x] Ocean
• [ ] ⚠️ Fit (see bellow https://github.com/Tresjs/cientos/pull/436#issuecomment-2169343624)

Materials

• [x] WobbleMaterial
• [x] GlassMaterial (Doesnt need it)
• [x] HolographicMaterial
• [x] ReflectionMaterial
• [x] CustomShaderMaterial

Loaders

• [x] SVG (Doesnt need it)
• [x] useGLTF (Doesnt need it)
• [x] useVideoTexture (Doesnt need it)

Shapes

• [x] CatmullRomCurve3 (Doesnt need it)
• [x] Line2 (Doesnt need it)
• [x] Superformula (Doesnt need it)
• [x] RoundedBox (Doesnt need it)

Misc

• [x] HTML (Doesnt need it)
• [x] Stats/StagsGI (Doesnt need it)
• [x] BakeShadows (Doesnt need it)
• [x] GLTFExporter

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[alvarosabu]

Hey @andretchen0 something weird happened with some demos when I tried to test and implement on-demand invalidation. For some reason render-mode="on-demand" doesn't seem to do anything on this demo. But I can't find anything on the respective components that could be automatically invalidating the scene 😵‍💫

render-mode="manual" does work as expected.

Demos:

• Lensflare
• AnimatedSprites
• Fit

[andretchen0]

Hey @alvarosabu ,

Looking at the code, there are 2 cases:

Invalidated by the demo

• In LensflareDemo, on-demand is invalidated by setting props in the demo: <TresPointLight :position="[x, 0, z]">
• This is also the case in FitDemo: <TresGroup :rotation="[rx0, ry0, rz0]" :position="[x0, y0, z0]" :scale="[sx0, sy0, sz0]">

Invalidated by the component

• For AnimatedSprite, the component itself will typically set several props when the shown frame changes, causing invalidation in on-render, e.g.: ` <TresSprite :scale="[scaleX, scaleY, 1]" :position="[positionX, positionY, 0]"

  `

How can I help?

• What would a solution look like here?
• Would you like me to code it up and push here?

[alvarosabu]

Hey @alvarosabu ,

Looking at the code, there are 2 cases:

Invalidated by the demo

• In LensflareDemo, on-demand is invalidated by setting props in the demo: <TresPointLight :position="[x, 0, z]">
• This is also the case in FitDemo: <TresGroup :rotation="[rx0, ry0, rz0]" :position="[x0, y0, z0]" :scale="[sx0, sy0, sz0]">

Invalidated by the component

• For AnimatedSprite, the component itself will typically set several props when the shown frame changes, causing invalidation in on-render, e.g.: <TresSprite :scale="[scaleX, scaleY, 1]" :position="[positionX, positionY, 0]" >

How can I help?

• What would a solution look like here?
• Would you like me to code it up and push here?

Ohhhh ok I wanted to confirm if it was invalidated due to the prop changes, you are right. That would mean that potentially we don't need to add anything extra for the AnimatedSprite since the invalidation happens internally.

I will try to remove the elements on the demo that invalidate (without committing changes) so I can test the internal invalidation for the other two 👍

[andretchen0]

Recent merges in Tres core main branch should mean that the components that had been broken by v4 work again – Sparkles and ContactShadows.

• I have tested Sparkles by importing it in a Tres playground using the updated main.
• I have not tested ContactShadows.

I pushed the on-demand changes to Sparkles here:

https://github.com/Tresjs/cientos/pull/446

[alvarosabu]

I have not tested ContactShadows.

I just merged the lastest v4 branch here with the 4.2 of @tresjs/core and Contact Shadows is still broken, so probably it wasn't due to the primitives changes. @andretchen0 i think we can merge this one first and tackle the others in their respective PRs, wdyt?

[andretchen0]

I have not tested ContactShadows.

I just merged the lastest v4 branch here with the 4.2 of @tresjs/core and Contact Shadows is still broken, so probably it wasn't due to the primitives changes. @andretchen0 i think we can merge this one first and tackle the others in their respective PRs, wdyt?

Sure thing. I'll have a look at ContactShadows. Edit: Moving ContactShadows to Discord.