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 * uRed, maincol.a);
  vec4 secondcol = vec4(maincol.g * uGreen, maincol.a);
  vec4 thirdcol = vec4(maincol.b * 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 = new PIXI.Sprite(texture2)
sprite2.x = 0
sprite2.y = 0
sprite2.scale = {x: 2, y: 2}
var texture3 = PIXI.Texture.from("https://i.ibb.co/LnjtCsS/simple-cloak.png")
var sprite3 = new PIXI.Sprite(texture3)
sprite3.x = 0
sprite3.y = 64
sprite3.scale = {x: 2, y: 2}
var texture4 = PIXI.Texture.from("https://i.ibb.co/Xs63GHt/cheongsam.png")
var sprite4 =...