RenderTexture

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 src = 'https://s3.ap-south-1.amazonaws.com/republic-invideo/girl_1612460546360.png';

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

document.body.appendChild(app.view);

const container = new PIXI.Container();

app.stage.addChild(container);


const sprite = PIXI.Sprite.from(src);
sprite.width = 300;
sprite.height = 200;

const filter = new PIXI.filters.ColorMatrixFilter();
filter.hue(80);
sprite.filters = [
  new PIXI.filters.BlurFilter(0),
  new PIXI.filters.AlphaFilter(0.9),
  filter
];
container.addChild(sprite);

const renderTexture = PIXI.RenderTexture.create({
  width: 300,
  height: 200,
  resolution: 2
});

app.renderer.render(sprite, {
  renderTexture
});