A-Frame: post-processing attempt works on desktop, fails in VR

Question

I am attempting a simple approach to postprocessing in A-Frame (without using the three.js classes EffectComposer, etc., for simplicity). The approach seems standard:

• create a new render target
• render the scene into the target's texture
• create a secondary scene containing a single quad, with a custom shader material that alters that texture in some way
• use an orthographic camera to render the secondary scene into the main window

I have set this up with an A-Frame component as follows (with the goal of working in VR, as seen by the code in the tick function):

AFRAME.registerComponent("color-shift", {
    init: function () 
    {
        // render the scene to this texture
        this.renderTarget0 = new THREE.WebGLRenderTarget(1024, 1024);
        this.renderTarget0.texture.magFilter = THREE.NearestFilter;
        this.renderTarget0.texture.minFilter = THREE.NearestFilter;
        this.renderTarget0.texture.generateMipmaps = false;

        let texture = this.renderTarget0.texture;

        let postMaterial = new THREE.ShaderMaterial( {

          uniforms: {
            tex: {type: "t", value: texture},
          },

          vertexShader: `
          varying vec2 vUv;
          void main() 
          {
              vUv = uv;
              gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
          }
          `,

          fragmentShader: `
          varying vec2 vUv;
          uniform sampler2D tex;
          void main() 
          {
              vec4 color = texture2D(tex, vUv);
              gl_FragColor = vec4(color.g, color.b, color.r, 1);
          }
          `
         });

        // separate scene #1 for texture post processing
        const quad = new THREE.Mesh(
            new THREE.PlaneGeometry(2, 2), postMaterial );

        this.rtScene = new THREE.Scene();
        this.rtScene.add(quad);
        this.rtCamera = new THREE.OrthographicCamera();
        this.rtCamera.position.z = 0.5;
    },

    tick: function(t, dt)
    {
       // store XR settings
       const renderer = this.el.sceneEl.renderer;
       const currentRenderTarget = renderer.getRenderTarget();
       const currentXrEnabled = renderer.xr.enabled;
       const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;

       // temporarily disable XR
       renderer.xr.enabled = false;
       renderer.shadowMap.autoUpdate = false;

       // apply post-processing effects to previously rendered target texture,
       //   displayed on a quad, rendered to screen
       renderer.setRenderTarget(null);
       renderer.render(this.rtScene, this.rtCamera);

       // re-enable XR
       renderer.xr.enabled = currentXrEnabled;
       renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
       
       // render scene onto a texture the next time it renders
       renderer.setRenderTarget(this.renderTarget0); 
    }
});

The complete source code is at: https://github.com/stemkoski/A-Frame-Examples/blob/master/post-processing-test.html and a live version is at https://stemkoski.github.io/A-Frame-Examples/post-processing-test.html.

This example works perfectly as expected on desktop, resulting in a hue shift, but when entering VR mode, the screen is completely black.

I am not sure why this happens; the details about how rendering in VR mode works are a little confusing to me. I think that in VR mode, the camera is actually an array of 2 perspective cameras. I thought that the renderer's render method rendered the scene twice, once from each of these cameras, into a viewport that corresponds to half of a rendertarget texture, but I may very well be mistaken. I would like to capture the results of the render while in VR mode and then apply simple postprocessing to it, like in the shader above. How can I fix the code above to accomplish this?