Clothing Color Map Shader

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<div style='right: 0px; position: fixed;'><input id='color1' type=color onchange='rCol=this.value;'><input id='color2' type=color onchange='gCol=this.value;'><input id='color3' type=color onchange='bCol=this.value;'></div>

JavaScript

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform vec3 uRed;
uniform vec3 uGreen;
uniform vec3 uBlue;
uniform vec3 uColBright;
uniform float uBright;

void main() {
	vec4 maincol = texture2D(uSampler, vTextureCoord);
  vec3 firstcol = vec3(maincol.r);
  vec3 secondcol = vec3(maincol.g);
  vec3 thirdcol = vec3(maincol.b);
  
  if (maincol.r > maincol.g && maincol.r > maincol.b) {
  	firstcol = vec3(maincol.r * uRed) * uColBright.r;
  } else if (maincol.g > maincol.b && maincol.g > maincol.r) {
  	secondcol = vec3(maincol.g * uGreen) * uColBright.g;
  } else if (maincol.b > maincol.g && maincol.b > maincol.r) {
 		thirdcol = vec3(maincol.b * uBlue) * uColBright.b;
  }
  
  gl_FragColor = vec4((firstcol+secondcol+thirdcol)*uBright, maincol.a);
}`

function defaultValue(inputValue, defaultValue) {
    inputValue = typeof inputValue !== 'undefined' ? inputValue : defaultValue;
    return inputValue;
}

function RecolorFilter(uRed, uGreen, uBlue) {
    PIXI.Filter.call(this,undefined,fragmentShader);
    this.uniforms.time = performance.now();
    this.uniforms.uColBright = [1.,1.,10.];
    this.uniforms.uBright = .6;
}

RecolorFilter.prototype = Object.create(PIXI.Filter.prototype);
RecolorFilter.prototype.constructor = RecolorFilter;

var rCol = "#ffffff";
var gCol = "#ffffff";
var bCol = "#ffffff";

function washInput(hexInput) {
	return PIXI.utils.hex2rgb(defaultValue(PIXI.utils.string2hex(hexInput), 0xffffff))
}

RecolorFilter.prototype.apply = function (filterManager, input, output, clear) {
    this.padding = 5;
    this.uniforms.time = performance.now();
    this.uniforms.uRed = washInput(rCol);
    this.uniforms.uGreen = washInput(gCol);
    this.uniforms.uBlue = washInput(bCol);
    filterManager.applyFilter(this, input, output);
}








PIXI.settings.MIPMAP_TEXTURES = PIXI.MIPMAP_MODES.ON;
var stage = new PIXI.Container();

var bg = new PIXI.Sprite(PIXI.Texture.WHITE)
bg.width = 1024
bg.height...