From 67285f1b0258c32dbb959e72f217a6e78390dd3a Mon Sep 17 00:00:00 2001
From: David Peicho <david.peicho@wonderlandengine.com>
Date: Wed, 23 Jul 2025 17:04:30 +0200
Subject: [PATCH 1/2] Add performance test for 2d array upload

---
 immersive-vr-session.html  | 187 ++++++++++++++++++++++++++++++++++++-
 js/render/core/renderer.js |  30 ++++--
 js/render/core/texture.js  |  64 ++++++++++++-
 js/render/materials/pbr.js |  20 +++-
 4 files changed, 282 insertions(+), 19 deletions(-)

diff --git a/immersive-vr-session.html b/immersive-vr-session.html
index ad5a848fb..45a799e20 100644
--- a/immersive-vr-session.html
+++ b/immersive-vr-session.html
@@ -47,30 +47,159 @@
       <p>Click 'Enter XR' to see content</p> 
     </main>
     <script type="module">
+      import {mat4, vec3, quat} from './js/render/math/gl-matrix.js';
+
       import {WebXRButton} from './js/util/webxr-button.js';
+      import { Node } from './js/render/core/node.js';
+      import {ArrayTexture, Custom2DTexture} from './js/render/core/texture.js';
+
       import {Scene} from './js/render/scenes/scene.js';
       import {Renderer, createWebGLContext} from './js/render/core/renderer.js';
       import {Gltf2Node} from './js/render/nodes/gltf2.js';
       import {SkyboxNode} from './js/render/nodes/skybox.js';
       import {QueryArgs} from './js/util/query-args.js';
+      import {BoxBuilder} from './js/render/geometry/box-builder.js';
+      import {PbrMaterial} from './js/render/materials/pbr.js';
 
       // If requested, use the polyfill to provide support for mobile devices
       // and devices which only support WebVR.
-      import WebXRPolyfill from './js/third-party/webxr-polyfill/build/webxr-polyfill.module.js';
-      if (QueryArgs.getBool('usePolyfill', true)) {
-        let polyfill = new WebXRPolyfill();
+      // import WebXRPolyfill from './js/third-party/webxr-polyfill/build/webxr-polyfill.module.js';
+      // if (QueryArgs.getBool('usePolyfill', true)) {
+      //   // let polyfill = new WebXRPolyfill();
+      // }
+
+      function rand(min, max) {
+          return Math.floor(Math.random() * (max - min + 1)) + min;
+      }
+
+      function randomColorString() {
+          const r = rand(50, 255);
+          const g = rand(50, 255);
+          const b = rand(50, 255);
+          return `rgb(${r},${g},${b})`;
       }
 
       // XR globals.
       let xrButton = null;
       let xrRefSpace = null;
 
+      /* @test: 2d canvas setup */
+
+      const test = {
+        multipleUpload: true,
+        multipleTextures: false,
+        useMultipleCanvases: false,
+        useTexture2D: false,
+        canvasSize: [512, 512],
+        atlasSize: 1024,
+        layers: 1
+      };
+
+      const textures = new Array(2)
+        .fill()
+        .map(_ => {
+            if(test.useTexture2D) {
+                return new Custom2DTexture(test.atlasSize, test.atlasSize);
+            }
+            return new ArrayTexture(test.atlasSize, test.atlasSize, test.layers);
+        });
+
+      const canvases = new Array(2)
+        .fill()
+        .map(_ => {
+          const canvas = document.createElement('canvas');
+          canvas.width = test.canvasSize[0];
+          canvas.height = test.canvasSize[1];
+          canvas.style.background = '#FF0000';
+          return canvas;
+        });
+
       // WebGL scene globals.
       let gl = null;
       let renderer = null;
       let scene = new Scene();
       scene.addNode(new Gltf2Node({url: 'media/gltf/space/space.gltf'}));
       scene.addNode(new SkyboxNode({url: 'media/textures/milky-way-4k.png'}));
+      const boxMaterial = new PbrMaterial();
+      boxMaterial.baseColorFactor.value = [1.0, 1.0, 1.0, 1.0];
+      boxMaterial.baseColor.texture = textures[0];
+      boxMaterial.arrayLayer.value = 5.0;
+
+      function uploadTextureLayer(texture, layer, img, offsets = [0, 0]) {
+          const textureGL = renderer._getRenderTexture(texture);
+          if(test.useTexture2D) {
+            gl.bindTexture(gl.TEXTURE_2D, textureGL._texture);
+            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+            gl.texSubImage2D(
+                gl.TEXTURE_2D,
+                0,
+                offsets[0],
+                offsets[1],
+                img.width,
+                img.height,
+                gl.RGBA,
+                gl.UNSIGNED_BYTE,
+                img
+            );
+          } else {
+            gl.bindTexture(gl.TEXTURE_2D_ARRAY, textureGL._texture);
+            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+            gl.texSubImage3D(
+                gl.TEXTURE_2D_ARRAY,
+                0,
+                offsets[0],
+                offsets[1],
+                layer,
+                img.width,
+                img.height,
+                1,
+                gl.RGBA,
+                gl.UNSIGNED_BYTE,
+                img
+            );
+          }
+      }
+
+      function updateCanvas(canvas) {
+          const ctx = canvas.getContext('2d');
+          const numSquares = 30;
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          for (let i = 0; i < numSquares; i++) {
+              const size = rand(30, 150);
+              const x = rand(0, canvas.width - size);
+              const y = rand(0, canvas.height - size);
+              ctx.fillStyle = randomColorString();
+              ctx.fillRect(x, y, size, size);
+          }
+      }
+
+      function initCanvasTexture() {
+          const boxBuilder = new BoxBuilder();
+          boxBuilder.pushCube([0, 0, 0], 5.0);
+          const boxPrimitive = boxBuilder.finishPrimitive(renderer);
+
+          const boxRenderPrimitive = renderer.createRenderPrimitive(boxPrimitive, boxMaterial);
+          const node = new Node();
+          node.addRenderPrimitive(boxRenderPrimitive);
+          mat4.translate(node.matrix, node.matrix, [-10, 0, -10]);
+
+          scene.addNode(node);
+
+          const canvas = canvases[0];
+          const ctx = canvas.getContext('2d');
+          for(let layer = 0; layer < test.layers; ++layer) {
+            const r = Math.floor(layer*25);
+            ctx.fillStyle = `rgb(${r},${0},${0})`;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            uploadTextureLayer(textures[0], layer, canvas);
+
+            if(test.multipleTextures) {
+              ctx.fillStyle = `rgb(${0},${r},${0})`;
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              uploadTextureLayer(textures[1], layer, canvas);
+            }
+          }
+      }
 
       // Checks to see if WebXR is available and, if so, queries a list of
       // XRDevices that are connected to the system.
@@ -101,7 +230,7 @@
 
       // Called when we've successfully acquired a XRSession. In response we
       // will set up the necessary session state and kick off the frame loop.
-      function onSessionStarted(session) {
+      async function onSessionStarted(session) {
         // This informs the 'Enter XR' button that the session has started and
         // that it should display 'Exit XR' instead.
         xrButton.setSession(session);
@@ -113,8 +242,22 @@
         // Create a WebGL context to render with, initialized to be compatible
         // with the XRDisplay we're presenting to.
         gl = createWebGLContext({
-          xrCompatible: true
+            "alpha": true,
+            "depth": true,
+            "stencil": true,
+            "antialias": true,
+            "premultipliedAlpha": false,
+            "preserveDrawingBuffer": false,
+            "powerPreference": "default",
+            "failIfMajorPerformanceCaveat": false,
+            "majorVersion": 2,
+            "minorVersion": 0,
+            "enableExtensionsByDefault": 1,
+            "explicitSwapControl": 0,
+            "proxyContextToMainThread": 0,
+            "renderViaOffscreenBackBuffer": 0
         });
+        await gl.makeXRCompatible();
 
         // Create a renderer with that GL context (this is just for the samples
         // framework and has nothing to do with WebXR specifically.)
@@ -137,6 +280,9 @@
           // Inform the session that we're ready to begin drawing.
           session.requestAnimationFrame(onXRFrame);
         });
+
+        /* @test */
+        initCanvasTexture(renderer);
       }
 
       // Called when the user clicks the 'Exit XR' button. In response we end
@@ -157,6 +303,8 @@
         renderer = null;
       }
 
+      let currentLayerToUpdate = 0;
+
       // Called every time the XRSession requests that a new frame be drawn.
       function onXRFrame(t, frame) {
         let session = frame.session;
@@ -164,6 +312,35 @@
         // Per-frame scene setup. Nothing WebXR specific here.
         scene.startFrame();
 
+        /* Upload canvas to texture */
+
+        updateCanvas(canvases[0]);
+        if(test.useMultipleCanvases) {
+            updateCanvas(canvases[1]);
+        }
+
+        let currentTexture = textures[0];
+        let nextTexture = textures[0];
+        if(test.multipleTextures) {
+            nextTexture = textures[1];
+            if (boxMaterial.baseColor.texture === textures[0]) {
+              currentTexture = textures[1];
+              nextTexture = textures[0];
+            }
+        }
+        boxMaterial.baseColor.texture = currentTexture;
+
+        // console.log(`Drawing to image ${nextTexture.textureKey}, displaying image ${boxMaterial.baseColor.texture.textureKey}`);
+
+        uploadTextureLayer(nextTexture, currentLayerToUpdate++, canvases[0]);
+        currentLayerToUpdate = currentLayerToUpdate%test.layers;
+        if(test.multipleUpload) {
+          const canvas = test.useMultipleCanvases ? canvases[1] : canvases[0];
+          const offsets = [canvas.width*0.5, canvas.height*0.5];
+          uploadTextureLayer(nextTexture, currentLayerToUpdate, canvas, offsets);
+          currentLayerToUpdate = currentLayerToUpdate%test.layers;
+        }
+
         // Inform the session that we're ready for the next frame.
         session.requestAnimationFrame(onXRFrame);
 
diff --git a/js/render/core/renderer.js b/js/render/core/renderer.js
index 579f9fdf6..f11deba74 100644
--- a/js/render/core/renderer.js
+++ b/js/render/core/renderer.js
@@ -21,7 +21,7 @@
 import {CAP, MAT_STATE, RENDER_ORDER, stateToBlendFunc} from './material.js';
 import {Node} from './node.js';
 import {Program} from './program.js';
-import {DataTexture, ExternalTexture, VideoTexture} from './texture.js';
+import {ArrayTexture, Custom2DTexture, DataTexture, ExternalTexture, VideoTexture} from './texture.js';
 import {mat4, vec3} from '../math/gl-matrix.js';
 
 export const ATTRIB = {
@@ -1042,19 +1042,31 @@ export class Renderer {
       let renderTexture = new RenderTexture(textureHandle);
       this._textureCache[key] = renderTexture;
 
+      const target = texture instanceof ArrayTexture ? gl.TEXTURE_2D_ARRAY : gl.TEXTURE_2D;
+
       if (texture instanceof ExternalTexture) {
         renderTexture._isExternalTexture = true;
+      } else if (texture instanceof ArrayTexture) {
+        gl.bindTexture(target, textureHandle);
+        gl.texStorage3D(target, 1, gl.RGBA8, texture.width, texture.height, texture.depth);
+        this._setSamplerParameters(texture, target);
+        renderTexture._complete = true;
+      } else if (texture instanceof Custom2DTexture) {
+          gl.bindTexture(target, textureHandle);
+          gl.texStorage2D(target, 1, gl.RGBA8, texture.width, texture.height);
+          this._setSamplerParameters(texture, target);
+          renderTexture._complete = true;
       } else if (texture instanceof DataTexture) {
         gl.bindTexture(gl.TEXTURE_2D, textureHandle);
         gl.texImage2D(gl.TEXTURE_2D, 0, texture.format, texture.width, texture.height,
                                      0, texture.format, texture._type, texture._data);
-        this._setSamplerParameters(texture);
+        this._setSamplerParameters(texture, target);
         renderTexture._complete = true;
       } else {
         texture.waitForComplete().then(() => {
           gl.bindTexture(gl.TEXTURE_2D, textureHandle);
           gl.texImage2D(gl.TEXTURE_2D, 0, texture.format, texture.format, gl.UNSIGNED_BYTE, texture.source);
-          this._setSamplerParameters(texture);
+          this._setSamplerParameters(texture, target);
           renderTexture._complete = true;
 
           if (texture instanceof VideoTexture) {
@@ -1076,24 +1088,24 @@ export class Renderer {
     }
   }
 
-  _setSamplerParameters(texture) {
+  _setSamplerParameters(texture, target) {
     let gl = this._gl;
 
     let sampler = texture.sampler;
     let powerOfTwo = isPowerOfTwo(texture.width) && isPowerOfTwo(texture.height);
     let mipmap = powerOfTwo && texture.mipmap;
     if (mipmap) {
-      gl.generateMipmap(gl.TEXTURE_2D);
+      gl.generateMipmap(target);
     }
 
     let minFilter = sampler.minFilter || (mipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
     let wrapS = sampler.wrapS || (powerOfTwo ? gl.REPEAT : gl.CLAMP_TO_EDGE);
     let wrapT = sampler.wrapT || (powerOfTwo ? gl.REPEAT : gl.CLAMP_TO_EDGE);
 
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, sampler.magFilter || gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);
+    gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, sampler.magFilter || gl.LINEAR);
+    gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minFilter);
+    gl.texParameteri(target, gl.TEXTURE_WRAP_S, wrapS);
+    gl.texParameteri(target, gl.TEXTURE_WRAP_T, wrapT);
   }
 
   _getProgramKey(name, defines) {
diff --git a/js/render/core/texture.js b/js/render/core/texture.js
index 26c614824..b49068c4a 100644
--- a/js/render/core/texture.js
+++ b/js/render/core/texture.js
@@ -73,7 +73,7 @@ export class ImageTexture extends Texture {
       } else {
         this._promise = Promise.reject('Image provided had failed to load.');
       }
-    } else {
+    } else if(!(img instanceof HTMLCanvasElement)) {
       this._promise = new Promise((resolve, reject) => {
         img.addEventListener('load', () => resolve(this._finishImage()));
         img.addEventListener('error', reject);
@@ -122,6 +122,38 @@ export class ImageTexture extends Texture {
   }
 }
 
+export class Custom2DTexture extends Texture {
+  constructor(width, height) {
+    super();
+    this._width = width;
+    this._height = height;
+    this.mipmap = false;
+    this.genDataKey();
+  }
+
+  get format() {
+    // TODO: Can be RGB in some cases.
+    return GL.RGBA;
+  }
+
+  get width() {
+    return this._width;
+  }
+
+  get height() {
+    return this._height;
+  }
+
+  get textureKey() {
+    return this._manualKey;
+  }
+
+  genDataKey() {
+    this._manualKey = `DATA_${nextDataTextureIndex}`;
+    nextDataTextureIndex++;
+  }
+}
+
 export class UrlTexture extends ImageTexture {
   constructor(url) {
     let img = new Image();
@@ -237,3 +269,33 @@ export class ColorTexture extends DataTexture {
     this._key = `COLOR_${colorData[0]}_${colorData[1]}_${colorData[2]}_${colorData[3]}`;
   }
 }
+
+
+export class ArrayTexture extends Texture {
+  constructor(width, height, depth) {
+    super();
+    this._width = width;
+    this._height = height;
+    this._depth = depth;
+    this.mipmap = false;
+    this.genDataKey();
+  }
+
+  get width() { return this._width; }
+  get height() { return this._height; }
+  get depth() { return this._depth; }
+
+  get format() {
+    // TODO: Can be RGB in some cases.
+    return GL.RGBA;
+  }
+
+  get textureKey() {
+    return this._manualKey;
+  }
+
+  genDataKey() {
+    this._manualKey = `DATA_${nextDataTextureIndex}`;
+    nextDataTextureIndex++;
+  }
+}
diff --git a/js/render/materials/pbr.js b/js/render/materials/pbr.js
index d4c304b33..9e2455856 100644
--- a/js/render/materials/pbr.js
+++ b/js/render/materials/pbr.js
@@ -20,6 +20,7 @@
 
 import {Material} from '../core/material.js';
 import {ATTRIB_MASK} from '../core/renderer.js';
+import { ArrayTexture } from '../core/texture.js';
 
 const VERTEX_SOURCE = `
 in vec3 POSITION, NORMAL;
@@ -100,6 +101,11 @@ uniform vec4 baseColorFactor;
 uniform sampler2D baseColorTex;
 #endif
 
+#ifdef USE_BASE_COLOR_MAP_ARRAY
+uniform mediump sampler2DArray baseColorTexArray;
+uniform float arrayLayer;
+#endif
+
 in vec3 vLight;
 in vec3 vView;
 in vec2 vTex;
@@ -138,10 +144,12 @@ const vec3 black = vec3(0.0);
 ${EPIC_PBR_FUNCTIONS}
 
 vec4 fragment_main() {
-#ifdef USE_BASE_COLOR_MAP
-  vec4 baseColor = texture(baseColorTex, vTex) * baseColorFactor;
-#else
   vec4 baseColor = baseColorFactor;
+#ifdef USE_BASE_COLOR_MAP
+  baseColor *= texture(baseColorTex, vTex);
+#endif
+#ifdef USE_BASE_COLOR_MAP_ARRAY
+  baseColor *= textureLod(baseColorTexArray, vec3(vTex, arrayLayer), 0.0);
 #endif
 
 #ifdef USE_VERTEX_COLOR
@@ -223,6 +231,8 @@ export class PbrMaterial extends Material {
     this.occlusion = this.defineSampler('occlusionTex');
     this.emissive = this.defineSampler('emissiveTex');
 
+    this.arrayLayer = this.defineUniform('arrayLayer', 0);
+
     this.baseColorFactor = this.defineUniform('baseColorFactor', [1.0, 1.0, 1.0, 1.0]);
     this.metallicRoughnessFactor = this.defineUniform('metallicRoughnessFactor', [1.0, 1.0]);
     this.occlusionStrength = this.defineUniform('occlusionStrength', 1.0);
@@ -249,7 +259,9 @@ export class PbrMaterial extends Material {
     }
 
     if (renderPrimitive._attributeMask & ATTRIB_MASK.TEXCOORD_0) {
-      if (this.baseColor.texture) {
+      if (this.baseColor.texture instanceof ArrayTexture) {
+        programDefines['USE_BASE_COLOR_MAP_ARRAY'] = 1;
+      } else if(this.baseColor.texture) {
         programDefines['USE_BASE_COLOR_MAP'] = 1;
       }
 

From 73b1a94e67fc3125896cbd9d2a17c046c964eaa3 Mon Sep 17 00:00:00 2001
From: Hugo Amiard <hugo.amiard@wonderlandengine.com>
Date: Thu, 24 Jul 2025 02:49:34 +0700
Subject: [PATCH 2/2] Add blit to 2d array performance test

---
 immersive-vr-session.html | 185 ++++++++++++++++++++++++++++++++++----
 1 file changed, 169 insertions(+), 16 deletions(-)

diff --git a/immersive-vr-session.html b/immersive-vr-session.html
index 45a799e20..6337c0435 100644
--- a/immersive-vr-session.html
+++ b/immersive-vr-session.html
@@ -83,14 +83,36 @@
       let xrButton = null;
       let xrRefSpace = null;
 
+      // WebGL scene globals.
+      let gl = null;
+      let renderer = null;
+
+      function createFramebuffer(texture, arrayLayer) {
+        const framebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        if(arrayLayer !== null) {
+          gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, texture, 0, arrayLayer);
+        } else {
+          gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        }
+        return framebuffer;
+      }
+
+      let scene = new Scene();
+      scene.addNode(new Gltf2Node({url: 'media/gltf/space/space.gltf'}));
+      scene.addNode(new SkyboxNode({url: 'media/textures/milky-way-4k.png'}));
+
       /* @test: 2d canvas setup */
 
       const test = {
         multipleUpload: true,
-        multipleTextures: false,
+        multipleTextures: true,
         useMultipleCanvases: false,
         useTexture2D: false,
-        canvasSize: [512, 512],
+        useBlit: true,
+        tempBuffer: false,
+        subTexture: false,
+        canvasSize: [1024, 1024],
         atlasSize: 1024,
         layers: 1
       };
@@ -100,10 +122,13 @@
         .map(_ => {
             if(test.useTexture2D) {
                 return new Custom2DTexture(test.atlasSize, test.atlasSize);
+            } else {
+                return new ArrayTexture(test.atlasSize, test.atlasSize, test.layers);
             }
-            return new ArrayTexture(test.atlasSize, test.atlasSize, test.layers);
         });
 
+      const buffers = new Array(2);
+
       const canvases = new Array(2)
         .fill()
         .map(_ => {
@@ -114,21 +139,137 @@
           return canvas;
         });
 
-      // WebGL scene globals.
-      let gl = null;
-      let renderer = null;
-      let scene = new Scene();
-      scene.addNode(new Gltf2Node({url: 'media/gltf/space/space.gltf'}));
-      scene.addNode(new SkyboxNode({url: 'media/textures/milky-way-4k.png'}));
       const boxMaterial = new PbrMaterial();
       boxMaterial.baseColorFactor.value = [1.0, 1.0, 1.0, 1.0];
       boxMaterial.baseColor.texture = textures[0];
       boxMaterial.arrayLayer.value = 5.0;
 
+      function createBlitProgram() {
+        const vsSource = `
+        attribute vec2 a_position;
+        attribute vec2 a_texCoord;
+        varying vec2 v_texCoord;
+        void main() {
+            gl_Position = vec4(a_position, 0, 1);
+            v_texCoord = a_texCoord;
+        }`;
+        const fsSource = `
+        precision mediump float;
+        uniform sampler2D u_texture;
+        varying vec2 v_texCoord;
+        void main() {
+            gl_FragColor = texture2D(u_texture, v_texCoord);
+        }`;
+
+        function compileShader(type, source) {
+            const shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                console.error(gl.getShaderInfoLog(shader));
+                return null;
+            }
+            return shader;
+        }
+
+        const vs = compileShader(gl.VERTEX_SHADER, vsSource);
+        const fs = compileShader(gl.FRAGMENT_SHADER, fsSource);
+        const program = gl.createProgram();
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
+        return program;
+      }
+
+      function quadVertexBuffer() {
+        // Fullscreen quad (2 triangles forming a rectangle)
+        // Interleaved: [posX, posY, texU, texV]
+        const quadVertices = new Float32Array([
+          -1, -1,  0, 0,
+           1, -1,  1, 0,
+          -1,  1,  0, 1,
+           1,  1,  1, 1,
+        ]);
+        const quadBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, quadVertices, gl.STATIC_DRAW);
+        return quadBuffer;
+      }
+
+      let blitProgram = null;
+      let blitQuad = null;
+
+      function blitTexture(framebuffer, texture, width, height) {
+        if(!blitProgram) {
+          blitProgram = createBlitProgram();
+          blitQuad = quadVertexBuffer();
+        }
+        const a_position = gl.getAttribLocation(blitProgram, 'a_position');
+        const a_texCoord = gl.getAttribLocation(blitProgram, 'a_texCoord');
+
+        gl.viewport(0, 0, width, height);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+
+        gl.useProgram(blitProgram);
+        gl.bindBuffer(gl.ARRAY_BUFFER, blitQuad);
+
+        gl.enableVertexAttribArray(a_position);
+        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 16, 0);
+
+        gl.enableVertexAttribArray(a_texCoord);
+        gl.vertexAttribPointer(a_texCoord, 2, gl.FLOAT, false, 16, 8);
+
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.uniform1i(gl.getUniformLocation(blitProgram, 'u_texture'), 0);
+
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      }
+
+      function createBlitTexture(img) {
+        let tempTexture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, tempTexture);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, img.width, img.height)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return tempTexture;
+      }
+
+      let blitTexturePing = null;
+      let blitTexturePong = null;
+      let blitTextureNext = null;
+
       function uploadTextureLayer(texture, layer, img, offsets = [0, 0]) {
-          const textureGL = renderer._getRenderTexture(texture);
-          if(test.useTexture2D) {
-            gl.bindTexture(gl.TEXTURE_2D, textureGL._texture);
+          const textureGL = renderer._getRenderTexture(texture)._texture;
+          if(test.useBlit) {
+            if(!blitTextureNext) {
+              blitTexturePing = createBlitTexture(img);
+              blitTexturePong = createBlitTexture(img);
+              blitTextureNext = blitTexturePing;
+            }
+            gl.bindTexture(gl.TEXTURE_2D, blitTextureNext);
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, img.width, img.height,
+                             gl.RGBA, gl.UNSIGNED_BYTE, img);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            if(!texture.framebuffers) {
+              texture.framebuffers = new Array(test.layers)
+                .fill()
+                .map((value, index) => {
+                    if(test.useTexture2D) {
+                        return createFramebuffer(textureGL, null);
+                    } else {
+                        return createFramebuffer(textureGL, index);
+                    }
+                });
+            }
+            blitTexture(texture.framebuffers[layer], blitTextureNext, img.width, img.height);
+            blitTextureNext = blitTextureNext === blitTexturePing ? blitTexturePong : blitTexturePing;
+          }
+          else if(test.useTexture2D) {
+            gl.bindTexture(gl.TEXTURE_2D, textureGL);
             gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
             gl.texSubImage2D(
                 gl.TEXTURE_2D,
@@ -142,7 +283,7 @@
                 img
             );
           } else {
-            gl.bindTexture(gl.TEXTURE_2D_ARRAY, textureGL._texture);
+            gl.bindTexture(gl.TEXTURE_2D_ARRAY, textureGL);
             gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
             gl.texSubImage3D(
                 gl.TEXTURE_2D_ARRAY,
@@ -332,12 +473,24 @@
 
         // console.log(`Drawing to image ${nextTexture.textureKey}, displaying image ${boxMaterial.baseColor.texture.textureKey}`);
 
-        uploadTextureLayer(nextTexture, currentLayerToUpdate++, canvases[0]);
+        if(test.tempBuffer) {
+          const ctx = canvases[0].getContext('2d');
+          buffers[0] = ctx.getImageData(0, 0, canvases[0].width, canvases[0].height);
+          uploadTextureLayer(nextTexture, currentLayerToUpdate++, buffers[0]);
+        } else {
+          uploadTextureLayer(nextTexture, currentLayerToUpdate++, canvases[0]);
+        }
         currentLayerToUpdate = currentLayerToUpdate%test.layers;
         if(test.multipleUpload) {
           const canvas = test.useMultipleCanvases ? canvases[1] : canvases[0];
-          const offsets = [canvas.width*0.5, canvas.height*0.5];
-          uploadTextureLayer(nextTexture, currentLayerToUpdate, canvas, offsets);
+          uploadTextureLayer(nextTexture, currentLayerToUpdate, canvas);
+          if(test.tempBuffer) {
+            const ctx = canvas.getContext('2d');
+            buffers[1] = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            uploadTextureLayer(nextTexture, currentLayerToUpdate++, buffers[1]);
+          } else {
+            uploadTextureLayer(nextTexture, currentLayerToUpdate++, canvas);
+          }
           currentLayerToUpdate = currentLayerToUpdate%test.layers;
         }