PIXI Boilerplate

by adil_invideo

HTML

<script src="https://pixijs.download/v6.1.1/pixi.js"></script>
<button id="play">
PLAY/PAUSE
</button>
<input id="slider" type="range" min=0 max=2 step="0.01" value="0" />

CSS

input#slider {
  width: 50%;
}

canvas{
   width: 100%;
   height: 600px;
}

JavaScript

const frag = `
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform highp vec4 color1;
uniform highp vec4 color2;

void main() {
  mediump vec4 textureColor = texture2D(uSampler, vTextureCoord);
  // Un-premultiply alpha. Added this to remove extra stroke
  //if (textureColor.a > 0.0) {
  //  textureColor.rgb /= textureColor.a;
 // }
 
  // Premultiply alpha.
  gl_FragColor = textureColor;
  gl_FragColor.rgb *= gl_FragColor.a;
}
`;


const url = 'https://invideo-uploads-ap-south-1.s3.ap-south-1.amazonaws.com/Megaphone1616686557299.webm';

const url2 = 'https://d1c7ic18uy0m4b.cloudfront.net/previews-480/Megaphone1616686557299.webm';
const app = new PIXI.Application({
  width: document.body.clientWidth,
  height: 600,
  backgroundColor: 0xAAAAAA,
  antialias: true,
  resolution: 1
});

document.body.appendChild(app.view);

function makeSprite(url) {
  var texture = PIXI.Texture.from(url);
  const sprite = new PIXI.Sprite(texture);
  sprite.width = 300;
  sprite.height = 200;
  return sprite;
}


const sprite1 = makeSprite(url);
const sprite2 = makeSprite(url2);
app.stage.addChild(sprite1);
app.stage.addChild(sprite2);
const filter = new PIXI.Filter(null, frag);
sprite2.x = 300;
sprite2.filters = [filter];

const player1 = sprite1.texture.baseTexture.resource.source;
const player2 = sprite2.texture.baseTexture.resource.source;

document.getElementById('play').onclick = () => {
  player1.play();
  player2.play();
}

document.getElementById('slider').oninput = (event) => {
  const value = event.target.value;
  player1.currentTime = value;
  player2.currentTime = value;
  sprite1.texture.update();
  sprite2.texture.update();
}