JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://pixijs.download/fix-6556/pixi.min.js"></script>
<button>
  Start
</button>
<canvas></canvas>

JavaScript

console.log(PIXI);

let canvas = document.querySelectorAll('canvas')[0];

let renderer = new PIXI.Renderer({
  view: canvas
});

let stage = new PIXI.Container();

document.querySelector('button').onclick = () => setInterval(() => {
  // Create a render texture
  let renderTex = PIXI.RenderTexture.create({
    width: 1024,
    height: 1024
  });

  // Manually add a depth texture
  let renderTexFramebuffer = renderTex.baseTexture.framebuffer;
  renderTexFramebuffer.enableDepth();
  renderTexFramebuffer.addDepthTexture();

  renderer.render(stage, renderTex);

  // Destroy the render texture again. This correctly releases all buffers EXCEPT for the depth buffer. Try commenting out the creation of the depth texture, you'll see that there's no leak anymore.
  renderTex.destroy(true);
}, 250);