Add workaround for alpha information getting lost on low opacity in TGA textures

Add Alpha Mask layer blend mode
Change Split RGB channels into layer to support alpha channel, closes #3302
Add Split Alpha Channel into Layer option

Author: JannisX11

js/interface/menu_bar.js

@@ -353,6 +353,7 @@ export const MenuBar = {
 			new MenuSeparator('filters'),
 			'limit_to_palette',
 			'split_rgb_into_layers',
+			'split_alpha_into_layer',
 			'clear_unused_texture_space',
 			new MenuSeparator('transform'),
 			'flip_texture_x',

js/texturing/edit_image.js

@@ -1,4 +1,6 @@
+import { decodeTga } from "@lunapaint/tga-codec";
 import { colorDistance } from "../util/util";
+import { fs } from "../native_apis";
 
 BARS.defineActions(function() {
 
@@ -689,29 +691,45 @@ BARS.defineActions(function() {
 		icon: 'stacked_bar_chart',
 		category: 'textures',
 		condition: {modes: ['paint'], selected: {texture: true}},
-		click() {
+		async click() {
 			let texture = Texture.getDefault();
 			let original_data = texture.ctx.getImageData(0, 0, texture.canvas.width, texture.canvas.height);
+			if (texture.file_format == 'tga' && isApp) {
+
+				let data = fs.readFileSync(texture.path);
+				if (data instanceof ArrayBuffer) data = new Uint8Array(data);
+				let result = await decodeTga(data);
+				original_data.data.set(result.image.data);
+			}
 
 			Undo.initEdit({textures: [texture], bitmap: true});
 
 			texture.layers_enabled = true;
 			texture.layers.empty();
 			let i = 0;
-			for (let color of ['red', 'green', 'blue']) {
+			for (let color of ['red', 'green', 'blue', 'alpha']) {
 				let data_copy = new ImageData(original_data.data.slice(), original_data.width, original_data.height);
 				for (let j = 0; j < data_copy.data.length; j += 4) {
 					if (i != 0) data_copy.data[j+0] = 0;
 					if (i != 1) data_copy.data[j+1] = 0;
 					if (i != 2) data_copy.data[j+2] = 0;
+					if (i == 3) {
+						data_copy.data[j+0] = data_copy.data[j+1] = data_copy.data[j+2] = data_copy.data[j+3];
+					}
+					data_copy.data[j+3] = 255;
 				}
 				let layer = new TextureLayer({
 					name: color,
 					blend_mode: 'add'
 				}, texture);
 				layer.setSize(original_data.width, original_data.height);
 				layer.ctx.putImageData(data_copy, 0, 0);
-				texture.layers.unshift(layer);
+				if (color == 'alpha') {
+					texture.layers.push(layer);
+					layer.blend_mode = 'alpha_mask'
+				} else {
+					texture.layers.unshift(layer);
+				}
 				if (color == 'red') {
 					layer.select();
 				}
@@ -723,6 +741,54 @@ BARS.defineActions(function() {
 			BARS.updateConditions();
 		}
 	})
+	new Action('split_alpha_into_layer', {
+		icon: 'tab_inactive',
+		category: 'textures',
+		condition: {modes: ['paint'], selected: {texture: true}},
+		async click() {
+			let texture = Texture.getDefault();
+			let original_data = texture.ctx.getImageData(0, 0, texture.canvas.width, texture.canvas.height);
+			if (texture.file_format == 'tga' && isApp) {
+
+				let data = fs.readFileSync(texture.path);
+				if (data instanceof ArrayBuffer) data = new Uint8Array(data);
+				let result = await decodeTga(data);
+				original_data.data.set(result.image.data);
+			}
+
+			Undo.initEdit({textures: [texture], bitmap: true});
+
+			texture.layers_enabled = true;
+			texture.layers.empty();
+
+			// Color
+			let data_copy = new ImageData(original_data.data.slice(), original_data.width, original_data.height);
+			for (let j = 0; j < data_copy.data.length; j += 4) {
+				data_copy.data[j+3] = 255;
+			}
+			let layer = new TextureLayer({name: 'color'}, texture);
+			layer.setSize(original_data.width, original_data.height);
+			layer.ctx.putImageData(data_copy, 0, 0);
+			texture.layers.push(layer);
+			layer.select();
+
+			// Alpha
+			let data_alpha = new ImageData(original_data.data.slice(), original_data.width, original_data.height);
+			for (let j = 0; j < data_alpha.data.length; j += 4) {
+				data_alpha.data[j+0] = data_alpha.data[j+1] = data_alpha.data[j+2] = data_alpha.data[j+3];
+				data_alpha.data[j+3] = 255;
+			}
+			let alpha_layer = new TextureLayer({name: 'alpha', blend_mode: 'alpha_mask'}, texture);
+			alpha_layer.setSize(original_data.width, original_data.height);
+			alpha_layer.ctx.putImageData(data_alpha, 0, 0);
+			texture.layers.push(alpha_layer);
+
+			texture.updateLayerChanges(true);
+			Undo.finishEdit('Split texture alpha into alpha mask layers');
+			updateInterfacePanels();
+			BARS.updateConditions();
+		}
+	})
 	new Action('clear_unused_texture_space', {
 		icon: 'cleaning_services',
 		category: 'textures',

js/texturing/layers.js

@@ -367,7 +367,7 @@ new Property(TextureLayer, 'vector2', 'offset');
 new Property(TextureLayer, 'vector2', 'scale', {default: [1, 1]});
 new Property(TextureLayer, 'number', 'opacity', {default: 100});
 new Property(TextureLayer, 'boolean', 'visible', {default: true});
-new Property(TextureLayer, 'enum', 'blend_mode', {default: 'default', values: ['default', 'set_opacity', 'color', 'multiply', 'add', 'darken', 'lighten', 'screen', 'overlay', 'difference']});
+new Property(TextureLayer, 'enum', 'blend_mode', {default: 'default', values: ['default', 'set_opacity', 'color', 'multiply', 'add', 'darken', 'lighten', 'screen', 'overlay', 'difference', 'alpha_mask']});
 new Property(TextureLayer, 'boolean', 'in_limbo', {default: false});
 
 Object.defineProperty(TextureLayer, 'all', {

js/texturing/textures.js

@@ -1773,6 +1773,18 @@ export class Texture {
 		this.canvas.height = this.height;
 		for (let layer of this.layers) {
 			if (layer.visible == false || layer.opacity == 0) continue;
+			if (layer.blend_mode == 'alpha_mask') {
+				let mask = layer.ctx.getImageData(0, 0, layer.canvas.width, layer.canvas.height);
+				Painter.scanCanvas(this.ctx, 0, 0, this.canvas.width, this.canvas.height, (px, py, color) => {
+					let mask_coords = [ px - layer.offset[0], py - layer.offset[1] ];
+					if (mask_coords[0] < 0 || mask_coords[0] >= layer.canvas.width) return;
+					if (mask_coords[1] < 0 || mask_coords[1] >= layer.canvas.height) return;
+					let value = mask.data[(mask_coords[1] * layer.canvas.width + mask_coords[0]) * 4];
+					color[3] *= value / 255;
+					return color;
+				})
+				continue;
+			}
 			this.ctx.filter = `opacity(${layer.opacity / 100})`;
 			this.ctx.globalCompositeOperation = Painter.getBlendModeCompositeOperation(layer.blend_mode);
 			this.ctx.imageSmoothingEnabled = false;
@@ -1861,6 +1873,16 @@ export class Texture {
 			extensions: ['tga'],
 			async encode(texture) {
 				let image_data = texture.ctx.getImageData(0, 0, texture.canvas.width, texture.canvas.height);
+
+				let supported_blend_modes = ['add', 'alpha_mask', 'default'];
+				if (
+					texture.layers_enabled &&
+					texture.layers.some(l => l.blend_mode == 'alpha_mask') &&
+					texture.layers.allAre(l => supported_blend_modes.includes(l.blend_mode) && l.scale.allEqual(1))
+				) {
+					image_data = getTextureDataWithAccurateAlpha(texture);
+				}
+
 				let result = await encodeTga({
 					data: image_data.data,
 					width: texture.canvas.width,
@@ -2096,6 +2118,7 @@ export class Texture {
 					new MenuSeparator('filters'),
 					'limit_to_palette',
 					'split_rgb_into_layers',
+					'split_alpha_into_layer',
 					'clear_unused_texture_space',
 					new MenuSeparator('transform'),
 					'flip_texture_x',
@@ -2310,6 +2333,49 @@ export function getTexturesById(id) {
 	return $.grep(Texture.all, function(e) {return e.id == id});
 }
 
+/**
+ * Function to merge layers while preserving accurate alpha channel information. Does not support some blend modes, or layer scaling
+ */
+function getTextureDataWithAccurateAlpha(texture) {
+	let data = texture.ctx.createImageData(texture.canvas.width, texture.canvas.height);
+	for (let layer of texture.layers) {
+		if (layer.visible == false || layer.opacity == 0) continue;
+
+		let layer_data = layer.ctx.getImageData(0, 0, layer.canvas.width, layer.canvas.height);
+		
+		for (let x = 0; x < texture.canvas.width; x++) {
+			for (let y = 0; y < texture.canvas.height; y++) {
+				let index = data.getIndex(x, y);
+				let layer_index = layer_data.getIndex(x - layer.offset[0], y - layer.offset[1]);
+				let alpha = (layer_data.data[layer_index+3] / 255) * (layer.opacity/100);
+
+				switch (layer.blend_mode) {
+					case 'default': {
+						data.data[index+0] = Math.lerp(data.data[index+0], layer_data.data[layer_index+0], alpha);
+						data.data[index+1] = Math.lerp(data.data[index+1], layer_data.data[layer_index+1], alpha);
+						data.data[index+2] = Math.lerp(data.data[index+2], layer_data.data[layer_index+2], alpha);
+						data.data[index+3] = Math.lerp(data.data[index+3], 255, alpha);
+						break;
+					}
+					case 'add': {
+						data.data[index+0] += layer_data.data[layer_index+0] * alpha;
+						data.data[index+1] += layer_data.data[layer_index+1] * alpha;
+						data.data[index+2] += layer_data.data[layer_index+2] * alpha;
+						data.data[index+3] += layer_data.data[layer_index+3] * alpha;
+						break;
+					}
+					case 'alpha_mask': {
+						let value = layer_data.data[layer_index];
+						data.data[index+3] *= (value / 255) * alpha;
+						break;
+					}
+				}
+			}	
+		}
+	}
+	return data;
+}
+
 SharedActions.add('delete', {
 	condition: () => Prop.active_panel == 'textures' && Texture.selected,
 	run() {

js/util/util.js

@@ -104,6 +104,10 @@ Object.defineProperty($.Event.prototype, 'ctrlOrCmd', {
 		return this.ctrlKey || this.metaKey;
 	}
 })
+ImageData.prototype.getIndex = function(x, y) {
+	if (x < 0 || y < 0 || x >= this.width || y >= this.height) return null;
+    return (x + y * this.height) * 4;
+}
 
 export function convertTouchEvent(event) {
 	if (event && event.changedTouches && event.changedTouches.length && event.offsetX == undefined) {

lang/en.json

@@ -1408,6 +1408,7 @@
 	"action.blend_mode.overlay": "Overlay",
 	"action.blend_mode.hard_light": "Hard Light",
 	"action.blend_mode.difference": "Difference",
+	"action.blend_mode.alpha_mask": "Alpha Mask",
 	"action.expand_texture_selection": "Expand Texture Selection",
 	"action.expand_texture_selection.desc": "Expand or shrink the texture selection",
 
@@ -1898,8 +1899,10 @@
 	"action.adjust_curves.desc": "Adjust the brightness curves of the selected texture",
 	"action.limit_to_palette": "Limit to Palette",
 	"action.limit_to_palette.desc": "Limits the colors of the texture to those in the currently loaded palette",
-	"action.split_rgb_into_layers": "Split RGB Channels into Layers",
-	"action.split_rgb_into_layers.desc": "Split the texture into additive layers, one for each RGB channel",
+	"action.split_rgb_into_layers": "Split RGBA Channels into Layers",
+	"action.split_rgb_into_layers.desc": "Split the texture into additive layers, one for each RGBA channel",
+	"action.split_alpha_into_layer": "Split Alpha Channel into Layer",
+	"action.split_alpha_into_layer.desc": "Split the alpha channel of the texture into an alpha mask channel",
 	"action.clear_unused_texture_space": "Clear Unused Texture Space",
 	"action.clear_unused_texture_space.desc": "Clear parts of the texture that are not UV-mapped to any elements",
 	"action.flip_texture_x": "Flip Horizontally",

types/custom/texture_layers.d.ts

@@ -7,7 +7,7 @@ interface TextureLayerData {
 	scale?: ArrayVector2
 	opacity?: number
 	visible?: boolean
-	blend_mode?: 'default' | 'set_opacity' | 'color' | 'multiply' | 'add' | 'screen' | 'difference'
+	blend_mode?: 'default' | 'set_opacity' | 'color' | 'multiply' | 'add' | 'darken' | 'lighten' | 'screen' | 'overlay' | 'difference' | 'alpha_mask'
 	image_data?: ImageData
 	data_url?: string
 }
@@ -35,7 +35,7 @@ declare class TextureLayer {
 	scale: ArrayVector2
 	opacity: number
 	visible: boolean
-	blend_mode: 'default' | 'set_opacity' | 'color' | 'multiply' | 'add' | 'screen' | 'difference'
+	blend_mode: 'default' | 'set_opacity' | 'color' | 'multiply' | 'add' | 'darken' | 'lighten' | 'screen' | 'overlay' | 'difference' | 'alpha_mask'
 
 	extend(data: TextureLayerData): void
 	/**