PIXI Boilerplate

by adil_invideo

HTML

<script src="https://pixijs.download/v6.1.1/pixi.js"></script>
<img id="something"/>
<img id="something1" src="https://s3.ap-south-1.amazonaws.com/invideo-block-assets/Template_Block_Assets/Background/bguniquecanvas.png" />

<svg style="position: absolute; left: -9999em; padding: 0px; margin: 0px; width: 0px;"><filter id="filter_duotone">
        <feColorMatrix type="matrix" 
        values="0.2126 0.7152 0.0722 0 0
            0.2126 0.7152 0.0722 0 0
            0.2126 0.7152 0.0722 0 0
            0 0 0 1 0" result="gray">
        </feColorMatrix>
        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
        <feFuncR type="table" tableValues="0 0.21568627451"></feFuncR>
        <feFuncG type="table" tableValues="0 0.54117647058"></feFuncG>
        <feFuncB type="table" tableValues="0 0.38431372549"></feFuncB>
        <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer></filter></svg>

CSS

body{
  display: flex;
}

img{
  width: 200px;
  height: 200px;
}

#something{
  background: #378A62;
}

#something1{
  filter: url(#filter_duotone);
}

canvas{
  margin-left: 10px;
}

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 {
  _color1;
  _color2;

  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 color = '378A62';
const app = new PIXI.Application({
  width: 410,
  height: 200,
  backgroundColor: 0xFFFFFF,
  antialias: true,
  resolution: 1
});

document.body.appendChild(app.view);

function makeSprite() {
  const sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
  sprite.width = 200;
  sprite.height = 200;
  return sprite;
}


const sprite = makeSprite();
sprite.tint = `0x${color}`;
app.stage.addChild(sprite);

const sprite2 = makeSprite();
sprite2.x=201;
sprite2.filters = [
	new DuotoneFilter(
  	[0,0,0,255],
    [55, 138, 98, 255]
  )
];
app.stage.addChild(sprite2);