Multiple Programs and Regions

Scissor Test

A scissor rectangle limits which framebuffer pixels can be changed while it is enabled.

Program

The scissor test is a simple rectangular mask. It is useful for UI panes, partial clears, and region-limited rendering.

scissor_test.html
Visuals: generated teaching cards from captured state
  • state written by this keyframe
scissor_test.html · full logical source
1<canvas id="stage" width="360" height="210"></canvas>
2<script>
3  gl.enable(gl.SCISSOR_TEST);
4  gl.scissor(48, 36, 264, 138);
5  gl.clearColor(0.08, 0.72, 0.64, 1.0);
6  gl.clear(gl.COLOR_BUFFER_BIT);
7  gl.disable(gl.SCISSOR_TEST);
8</script>

  1. Enable scissor testing

    kf: 1event 0kind: lifecycle

    Enable scissor testing.

    3gl.enable→ enabled(gl.SCISSOR_TEST);
    Only pixels inside the future scissor box can change.
    The test applies to clear and draw commands while enabled.
    State after this keyframedisabled → enabledscissor test

  2. Define the rectangular pixel box

    kf: 2event 1kind: lifecycle

    Define the rectangular pixel box.

    4gl.scissor→ 264 x 138(48, 36, 264, 138);
    The active scissor rectangle sits inside the canvas.
    Scissor coordinates are pixel-space drawing-buffer coordinates.
    State after this keyframeunset → 264 x 138scissor box

  3. Choose the clipped clear color

    kf: 3event 2kind: lifecycle

    Choose the clipped clear color.

    5gl.clearColor→ teal(0.08, 0.72, 0.64, 1.0);
    The new clear color is set, but pixels have not changed yet.
    clearColor stores state for the next clear call.
    State after this keyframedark blue → tealclear color

  4. Clear only inside the scissor box

    kf: 4event 3kind: lifecycle

    Clear only inside the scissor box.

    6gl.clear→ clipped teal rectangle(gl.COLOR_BUFFER_BIT);
    Only the scissor rectangle turns teal.
    With SCISSOR_TEST enabled, clear updates only pixels inside the box.
    State after this keyframedark blue → clipped teal rectanglepixels

  5. Disable scissor testing for later work

    kf: 5event 4kind: lifecycle

    Disable scissor testing for later work.

    7gl.disable→ disabled(gl.SCISSOR_TEST);
    The clipped clear result stays visible after disabling the test.
    Disabling state affects later commands, not pixels already written.
    State after this keyframeenabled → disabledscissor test
scissor test The scissor test rejects fragments and clear writes outside a rectangular pixel box.
partial clear A partial clear updates only a selected framebuffer region.