[SOLVED] What to use a renderer's scissor for?

What are practical use cases for using Scissor?

This helps a little: https://www.khronos.org/opengl/wiki/Scissor_Test

Any cool tricks that scissor is specifically good for?

EDIT: I’m not sure how it even works. f.e., it just goes back, but I was expecting the rest of the viewport to stay rendered: https://codepen.io/trusktr/pen/jGXRGV. Seems like I’m missing something simple to make the “overlay” draw on top of the previous stuff.

This is explained in so many threads and forums. Give google a try. Example:

1 Like

Thanks, I didn’t know it was a GL thing initially. After seeing a bunch of examples of glScissor, I don’t see why in my above example the area outside the scissor is all black. How do I draw the original scene, then draw it again in the scissor area on top of the original scene?

I’ve updated your code. Have a closer look what’s happening in the render() function: https://codepen.io/anon/pen/EwrbGZ

Also have a look at this example: https://threejs.org/examples/index.html#webgl_multiple_views

1 Like

I had forgotten the scene andcamera arguments for the second render call in my original example and I’ve fixed it, but the result is the same anyways.

After looking at yours, here’s my new try but I still can’t get it: https://codepen.io/trusktr/pen/KXEzVq

But still no luck. In mine I’m calling setScissor and setViewport before each render call. What am I still missing?

EDIT: Ah, I see, I need to call the setScissor and setViewport functions before each call, otherwise the next animation frame will have the wrong scissor. And setScissorTest(true) can be called in init code.

@Mugen87 So any time we use scissor to draw more stuff than just a single render call, it will always be more expensive.

Is there a way to draw something only once, then use scissor to update only part of the screen so that we can get better performance?

For example, suppose we draw something to the whole display in the first frame, but all frames after that we only want to update the bottom right corner (suppose the only thing changing is a spinning logo in the bottom right corner, otherwise nothing else changes at all).

I’m guessing we’d have to render the initial scene to a texture but still have to draw the texture each frame, then just draw in the bottom right corner with scissor. Is that the best way to only update parts of the screen?

I’m not sure it’s the best way but a texture based approach sounds reasonable in this case.

1 Like

Is there another way to keep static pixels in the viewport, and just update only a portion of the viewport?

I found this on OpenGL.org.

TLDR:

if you really have a large amount of static content that is not affected by camera movement or the like, you can render it once into a texture and then each frame the first thing you render is a full screen quad with that texture applied.

And then we render only part of the screen with a scissor.

Is there another way to keep static pixels in the viewport, and just update only a portion of the viewport?

I have not tested it, but would it be an option to disable autoclear on the color buffer, and then just clear the scissored area before updating it?

Here’s a very interesting use of scissor: https://keithclark.co.uk/labs/3d-model-custom-element/examples/tests/

Look for the “Perspective scrolling test” example, then scroll horizontally, and the WebGL ducks are clipped (thanks to scissor).

Look for the “Perspective scrolling test” example, then scroll horizontally, and the WebGL ducks are clipped (thanks to scissor).

Hm. Do you have any reason to believe that this is because of scissor? This is expected behavior for a canvas in a div which has style.overflow="scroll".