JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://pixijs.download/v6.0.1/pixi.min.js"></script>

JavaScript

const app = new PIXI.Application({
  width: 800,
  height: 600,
  color: 0x000000
});

document.body.appendChild(app.view);

function createCustomRenderLoop(app) {
  PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH;
  const renderer = app.renderer;
  const screenTexture = PIXI.RenderTexture.create({
    width: renderer.screen.width,
    height: renderer.screen.height,
    resolution: renderer.resolution,
  });

  // Create a sprite from the screen texture, useful for rendering it onto the canvas.
  const screenSprite = new PIXI.Sprite(screenTexture);
  return function customRenderLoop(delta) {
    // console.log('RENDERLOOP: ', delta);
    // Render the stage into the screen texture.
    renderer.render(app.stage, screenTexture);

    // Bind the main framebuffer (canvas).
    renderer.renderTexture.bind(null);

    // Clear the canvas.
    renderer.renderTexture.clear();

    // Update transform of screen sprite (just in case, not needed).
    screenSprite.getBounds();
    // Render screen sprite onto canvas
    screenSprite.render(renderer);

    // Flush batch rendering.
    renderer.batch.flush();
  }
}

const blendVert = `
	attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform vec4 inputSize;
uniform vec4 outputFrame;

varying vec2 vTextureCoord;

void main(void) {
    precision highp float;
    vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;
    gl_Position = vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0);
    vTextureCoord = aTextureCoord;
}

`;

const blendFrag = `
	varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform sampler2D uComposite;
uniform int mode;

vec4 blendNormal(vec4 src, vec4 dst) {
  vec4 result;
  result.rgb = src.rgb + dst.rgb * (1.0 - src.a);
  result.a = src.a + (1.0 - src.a) * dst.a;
  return result;
}

vec4 blendMultiply(vec4 src, vec4 dst) {
  vec4 result;
  result.rgb = (1.0 - src.a) * dst.rgb +
               (1.0 -...