Clothing Color Map Shader

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>

JavaScript

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform vec3 uRed;
uniform vec3 uGreen;
uniform vec3 uBlue;
uniform float time;

void main() {
	vec4 maincol = texture2D(uSampler, vTextureCoord);
  vec4 firstcol = vec4(maincol.r);
  vec4 secondcol = vec4(maincol.g);
  vec4 thirdcol = vec4(maincol.b);
  
  vec3 grayscale = vec3(0.5,0.5,0.5);
  vec4 newcol = vec4(vec3(dot(maincol.rgb, grayscale)), maincol.a);
  
  if (maincol.r > maincol.g && maincol.r > maincol.b) {
  	firstcol = vec4(uRed, maincol.a);
  }
  if (maincol.g > maincol.b && maincol.g > maincol.r) {
  	secondcol = vec4(uGreen, maincol.a);
  }
  if (maincol.b > maincol.g && maincol.b > maincol.r) {
 		thirdcol = vec4(uBlue, maincol.a);
  }
  
  gl_FragColor = (firstcol+secondcol+thirdcol);
}`

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.uRed = PIXI.utils.hex2rgb(defaultValue(uRed, 0xffffff));
    this.uniforms.uGreen = PIXI.utils.hex2rgb(defaultValue(uGreen, 0xffffff));
    this.uniforms.uBlue = PIXI.utils.hex2rgb(defaultValue(uBlue, 0xffffff));
    this.uniforms.time = performance.now();
}

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

RecolorFilter.prototype.apply = function (filterManager, input, output, clear) {
    this.padding = 5;
    this.uniforms.time = performance.now();
    filterManager.applyFilter(this, input, output);
}








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

var renderer = PIXI.autoDetectRenderer(512, 512);
renderer.roundPixels = true;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

var texture2 = PIXI.Texture.from("https://i.ibb.co/7Sh0VHk/shelved-cloak.png")
var sprite2 =...