PIXI Boilerplate

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-projection.min.js"></script>

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;
  }
  float grayscaleValue = dot(textureColor.rgb, vec3(0.2126, 0.7152, 0.0722));
  mediump vec4 mixColor = mix(color1, color2, grayscaleValue);
  mixColor.a = textureColor.a; // retaining alpha channel
  gl_FragColor = mixColor;
  // Premultiply alpha.
  gl_FragColor.rgb *= gl_FragColor.a;
}
`;

class DuotoneFilter extends PIXI.Filter {

  constructor(color1, color2) {
    const c1 = color1.map((c) => c / 255.0);
    const c2 = color2.map((c) => c / 255.0);
    const uniforms = {
      color1: c1,
      color2: c2,
    };
    super(undefined, frag, uniforms);
    this._color1 = c1;
    this._color2 = c2;
  }

  updateColors(color1, color2) {
    this._color1 = color1.map((c) => c / 255.0);
    this._color2 = color2.map((c) => c / 255.0);
    this._updateTransform();
  }

  _updateTransform() {
    this.uniforms.color1 = this._color1;
    this.uniforms.color2 = this._color2;
  }
}

const videoSrc = "https://invideo-uploads-ap-south-1.s3.ap-south-1.amazonaws.com/lines1603084563358.webm";
const videoSrc2 = "https://invideo-uploads-ap-south-1.s3.ap-south-1.amazonaws.com/elementreveal1603084446689.webm";

const width = document.body.clientWidth;
const app = new PIXI.Application({
  width,
  height: 600,
  backgroundColor: 0xFF0000,
  antialias: true,
});

document.body.appendChild(app.view);

const sprite = new PIXI.Sprite(PIXI.Texture.from(videoSrc));
sprite.width = width;
sprite.height = 600;
sprite.filters = [new DuotoneFilter(
  [0, 0, 0, 255],
  [255, 244, 57, 255]
)];

const bgSprite = new PIXI.Sprite(PIXI.Texture.from(videoSrc2));
bgSprite.width = width;
bgSprite.height = 600;
bgSprite.filters = [new DuotoneFilter(
  [0, 0,...