Finally got around to this task and made this small script that replaces the selected color with a transparent one using the opacity chunk (applying it for default sprite and element material).
We still need to work something out together with the artists to get rid of the artifacts, but the result is promising.
I’m not sure that I understood all the nuances of working with chunks, am I not doing anything that can create problems in the code where I manipulate the chunk?
Maybe there is some resource that describes with examples how everything works on the current version of chunks? Because I see only a brief description of the changes in the manual.
→var OpacitySetter = pc.createScript('opacitySetter');
OpacitySetter.attributes.add('alphaColor', {type:'rgb', default:[1,1,1]});
OpacitySetter.prototype.postInitialize = function(){
OpacitySetter.instance = this;
this.materialsSet = new Set();
this.apply(this.app.systems.sprite.defaultMaterial);
this.apply(this.app.systems.sprite.default9SlicedMaterialSlicedMode);
this.apply(this.app.systems.element.defaultScreenSpaceImageMaterial);
this.apply(this.app.systems.element.defaultScreenSpaceImage9SlicedMaterial);
for(const defaultImageMaterial of this.app.systems.element.defaultImageMaterials)
this.apply(defaultImageMaterial);
};
/**@param {pc.Material} material
* @param {Number} alphaColor
*/
OpacitySetter.prototype.apply = function(material){
if(this.materialsSet.has(material)) return;
this.materialsSet.add(material);
material.chunks.APIVersion = pc.CHUNKAPI_1_70;
material.chunks.opacityPS =
"#ifdef MAPFLOAT\n" +
"uniform float material_opacity;\n"+
"#endif\n"+
"uniform sampler2D texture_opacityMap;\n" +
"\n" +
"void getOpacity() {\n" +
" vec2 uv = $UV;\n" +
" vec4 texColor = texture2D(texture_opacityMap, uv);\n"+
" if (texColor.rgb == vec3(" + this.alphaColor.r + "," + this.alphaColor.g + "," + this.alphaColor.b + ")) { \n" +
" dAlpha = 0.0; \n" +
" } else {\n" +
" dAlpha = texColor.a;\n" +
" #ifdef MAPFLOAT\n"+
" dAlpha *= material_opacity;\n"+
" #endif\n"+
" }\n" +
"}\n\n";
material.update();
}
EDIT: Code changes to bring back support for element opacity option in Editor.