Skip to content

Commit

Permalink
Set gl.clearColor to transparent for render-to-texture nodes (#421)
Browse files Browse the repository at this point in the history
**Issue**: When rendering parts on the render tree to a texture ( RTT )
and the `clearColor` is set to a solid color rather than being
transparent, this color is used to clear the colorbuffer of the
texture's framebuffer. This results in render textures displaying a
solid background color instead of being transparent.

This PR addresses this issues by setting the `gl.clearColor` to
transparent before the render to texture pass begins and restoring it
when the pass is complete.

Before:

![before](https://github.com/user-attachments/assets/868a7665-cd46-4712-97f6-76f0d428b2b6)

After:

![after](https://github.com/user-attachments/assets/ae554fe7-cc18-40d5-a17c-c7784e00d0db)
  • Loading branch information
wouterlucas authored Oct 29, 2024
2 parents 6c91837 + de94ad4 commit f7def82
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/core/renderers/webgl/WebGlCoreRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -655,6 +655,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
glw.bindFramebuffer(ctxTexture.framebuffer);

glw.viewport(0, 0, ctxTexture.w, ctxTexture.h);
// Set the clear color to transparent
glw.clearColor(0, 0, 0, 0);
glw.clear();

// Render all associated quads to the texture
Expand Down Expand Up @@ -683,6 +685,10 @@ export class WebGlCoreRenderer extends CoreRenderer {
node.hasRTTupdates = false;
}

const color = getNormalizedRgbaComponents(this.stage.options.clearColor);
// Restore the default clear color
glw.clearColor(color[0]!, color[1]!, color[2]!, color[3]!);

// Bind the default framebuffer
glw.bindFramebuffer(null);

Expand Down

0 comments on commit f7def82

Please sign in to comment.