Partial Context Clearing (scissor/viewport regions)

Questions
1

So, I’m on a quest to make my system nice and efficient. I’ve hit an annoying issue with trying to clear the buffers of a small chunk of the screen rather than the full screen.

I’ve tried setting viewport and scissor and then clearing, which is working nice for making a little grid of views. However, if I leave some chunks static and redraw the others, only the redrawn views stay on the screen.

I found a stackoverflow that explained that I have two options:

  1. preserveDrawingBuffer: true
  2. Render using an FBO

For #1, I have set it to true, and the context still clears out anything that did not re-render for the frame. So rats. Also, it turns out, this is a poor choice as it comes with some major possible performance hits for different environments.

I have also ensured I set all autoClear options for the renderer to false.

So #2, it seems I have to work with an FBO.

I couldn’t find anything in ThreeJS that lets you fiddle with FBO’s directly. They’re all wrapped in abstracted concepts.

What would be the best abstracted concept for this use case? RenderTargets don’t seem to work well for me because they do not honor scissor and viewports that I explicitly set. Not sure if that’s a bug or not.

Can I just grab the context, create my own FBO and set it as the current FBO in use when I call three’s render as an alternative? Then I’d just set the fbo target back to null and draw the FBO’s attached texture as a Full Screen Quad.

I dunno, I’m not sure what approach I should take here or if I’m encountering odd things or not.

Thanks for any input on the matter.

[EDIT] I incorrectly said stencil above when I meant scissor

2

Did you set renderer.autoClear to false?

3

I updated my post: forgot to mention that I ‘did’ do that as well. I looked through the Three API for anything regarding clearing and deactivated it.

4

Could you setup a fiddle/pen to demonstrate the issue?

2 Likes
5

Well the fiddle showed me I’m doing something odd in my application that makes preserveDrawingBuffer not work. I’m looking into the reason why. I removed all manual clear methods and it’s still clearing out, which is a mystery. It could be coming from bouncing between two renderers which I don’t like anywho.

However, I’d still like to not use it as I have read an FBO would technically perform better. So, I’m still in need of pointers on how to handle the FBO.

6

Could you link to this post?

I’d also recommend that you set up a live example, or explain in more detail what you are trying to achieve since it’s not currently clear to me why you want to do this.

7

Sorry for the delay:

I’ll try to cut out some time to make the fiddle. But I can real quick try to clarify the ‘why’ with an example:

If I have canvas I am rendering to. Say I have a viewport at the bottom of the canvas that is a complex histogram rendering (lots of lines and geometry) but it does not change except on rare data changes, then I would NOT want my webgl context to re-render that histogram while I pan around some content I’ve created above in a larger panel.

I’d want to JUST render the panel without having to reprocess all of the complicated geometry of the histogram that didn’t change at all between frames (histogram could be hundreds of thousands of vertices).

I’ll try to pull together a better example within Fiddle. I also may have figured out how to break it like it’s showing up in my app. I just had to divert my time resources to other tasks for a bit, so might take me a while to get that example rolling :slight_smile: