FIlters

Demonstration of filters CSS v/s PIXI WebGL

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/tweakpane.min.js"></script>
<h1>Filters</h1>
<div class="title">
  <span>CSS</span>
  <span>PIXI</span>
</div>
<div class="parent" id="parent">
  <img 
  class="filter-none"
  id="img"
  height="300" width="400" src="https://thumbs.dreamstime.com/b/beautiful-golden-autumn-scenery-trees-golden-leaves-sunshine-scotland-united-kingdom-beautiful-golden-autumn-124278811.jpg" />

</div>

<h2 class="filter-name" id="filter-name">--- normal ---</h2>

CSS

body {
  margin: 0;
  font-family: sans-serif;
}

h1 {
  text-align: center;
}

.title {
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  font-weight: 600;
  padding: 10px 0;
}

.filter-name {
  text-align: center;
  opacity: 0.7;
}

.parent {
  display: flex;
  justify-content: space-around;
}

/******** ALL CSS Filters ********/
/*! Instagram.css v0.1.4 | MIT License | github.com/picturepan2/instagram.css */
[class*="filter"] {
  position: relative;
}

[class*="filter"]::before {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.filter-none {}

.filter-1977 {
  -webkit-filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
  filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
}

.filter-aden {
  -webkit-filter: sepia(.2) brightness(1.15) saturate(1.4);
  filter: sepia(.2) brightness(1.15) saturate(1.4);
}

.filter-aden::before {
  background: rgba(125, 105, 24, .1);
  content: "";
  mix-blend-mode: multiply;
}

.filter-amaro {
  -webkit-filter: sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3);
  filter: sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3);
}

.filter-amaro::before {
  background: rgba(125, 105, 24, .2);
  content: "";
  mix-blend-mode: overlay;
}

.filter-ashby {
  -webkit-filter: sepia(.5) contrast(1.2) saturate(1.8);
  filter: sepia(.5) contrast(1.2) saturate(1.8);
}

.filter-ashby::before {
  background: rgba(125, 105, 24, .35);
  content: "";
  mix-blend-mode: lighten;
}

.filter-brannan {
  -webkit-filter: sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg);
  filter: sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg);
}

.filter-brooklyn {
  -webkit-filter: sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
  filter: sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
}

.filter-brooklyn::before {
  background: rgba(127, 187, 227, .2);
  content: "";
  mix-blend-mode:...

JavaScript

/* CUSTOM SEPIA AND BLANKnWHITE FILTER with Intensity controlled***** */

const sepiaFrag = `
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform lowp float intensity; 
const mat4 colorMatrix = mat4(
 				0.393, 0.769, 0.189, 0.0,
        0.349, 0.686, 0.168, 0.0,
        0.272, 0.534, 0.131, 0.0,
        0.0, 0.0, 0.0, 1.0
);

 void main()
 {
     lowp vec4 textureColor = texture2D(uSampler, vTextureCoord);
     lowp vec4 outputColor = textureColor * colorMatrix;
     gl_FragColor = (intensity * outputColor) + ((1.0 - intensity) * textureColor);
 }
`;

const blackAndWhiteFrag = `
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform lowp float intensity;
// https://pixijs.download/dev/docs/packages_filters_filter-color-matrix_src_ColorMatrixFilter.ts.html#line169
const mat4 colorMatrix = mat4(
 		   0.3, 0.6, 0.1, 0,
           0.3, 0.6, 0.1, 0,
           0.3, 0.6, 0.1, 0,
           0, 0, 0, 1
);

 void main()
 {
     lowp vec4 textureColor = texture2D(uSampler, vTextureCoord);
     lowp vec4 outputColor = textureColor * colorMatrix;
     gl_FragColor = (intensity * outputColor) + ((1.0 - intensity) * textureColor);
 }
`;

class BlackAndWhiteFilter extends PIXI.Filter {

  constructor(intensity) {
    super(null, blackAndWhiteFrag, {
      intensity
    });
  }

  get intensity() {
    return this._intensity;
  }

  set intensity(value) {
    this._intensity = value;
    this._updateTransform();
  }

  _updateTransform() {
    this.uniforms.intensity = this._intensity;
  }

}

class SepiaFilter extends PIXI.Filter {

  constructor(intensity) {
    super(null, sepiaFrag, {
      intensity
    });
  }

  get intensity() {
    return this._intensity;
  }

  set intensity(value) {
    this._intensity = value;
    this._updateTransform();
  }

  _updateTransform() {
    this.uniforms.intensity = this._intensity;
  }
}

/* END OF CUSTOM SEPIA AND BLANKnWHITE FILTER with Intensity controlled***** */

/* PIXI WORK STARTS HERE */
const...