CODEWITHSUNDEEP
javascripthtmlcanvaswebgl
AshleysBrain
AshleysBrain

Reputation: 22591

How to clear a rectangle area in WebGL?

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?

Upvotes: 3

Views: 4784

Answers (2)

Siddharth
Siddharth

Reputation: 31

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

Upvotes: 0

user128511
user128511

Reputation:

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);

Upvotes: 16

Related Questions