WebGL has a clear method that clears an entire surface. What's the best way to clear just a particular rectangle of the surface? For example I want to set a 100x100 box of pixels starting at (50, 50) to all zeroes (ARGB 0, 0, 0, 0). All I can think of right now is drawing a quad with a fragment shader that writes zeroes. Is there not an easier way?

WebGL has a clear method that clears an entire surface. What's the best way to clear just a particular rectangle of the surface? For example I want to set a 100x100 box of pixels starting at (50, 50) to all zeroes (ARGB 0, 0, 0, 0). All I can think of right now is drawing a quad with a fragment shader that writes zeroes. Is there not an easier way?

• javascript
• html
• canvas
• webgl

2 Answers 2

You can use the SCISSOR test to constrain clearing (and rendering in general) to a rectangle.

// turn on the scissor test.
gl.enable(gl.SCISSOR_TEST);

// set the scissor rectangle.
gl.scissor(x, y, width, height);

// clear.
gl.clearColor(r, g, b, a);
gl.clear(gl.COLOR_BUFFER_BIT ...);

// turn off the scissor test so you can render like normal again.
gl.disable(gl.SCISSOR_TEST);

anything outside the viewport if within the webgl context will be drawn, anything outside scissor will be clipped and not drawn at all !