Three.js (GLSL) Selective Tint Shader

selectiveTint.fragment.glsl

// THREEjs build-in uniforms and attributes (Fragment)

// uniform mat4 viewMatrix - camera.matrixWorldInverse
// uniform vec3 cameraPosition - camera position in world space

varying vec2 vUv;
varying vec3 vTintColor;

uniform sampler2D albedo;
uniform sampler2D tintMask;

void main() {
	vec4 maskTexel = texture2D(tintMask, vUv);
	vec4 albedoTexel = texture2D(albedo, vUv);

	if (maskTexel.r == 1.0 && maskTexel.g == 1.0 && maskTexel.b == 1.0) {
		gl_FragColor = vec4(mix(vTintColor, albedoTexel.rgb, 0.5), 1.0);
	} else {
		gl_FragColor = albedoTexel;
	}
}

selectiveTint.vertex.glsl

// THREEjs build-in uniforms and attributes (Vertex)

// uniform mat4 modelMatrix - object.matrixWorld
// uniform mat4 modelViewMatrix - camera.matrixWorldInverse * object.matrixWorld
// uniform mat4 projectionMatrix - camera.projectionMatrix
// uniform mat4 viewMatrix - camera.matrixWorldInverse
// uniform mat3 normalMatrix - inverse transpose of modelViewMatrix
// uniform vec3 cameraPosition - camera position in world space
// attribute vec3 position - vertex position
// attribute vec3 normal - vertex normal
// attribute vec2 uv - uv
// attribute vec2 uv2 - uv2

uniform vec3 tintColor;

varying vec2 vUv;
varying vec3 vTintColor;

void main() {
	vUv = uv;
	vTintColor = tintColor;

	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}