Improve painting performance

css/panels.css

@@ -1351,6 +1351,7 @@
 	body[mode=paint] #uv_frame {
 		cursor: crosshair !important;
 	}
+	#uv_frame > #texture_canvas_wrapper > canvas,
 	#uv_frame > img {
 		position: absolute;
 		pointer-events: none;

js/texturing/painter.js

@@ -41,9 +41,15 @@ const Painter = {
 						Undo.finishEdit(edit_name)
 					}
 				})
+			} else {
+				if (options.no_undo) {
+					let map = texture.getMaterial().map
+					map.image = Painter.current.canvas;
+					map.needsUpdate = true;
+					texture.display_canvas = true;
+					UVEditor.vue.updateTextureCanvas();
 				} else {
 					texture.updateSource(instance.toDataURL())
-				if (!options.no_undo) {
 					Undo.finishEdit(edit_name)
 				}
 			}
@@ -896,12 +902,12 @@ const Painter = {
 		BarItems.slider_brush_opacity.update()
 	},
 	getCanvas(texture) {
-		var c = document.createElement('canvas')
-		var ctx = c.getContext('2d');
-		c.width = texture.width;
-		c.height = texture.height;
+		let canvas = texture instanceof Texture ? texture.canvas : document.createElement('canvas');
+		let ctx = canvas.getContext('2d');
+		canvas.width = texture.width;
+		canvas.height = texture.height;
 		ctx.drawImage(texture instanceof Texture ? texture.img : texture, 0, 0)
-		return c;
+		return canvas;
 	},
 	scanCanvas(ctx, x, y, w, h, cb) {
 		var arr = ctx.getImageData(x, y, w, h)

js/texturing/textures.js

@@ -13,6 +13,7 @@ class Texture {
 		this.show_icon = true
 		this.error = 0;
 		this.visible = true;
+		this.display_canvas = false;
 		//Data
 		this.img = 0;
 		this.width = 0;
@@ -47,6 +48,8 @@ class Texture {
 		}
 
 		//Setup Img/Mat
+		this.canvas = document.createElement('canvas');
+		this.canvas.width = this.canvas.height = 16;
 		var img = this.img = new Image()
 		img.src = 'assets/missing.png'
 
@@ -250,6 +253,9 @@ class Texture {
 	}
 	getUndoCopy(bitmap) {
 		var copy = {}
+		if (this.display_canvas && bitmap) {
+			this.updateSource(this.canvas.toDataURL());
+		}
 		for (var key in Texture.properties) {
 			Texture.properties[key].copy(this, copy)
 		}
@@ -443,6 +449,7 @@ class Texture {
 		if (!dataUrl) dataUrl = this.source;
 		this.source = dataUrl;
 		this.img.src = dataUrl;
+		this.display_canvas = false;
 		this.updateMaterial();
 		if (open_dialog == 'UVEditor') {
 			for (var key in UVEditor.editors) {
@@ -457,6 +464,7 @@ class Texture {
 	updateMaterial() {
 		let mat = this.getMaterial();
 		mat.name = this.name;
+		mat.map.image = this.img;
 		mat.map.name = this.name;
 		mat.map.image.src = this.source;
 		mat.map.needsUpdate = true;

js/texturing/uv.js

@@ -1885,6 +1885,16 @@ Interface.definePanels(function() {
 					} else {
 						this.texture = 0;
 					}
+					// Display canvas while painting
+					this.updateTextureCanvas();
+				},
+				updateTextureCanvas() {
+					if (this.texture && this.texture.display_canvas) {
+						Vue.nextTick(() => {
+							let wrapper = this.$refs.texture_canvas_wrapper;
+							wrapper.append(this.texture.canvas);
+						})
+					}
 				},
 				updateMouseCoords(event) {					
 					convertTouchEvent(event);
@@ -2987,7 +2997,8 @@ Interface.definePanels(function() {
 
 							<div id="uv_brush_outline" v-if="mode == 'paint' && mouse_coords.x >= 0" :style="getBrushOutlineStyle()"></div>
 
-							<img :style="{objectFit: texture.frameCount > 1 ? 'cover' : 'fill', objectPosition: \`0 -\${texture.currentFrame * inner_height}px\`}" v-if="texture && texture.error != 1" :src="texture.source">
+							<img :style="{objectFit: texture.frameCount > 1 ? 'cover' : 'fill', objectPosition: \`0 -\${texture.currentFrame * inner_height}px\`}" v-if="texture && texture.error != 1 && !texture.display_canvas" :src="texture.source">
+							<div ref="texture_canvas_wrapper" id="texture_canvas_wrapper" v-if="texture && texture.error != 1 && texture.display_canvas"></div>
 							<img style="object-fit: fill; opacity: 0.02; mix-blend-mode: screen;" v-if="texture == 0 && !box_uv" src="./assets/missing_blend.png">
 						</div>