Update MPImage to use containers
PiperOrigin-RevId: 527596164
This commit is contained in:
parent
7c70c62465
commit
bc3434108e
|
@ -112,9 +112,7 @@ async function createTestData(
|
||||||
shaderContext: MPImageShaderContext, input: ImageType, width: number,
|
shaderContext: MPImageShaderContext, input: ImageType, width: number,
|
||||||
height: number): MPImage {
|
height: number): MPImage {
|
||||||
return new MPImage(
|
return new MPImage(
|
||||||
input instanceof ImageData ? input : null,
|
[input],
|
||||||
input instanceof ImageBitmap ? input : null,
|
|
||||||
input instanceof WebGLTexture ? input : null,
|
|
||||||
/* ownsImageBitmap= */ false, /* ownsWebGLTexture= */ false, canvas,
|
/* ownsImageBitmap= */ false, /* ownsWebGLTexture= */ false, canvas,
|
||||||
shaderContext, width, height);
|
shaderContext, width, height);
|
||||||
}
|
}
|
||||||
|
@ -193,7 +191,7 @@ async function createTestData(
|
||||||
|
|
||||||
const shaderContext = new MPImageShaderContext();
|
const shaderContext = new MPImageShaderContext();
|
||||||
const image = new MPImage(
|
const image = new MPImage(
|
||||||
/* imageData= */ null, /* imageBitmap= */ null, webGlTexture,
|
[webGlTexture],
|
||||||
/* ownsImageBitmap= */ false, /* ownsWebGLTexture= */ false, canvas,
|
/* ownsImageBitmap= */ false, /* ownsWebGLTexture= */ false, canvas,
|
||||||
shaderContext, WIDTH, HEIGHT);
|
shaderContext, WIDTH, HEIGHT);
|
||||||
|
|
||||||
|
@ -211,7 +209,7 @@ async function createTestData(
|
||||||
|
|
||||||
const shaderContext = new MPImageShaderContext();
|
const shaderContext = new MPImageShaderContext();
|
||||||
const image = new MPImage(
|
const image = new MPImage(
|
||||||
/* imageData= */ null, /* imageBitmap= */ null, webGlTexture,
|
[webGlTexture],
|
||||||
/* ownsImageBitmap= */ false, /* ownsWebGLTexture= */ false, canvas,
|
/* ownsImageBitmap= */ false, /* ownsWebGLTexture= */ false, canvas,
|
||||||
shaderContext, WIDTH, HEIGHT);
|
shaderContext, WIDTH, HEIGHT);
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,9 @@ export enum MPImageStorageType {
|
||||||
WEBGL_TEXTURE
|
WEBGL_TEXTURE
|
||||||
}
|
}
|
||||||
|
|
||||||
type MPImageNativeContainer = ImageData|ImageBitmap|WebGLTexture;
|
/** The supported image formats. For internal usage. */
|
||||||
|
export type MPImageNativeContainer =
|
||||||
|
Uint8ClampedArray|Float32Array|ImageData|ImageBitmap|WebGLTexture;
|
||||||
|
|
||||||
const VERTEX_SHADER = `
|
const VERTEX_SHADER = `
|
||||||
attribute vec2 aVertex;
|
attribute vec2 aVertex;
|
||||||
|
@ -274,9 +276,7 @@ export class MPImage {
|
||||||
|
|
||||||
/** @hideconstructor */
|
/** @hideconstructor */
|
||||||
constructor(
|
constructor(
|
||||||
private imageData: ImageData|null,
|
private readonly containers: MPImageNativeContainer[],
|
||||||
private imageBitmap: ImageBitmap|null,
|
|
||||||
private webGLTexture: WebGLTexture|null,
|
|
||||||
private ownsImageBitmap: boolean,
|
private ownsImageBitmap: boolean,
|
||||||
private ownsWebGLTexture: boolean,
|
private ownsWebGLTexture: boolean,
|
||||||
/** Returns the canvas element that the image is bound to. */
|
/** Returns the canvas element that the image is bound to. */
|
||||||
|
@ -294,15 +294,7 @@ export class MPImage {
|
||||||
* `getType()`.
|
* `getType()`.
|
||||||
*/
|
*/
|
||||||
hasType(type: MPImageStorageType): boolean {
|
hasType(type: MPImageStorageType): boolean {
|
||||||
if (type === MPImageStorageType.IMAGE_DATA) {
|
return !!this.getContainer(type);
|
||||||
return !!this.imageData;
|
|
||||||
} else if (type === MPImageStorageType.IMAGE_BITMAP) {
|
|
||||||
return !!this.imageBitmap;
|
|
||||||
} else if (type === MPImageStorageType.WEBGL_TEXTURE) {
|
|
||||||
return !!this.webGLTexture;
|
|
||||||
} else {
|
|
||||||
throw new Error(`Type is not supported: ${type}`);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -336,14 +328,37 @@ export class MPImage {
|
||||||
*/
|
*/
|
||||||
getImage(type: MPImageStorageType.WEBGL_TEXTURE): WebGLTexture;
|
getImage(type: MPImageStorageType.WEBGL_TEXTURE): WebGLTexture;
|
||||||
getImage(type?: MPImageStorageType): MPImageNativeContainer {
|
getImage(type?: MPImageStorageType): MPImageNativeContainer {
|
||||||
if (type === MPImageStorageType.IMAGE_DATA) {
|
switch (type) {
|
||||||
return this.convertToImageData();
|
case MPImageStorageType.IMAGE_DATA:
|
||||||
} else if (type === MPImageStorageType.IMAGE_BITMAP) {
|
return this.convertToImageData();
|
||||||
return this.convertToImageBitmap();
|
case MPImageStorageType.IMAGE_BITMAP:
|
||||||
} else if (type === MPImageStorageType.WEBGL_TEXTURE) {
|
return this.convertToImageBitmap();
|
||||||
return this.convertToWebGLTexture();
|
case MPImageStorageType.WEBGL_TEXTURE:
|
||||||
} else {
|
return this.convertToWebGLTexture();
|
||||||
throw new Error(`Type is not supported: ${type}`);
|
default:
|
||||||
|
throw new Error(`Type is not supported: ${type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private getContainer(type: MPImageStorageType.IMAGE_DATA): ImageData
|
||||||
|
|undefined;
|
||||||
|
private getContainer(type: MPImageStorageType.IMAGE_BITMAP): ImageBitmap
|
||||||
|
|undefined;
|
||||||
|
private getContainer(type: MPImageStorageType.WEBGL_TEXTURE): WebGLTexture
|
||||||
|
|undefined;
|
||||||
|
private getContainer(type: MPImageStorageType): MPImageNativeContainer
|
||||||
|
|undefined;
|
||||||
|
private getContainer(type: MPImageStorageType): MPImageNativeContainer
|
||||||
|
|undefined {
|
||||||
|
switch (type) {
|
||||||
|
case MPImageStorageType.IMAGE_DATA:
|
||||||
|
return this.containers.find(img => img instanceof ImageData);
|
||||||
|
case MPImageStorageType.IMAGE_BITMAP:
|
||||||
|
return this.containers.find(img => img instanceof ImageBitmap);
|
||||||
|
case MPImageStorageType.WEBGL_TEXTURE:
|
||||||
|
return this.containers.find(img => img instanceof WebGLTexture);
|
||||||
|
default:
|
||||||
|
throw new Error(`Type is not supported: ${type}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -355,54 +370,56 @@ export class MPImage {
|
||||||
* avoided.
|
* avoided.
|
||||||
*/
|
*/
|
||||||
clone(): MPImage {
|
clone(): MPImage {
|
||||||
|
const destinationContainers: MPImageNativeContainer[] = [];
|
||||||
|
|
||||||
// TODO: We might only want to clone one backing datastructure
|
// TODO: We might only want to clone one backing datastructure
|
||||||
// even if multiple are defined.
|
// even if multiple are defined;
|
||||||
let destinationImageData: ImageData|null = null;
|
for (const container of this.containers) {
|
||||||
let destinationImageBitmap: ImageBitmap|null = null;
|
let destinationContainer: MPImageNativeContainer;
|
||||||
let destinationWebGLTexture: WebGLTexture|null = null;
|
|
||||||
|
|
||||||
if (this.imageData) {
|
if (container instanceof ImageData) {
|
||||||
destinationImageData =
|
destinationContainer =
|
||||||
new ImageData(this.imageData.data, this.width, this.height);
|
new ImageData(container.data, this.width, this.height);
|
||||||
}
|
} else if (container instanceof WebGLTexture) {
|
||||||
|
const gl = this.getGL();
|
||||||
|
const shaderContext = this.getShaderContext();
|
||||||
|
|
||||||
if (this.webGLTexture) {
|
// Create a new texture and use it to back a framebuffer
|
||||||
const gl = this.getGL();
|
gl.activeTexture(gl.TEXTURE1);
|
||||||
const shaderContext = this.getShaderContext();
|
destinationContainer =
|
||||||
|
assertNotNull(gl.createTexture(), 'Failed to create texture');
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, destinationContainer);
|
||||||
|
|
||||||
// Create a new texture and use it to back a framebuffer
|
gl.texImage2D(
|
||||||
gl.activeTexture(gl.TEXTURE1);
|
gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA,
|
||||||
destinationWebGLTexture =
|
gl.UNSIGNED_BYTE, null);
|
||||||
assertNotNull(gl.createTexture(), 'Failed to create texture');
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, destinationWebGLTexture);
|
|
||||||
|
|
||||||
gl.texImage2D(
|
shaderContext.bindFramebuffer(gl, destinationContainer);
|
||||||
gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA,
|
shaderContext.run(gl, /* flipVertically= */ false, () => {
|
||||||
gl.UNSIGNED_BYTE, null);
|
this.bindTexture(); // This activates gl.TEXTURE0
|
||||||
|
gl.clearColor(0, 0, 0, 0);
|
||||||
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
|
||||||
|
this.unbindTexture();
|
||||||
|
});
|
||||||
|
shaderContext.unbindFramebuffer();
|
||||||
|
|
||||||
shaderContext.bindFramebuffer(gl, destinationWebGLTexture);
|
|
||||||
shaderContext.run(gl, /* flipVertically= */ false, () => {
|
|
||||||
this.bindTexture(); // This activates gl.TEXTURE0
|
|
||||||
gl.clearColor(0, 0, 0, 0);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
|
|
||||||
this.unbindTexture();
|
this.unbindTexture();
|
||||||
});
|
} else if (container instanceof ImageBitmap) {
|
||||||
shaderContext.unbindFramebuffer();
|
this.convertToWebGLTexture();
|
||||||
|
this.bindTexture();
|
||||||
|
destinationContainer = this.copyTextureToBitmap();
|
||||||
|
this.unbindTexture();
|
||||||
|
} else {
|
||||||
|
throw new Error(`Type is not supported: ${container}`);
|
||||||
|
}
|
||||||
|
|
||||||
this.unbindTexture();
|
destinationContainers.push(destinationContainer);
|
||||||
}
|
|
||||||
|
|
||||||
if (this.imageBitmap) {
|
|
||||||
this.convertToWebGLTexture();
|
|
||||||
this.bindTexture();
|
|
||||||
destinationImageBitmap = this.copyTextureToBitmap();
|
|
||||||
this.unbindTexture();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return new MPImage(
|
return new MPImage(
|
||||||
destinationImageData, destinationImageBitmap, destinationWebGLTexture,
|
destinationContainers, this.hasType(MPImageStorageType.IMAGE_BITMAP),
|
||||||
!!destinationImageBitmap, !!destinationWebGLTexture, this.canvas,
|
this.hasType(MPImageStorageType.WEBGL_TEXTURE), this.canvas,
|
||||||
this.shaderContext, this.width, this.height);
|
this.shaderContext, this.width, this.height);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -439,75 +456,82 @@ export class MPImage {
|
||||||
}
|
}
|
||||||
|
|
||||||
private convertToImageBitmap(): ImageBitmap {
|
private convertToImageBitmap(): ImageBitmap {
|
||||||
if (!this.imageBitmap) {
|
let imageBitmap = this.getContainer(MPImageStorageType.IMAGE_BITMAP);
|
||||||
if (!this.webGLTexture) {
|
if (!imageBitmap) {
|
||||||
this.webGLTexture = this.convertToWebGLTexture();
|
this.convertToWebGLTexture();
|
||||||
}
|
imageBitmap = this.convertWebGLTextureToImageBitmap();
|
||||||
this.imageBitmap = this.convertWebGLTextureToImageBitmap();
|
this.containers.push(imageBitmap);
|
||||||
this.ownsImageBitmap = true;
|
this.ownsImageBitmap = true;
|
||||||
}
|
}
|
||||||
|
return imageBitmap;
|
||||||
return this.imageBitmap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private convertToImageData(): ImageData {
|
private convertToImageData(): ImageData {
|
||||||
if (!this.imageData) {
|
let imageData = this.getContainer(MPImageStorageType.IMAGE_DATA);
|
||||||
|
if (!imageData) {
|
||||||
const gl = this.getGL();
|
const gl = this.getGL();
|
||||||
const shaderContext = this.getShaderContext();
|
const shaderContext = this.getShaderContext();
|
||||||
const pixels = new Uint8Array(this.width * this.height * 4);
|
const pixels = new Uint8Array(this.width * this.height * 4);
|
||||||
|
|
||||||
// Create texture if needed
|
// Create texture if needed
|
||||||
this.convertToWebGLTexture();
|
const webGLTexture = this.convertToWebGLTexture();
|
||||||
|
|
||||||
// Create a framebuffer from the texture and read back pixels
|
// Create a framebuffer from the texture and read back pixels
|
||||||
shaderContext.bindFramebuffer(gl, this.webGLTexture!);
|
shaderContext.bindFramebuffer(gl, webGLTexture);
|
||||||
gl.readPixels(
|
gl.readPixels(
|
||||||
0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
|
0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
|
||||||
shaderContext.unbindFramebuffer();
|
shaderContext.unbindFramebuffer();
|
||||||
|
|
||||||
this.imageData = new ImageData(
|
imageData = new ImageData(
|
||||||
new Uint8ClampedArray(pixels.buffer), this.width, this.height);
|
new Uint8ClampedArray(pixels.buffer), this.width, this.height);
|
||||||
|
this.containers.push(imageData);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.imageData;
|
return imageData;
|
||||||
}
|
}
|
||||||
|
|
||||||
private convertToWebGLTexture(): WebGLTexture {
|
private convertToWebGLTexture(): WebGLTexture {
|
||||||
if (!this.webGLTexture) {
|
let webGLTexture = this.getContainer(MPImageStorageType.WEBGL_TEXTURE);
|
||||||
|
if (!webGLTexture) {
|
||||||
const gl = this.getGL();
|
const gl = this.getGL();
|
||||||
this.bindTexture();
|
webGLTexture = this.bindTexture();
|
||||||
const source = (this.imageBitmap || this.imageData)!;
|
const source = this.getContainer(MPImageStorageType.IMAGE_BITMAP) ||
|
||||||
|
this.convertToImageData();
|
||||||
gl.texImage2D(
|
gl.texImage2D(
|
||||||
gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
||||||
this.unbindTexture();
|
this.unbindTexture();
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.webGLTexture!;
|
return webGLTexture;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Binds the backing texture to the canvas. If the texture does not yet
|
* Binds the backing texture to the canvas. If the texture does not yet
|
||||||
* exist, creates it first.
|
* exist, creates it first.
|
||||||
*/
|
*/
|
||||||
private bindTexture() {
|
private bindTexture(): WebGLTexture {
|
||||||
const gl = this.getGL();
|
const gl = this.getGL();
|
||||||
|
|
||||||
gl.viewport(0, 0, this.width, this.height);
|
gl.viewport(0, 0, this.width, this.height);
|
||||||
|
|
||||||
gl.activeTexture(gl.TEXTURE0);
|
gl.activeTexture(gl.TEXTURE0);
|
||||||
if (!this.webGLTexture) {
|
|
||||||
this.webGLTexture =
|
let webGLTexture = this.getContainer(MPImageStorageType.WEBGL_TEXTURE);
|
||||||
|
if (!webGLTexture) {
|
||||||
|
webGLTexture =
|
||||||
assertNotNull(gl.createTexture(), 'Failed to create texture');
|
assertNotNull(gl.createTexture(), 'Failed to create texture');
|
||||||
|
this.containers.push(webGLTexture);
|
||||||
this.ownsWebGLTexture = true;
|
this.ownsWebGLTexture = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this.webGLTexture);
|
gl.bindTexture(gl.TEXTURE_2D, webGLTexture);
|
||||||
// TODO: Ideally, we would only set these once per texture and
|
// TODO: Ideally, we would only set these once per texture and
|
||||||
// not once every frame.
|
// not once every frame.
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
||||||
|
|
||||||
|
return webGLTexture;
|
||||||
}
|
}
|
||||||
|
|
||||||
private unbindTexture(): void {
|
private unbindTexture(): void {
|
||||||
|
@ -581,15 +605,12 @@ export class MPImage {
|
||||||
*/
|
*/
|
||||||
close(): void {
|
close(): void {
|
||||||
if (this.ownsImageBitmap) {
|
if (this.ownsImageBitmap) {
|
||||||
this.imageBitmap!.close();
|
this.getContainer(MPImageStorageType.IMAGE_BITMAP)!.close();
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.gl) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.ownsWebGLTexture) {
|
if (this.ownsWebGLTexture) {
|
||||||
this.gl.deleteTexture(this.webGLTexture!);
|
const gl = this.getGL();
|
||||||
|
gl.deleteTexture(this.getContainer(MPImageStorageType.WEBGL_TEXTURE)!);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user