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 sampler2D uRedMap;
uniform sampler2D uBlueMap;
uniform float time;

void main() {
	vec4 maincol = texture2D(uSampler, vTextureCoord);
  
  float grayscale_value = dot(maincol.rgb, vec3(0.299, 0.587, 0.114));
  vec3 sampled_red = texture2D(uRedMap, vec2(grayscale_value, 0.0)).rgb;
  vec3 sampled_blue = texture2D(uBlueMap, vec2(grayscale_value, 0.0)).rgb;
  
  if (maincol.r > maincol.b && maincol.r > maincol.g) {
  	maincol.rgb = mix(maincol.rgb, sampled_red, 1.);
  }
  else if (maincol.b > maincol.r && maincol.b > maincol.g) {
  	maincol.rgb = mix(maincol.rgb, sampled_blue, 1.);
  }
  gl_FragColor = maincol;
}`

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

function RecolorFilter(uRedMap, uBlueMap) {
    PIXI.Filter.call(this,undefined,fragmentShader);
    this.uniforms.uRedMap = uRedMap;
    this.uniforms.uBlueMap = uBlueMap;
    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 redtex = PIXI.Texture.from("https://i.ibb.co/LgWPKGD/IDL-Red-Temperature-1.png")
var reds = new PIXI.Sprite(redtex)
reds.x = 0
reds.y = 0
var bluetex = PIXI.Texture.from("https://i.ibb.co/98JPPkq/IDL-Green-White-Linear-1.png")
var blues = new PIXI.Sprite(bluetex)
blues.x = 0
blues.y = 32
var texture2 =...