Here’s the threejs example “multiple elements” that works when we render every scene in each frame:
However I have a use case where I want to render a scene only if it was updated, rather than rendering all scenes. I emulated this using the same threejs example, but rendering only a subset of scenes every so often (not ever animation frame) and it causes flickering:
It seems like there should be a way not to clear the whole canvas each time.
How would you solve that without rendering every scene each time (to avoid CPU/GPU cost)?
I’m imagining a solution is to render to multiple render targets or quad+texture, but was hoping not to add that extra machinery.
Aha, WebGLRenderer.preserveDrawingBuffer does the trick!
This wasn’t clear because I thought I wasn’t clearing and it wouldn’t be cleared.
That introduces another bag of issues, f.e. scrolling causes scenes to be visually out of place. I suppose we need to render all scenes on scroll, or render them sometimes to a target/texture then render the texture on scroll, or something.
code is here, the vanilla bits you can still carry over: drei/View.tsx at 8ec3ec8e1b123773e294c0c83273ee6514f2fad0 · pmndrs/drei · GitHub i’m not 100% what the reasoning was but offscreen gets cleared, everything else doesn’t. this works without preserveDrawingBuffer. this particular demo animates the shapes which requires a running loop, but rendering on demand did work as well.
generally, things outside the frustum aren’t rendered by three without you having to do anything, all the lower views shouldn’t take up gpu time.
Thanks @drcmda. That example will always work because all scenes are rendering on every frame (similar to the very first example above that is working).
Where the first example breaks is when only a subset of the visible scenes rendered in a given animation frame.
Do you have an example that renders only a subset of the visible scenes within a frame, rather than all scenes?
