PixiJS Renderbuffer Demonstration

by ShukantPal

HTML

<script src="https://pixijs.download/dev-multisampling/pixi.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>PixiJS Renderbuffer Demo</title>
</head>
<body>
</body>
</html>

JavaScript

const app = new PIXI.Application({
  width: 512,
  height: 512,
  backgroundColor: 0xffffff,
});

window.document.body.appendChild(app.view);

const graph = new PIXI.Graphics();
graph.beginFill(0xff);
graph.drawCircle(128, 120, 120);
graph.endFill();
graph.beginFill(0xff00);
graph.drawCircle(256, 256+128, 120);
graph.endFill();

console.log('Welcome');

if (PIXI.Renderbuffer) {
  console.log("Renderbuffer was found!");

  const renderer = app.renderer;

  const renderbuffer = new PIXI.Renderbuffer(512, 512, 4, 34836);
  const framebuffer = new PIXI.Framebuffer(512, 512)
    .addColorRenderbuffer(0, renderbuffer);

  const baseTexture = PIXI.BaseTexture.fromBuffer(
    undefined,
    512, 512
  );
  const texture = new PIXI.Texture(baseTexture);
  const texfb = new PIXI.Framebuffer(512, 512)
    .addColorTexture(0, baseTexture);

  const oldrender = app.stage.render;

  const sprite = new PIXI.Sprite(texture);
  sprite.parent = app.stage // hack to get parent transform
  sprite.y = 512
  sprite.scale.y = -1 // sprite flips my image for some reason! I'm doing the reverse by this.
  sprite.updateTransform()

  app.stage.render = function(renderer) {
    renderer.framebuffer.bind(framebuffer);
    renderer.framebuffer.clear(1,1,1,1);
    oldrender.apply(this, [renderer]);
    renderer.batch.flush();

    renderer.framebuffer.bind(null);
    renderer.framebuffer.blitFramebuffer(framebuffer, texfb);
    renderer.renderbuffer.bind(null)

    sprite.render(renderer);
    renderer.batch.flush();
  }
} else {
  console.error("PIXI.Renderbuffer not available.");
}

app.stage.addChild(graph);