Shumway + WebGL partial texture upload

Canvas2DSurface.js

// Its a custom renderer, pixi fork, it'll be easy to port on vanilla v5
// Careful: Method names differ from V5. Find appropriate fields.

export class Canvas2DSurface implements ISurface, gobi.core.ITextureResource {
		width: number;
		height: number;
		canvas: HTMLCanvasElement;
		context: CanvasRenderingContext2D;
		private _regionAllocator: RegionAllocator.IRegionAllocator;

		regions: Array<TextureRegion> = [];
		updated: Array<TextureRegion> = [];
		updateBounds = new core.Bounds();

		constructor(canvas: HTMLCanvasElement, regionAllocator?: RegionAllocator.IRegionAllocator) {
			this.canvas = canvas;
			this.context = canvas.getContext("2d");
			this.width = canvas.width;
			this.height = canvas.height;
			this._regionAllocator = regionAllocator;

			new core.BaseTexture(this);
		}

		allocate(w: number, h: number): TextureRegion {
			let region = this._regionAllocator.allocate(w, h);
			if (region) {
				let res = new TextureRegion(this, region);
				this.regions.push(res);
				return res;
			}
			return null;
		}

		free(surfaceRegion: TextureRegion) {
			let ind = this.regions.indexOf(surfaceRegion);
			if (ind >= 0) {
				this._regionAllocator.free(surfaceRegion.region);
				this.regions.splice(ind, 1);
			}
		}

		baseTexture: gobi.core.BaseTexture = null;

		onTextureNew(baseTexture: gobi.core.BaseTexture) {
			this.baseTexture = baseTexture;
			baseTexture.mipmap = false;
			baseTexture.premultiplyAlpha = true;
			baseTexture.setSize(this.width, this.height);

		}

		fixImageData(imageData: ImageData, fix: boolean = true) {
			if (!fix) {
				return imageData;
			}

			const data = imageData.data;

			let opaque = 0;
			let transparent = 0;
			for (let i = 3; i < data.length; i += 4) {
				if (data[i] > 0) {
					if (data[i] == 255) {
						opaque++;
					} else {
						transparent++;
					}
				}
			}

			if (opaque * 99 > transparent) {
				for (let i = 3; i < data.length; i += 4) {
					if (data[i] > 153) {
						data[i] = data[i] * 10 - 153 * 9;
					}
				}
			}
			return imageData;
		}

		onTextureUpload(renderer: gobi.pixi.WebGLRenderer, baseTexture: gobi.core.BaseTexture, glTexture: gobi.glCore.GLTexture) {
			const gl = renderer.gl;
			if (glTexture._updateID < 0) {
				gl.texImage2D(
					gl.TEXTURE_2D,
					0,
					gl.RGBA,
					gl.RGBA,
					gl.UNSIGNED_BYTE,
					this.fixImageData(this.context.getImageData(0, 0, baseTexture.width, baseTexture.height))
				);

				glTexture.width = baseTexture.width;
				glTexture.height = baseTexture.height;

				return true;
			}

			const regions = this.regions;
			const updated = this.updated;
			const _updateID = glTexture._updateID;
			const bounds = this.updateBounds;

			bounds.clear();

			let area = 0;

			updated.length = 0;
			for (let i = 0; i < regions.length; i++) {
				const region = regions[i];
				if (region._baseTexUpdateID > _updateID) {
					updated.push(region);
					bounds.addRect(region.region);
					area += region.region.width * region.region.height;
				}
			}

			let sq = (bounds.maxX - bounds.minX) * (bounds.maxY - bounds.minY);

			if (area * 2 < sq) {
				// multiple rects
				for (let i = 0; i < updated.length; i++) {
					const region = updated[i].region;
					gl.texSubImage2D(
						gl.TEXTURE_2D,
						0,
						region.x,
						region.y,
						gl.RGBA,
						gl.UNSIGNED_BYTE,
						this.fixImageData(this.context.getImageData(region.x, region.y, region.width, region.height))
					);
				}
			} else
			/*if (sq * 2 < this.width * this.height)*/ {
				// one rect
				gl.texSubImage2D(
					gl.TEXTURE_2D,
					0,
					bounds.minX,
					bounds.minY,
					gl.RGBA,
					gl.UNSIGNED_BYTE,
					this.fixImageData(this.context.getImageData(bounds.minX, bounds.minY, bounds.maxX - bounds.minX, bounds.maxY - bounds.minY))
				);
			}
			/* else {
						  // full canvas
						  gl.texImage2D(
							  gl.TEXTURE_2D,
							  0,
							  gl.RGBA,
							  gl.RGBA,
							  gl.UNSIGNED_BYTE,
							  this.canvas
						  );
					  } */
			updated.length = 0;
			return true;
		}
	}