Add support for texture async write (#7782)

Author: slimbuck

src/platform/graphics/texture.js

@@ -1173,6 +1173,22 @@ class Texture {
     read(x, y, width, height, options = {}) {
         return this.impl.read?.(x, y, width, height, options);
     }
+
+    /**
+     * Upload texture data asynchronously to the GPU.
+     *
+     * @param {number} x - The left edge of the rectangle.
+     * @param {number} y - The top edge of the rectangle.
+     * @param {number} width - The width of the rectangle.
+     * @param {number} height - The height of the rectangle.
+     * @param {Uint8Array|Uint16Array|Uint32Array|Float32Array} data - The pixel data to upload. This should be a typed array.
+     *
+     * @returns {Promise<void>} A promise that resolves when the upload is complete.
+     * @ignore
+     */
+    write(x, y, width, height, data) {
+        return this.impl.write?.(x, y, width, height, data);
+    }
 }
 
 export { Texture };

src/platform/graphics/webgl/webgl-graphics-device.js

@@ -1938,6 +1938,30 @@ class WebglGraphicsDevice extends GraphicsDevice {
         gl.readPixels(x, y, w, h, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
     }
 
+    clientWaitAsync(flags, interval_ms) {
+        const gl = this.gl;
+        const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+        this.submit();
+
+        return new Promise((resolve, reject) => {
+            function test() {
+                const res = gl.clientWaitSync(sync, flags, 0);
+                if (res === gl.TIMEOUT_EXPIRED) {
+                    // check again in a while
+                    setTimeout(test, interval_ms);
+                } else {
+                    gl.deleteSync(sync);
+                    if (res === gl.WAIT_FAILED) {
+                        reject(new Error('webgl clientWaitSync sync failed'));
+                    } else {
+                        resolve();
+                    }
+                }
+            }
+            test();
+        });
+    }
+
     /**
      * Asynchronously reads a block of pixels from a specified rectangle of the current color framebuffer
      * into an ArrayBufferView object.
@@ -1953,27 +1977,6 @@ class WebglGraphicsDevice extends GraphicsDevice {
     async readPixelsAsync(x, y, w, h, pixels) {
         const gl = this.gl;
 
-        const clientWaitAsync = (flags, interval_ms) => {
-            const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
-            this.submit();
-
-            return new Promise((resolve, reject) => {
-                function test() {
-                    const res = gl.clientWaitSync(sync, flags, 0);
-                    if (res === gl.WAIT_FAILED) {
-                        gl.deleteSync(sync);
-                        reject(new Error('webgl clientWaitSync sync failed'));
-                    } else if (res === gl.TIMEOUT_EXPIRED) {
-                        setTimeout(test, interval_ms);
-                    } else {
-                        gl.deleteSync(sync);
-                        resolve();
-                    }
-                }
-                test();
-            });
-        };
-
         const impl = this.renderTarget.colorBuffer?.impl;
         const format = impl?._glFormat ?? gl.RGBA;
         const pixelType = impl?._glPixelType ?? gl.UNSIGNED_BYTE;
@@ -1986,7 +1989,7 @@ class WebglGraphicsDevice extends GraphicsDevice {
         gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
 
         // async wait for previous read to finish
-        await clientWaitAsync(0, 20);
+        await this.clientWaitAsync(0, 16);
 
         // copy the resulting data once it's arrived
         gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buf);
@@ -2027,6 +2030,27 @@ class WebglGraphicsDevice extends GraphicsDevice {
         });
     }
 
+    async writeTextureAsync(texture, x, y, width, height, data) {
+        const gl = this.gl;
+        const impl = texture.impl;
+        const format = impl?._glFormat ?? gl.RGBA;
+        const pixelType = impl?._glPixelType ?? gl.UNSIGNED_BYTE;
+
+        // create temporary (gpu-side) buffer and copy data into it
+        const buf = gl.createBuffer();
+        gl.bindBuffer(gl.PIXEL_UNPACK_BUFFER, buf);
+        gl.bufferData(gl.PIXEL_UNPACK_BUFFER, data, gl.STREAM_DRAW);
+        gl.bindTexture(gl.TEXTURE_2D, impl._glTexture);
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, width, height, format, pixelType, 0);
+        gl.bindBuffer(gl.PIXEL_UNPACK_BUFFER, null);
+
+        texture._needsUpload = false;
+        texture._mipmapsUploaded = false;
+
+        // async wait for previous read to finish
+        await this.clientWaitAsync(0, 16);
+    }
+
     /**
      * Enables or disables alpha to coverage.
      *

src/platform/graphics/webgl/webgl-texture.js

@@ -801,6 +801,14 @@ class WebglTexture {
         const device = texture.device;
         return device.readTextureAsync(texture, x, y, width, height, options);
     }
+
+    write(x, y, width, height, data) {
+        const { texture } = this;
+        const { device } = texture;
+        // ensure texture is created and bound
+        device.setTexture(texture, 0);
+        return device.writeTextureAsync(texture, x, y, width, height, data);
+    }
 }
 
 export { WebglTexture };