Currently, I am working on developing a 2D sprite renderer that utilizes render textures for custom compositing. However, I have encountered an issue where the depth buffer on the FrameBuffer is not clearing properly. Due to this, all the sprites leave a permanent "streak" behind them across the tiles that are positioned behind. This streak resembles what happens when you forget to clear a color buffer, except in this case it affects the tiles like an eraser.
Below is the setup code for the frame buffer object:
constructor(gl: WebGL2RenderingContext, width: number, height: number, depthBuffer = false){
// Code for creating texture and frame buffer
}
setAsRenderTarget(): void {
// Code for setting as render target
}
unsetRenderTarget(): void {
// Code for unsetting render target
}
Here is the rendering code snippet:
render(): void {
// Render method with various WebGL functions
for (let i = 0; i < this._atlasPool.length; i++){
// Rendering each atlas as draw call without depth/frame/render buffer related code
}
// Additional depth-related WebGL functions for rendering
}
I have identified that the issue lies with the depth buffer not clearing properly. When I resize the depth buffer before rendering, everything works flawlessly. However, this approach is not ideal for performance reasons. Can anyone spot what I might be doing wrong in my implementation?