JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://pixijs.download/v6.0.1/pixi.min.js"></script>
<!-- <button id="random-seek-button">
Random Seek Button
</button> -->
<input type="range" id='timer' name="timer" min=0 max=100 step=0.01 />
<div id='display-time'>

</div>

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;
    /*
     * This is taken from the default filter vertex shader. The position is just
     * on of the four corners of the unit square => (0,0), (1,0), (1,1), (0,1). That
     * is because we are using the PIXI.Quad geometry.
     *
     * The position is the world space location of that corner. The unit square is
     * mapped to the output frame. Hence, we multiply aVertexPosition by the dimensions
     * of the output frame, and then add the xy of the output frame to get the world
     * position.
     *
  ...