Rendering EffectComposer to texture doesn't yield valid texture in output

Questions
, ,
1

Hi! :slight_smile:

I’m trying to render an EffectComposer output to a texture to be input into another EffectComposer, but I’m getting nowhere (just a blank page with a

WebGL2RenderingContext.texSubImage2D: Argument 7 is not valid for any of the 7-argument overloads

error).

In my code I’m doing the following, more or less:

this.texture = new WebGLRenderTarget(
  window.innerWidth,
  window.innerHeight
);

const copyPass = new ShaderPass(CopyShader);

const shaderPass = new ShaderPass(
  {
    uniforms: {
      uTarget: { value: null },
      aspectRatio: { value: 16/9 },
      color: { value: new Vector3(2, 2, 0) }, // (dx, dy, 0)
      point: { value: new Vector2(0.5, 0.5) },
      radius: { value: 0.0045 }
    },
    vertexShader: baseVertexShader,
    fragmentShader: firstFragmentShader
  },
  "uTarget"
);

// -- add passes --
copyPass.renderToScreen = true;

this.baseEffectComposer = new EffectComposer(
  renderer,
  this.texture
);
this.baseEffectComposer.addPass(new RenderPass(scene, camera));
this.baseEffectComposer.addPass(shaderPass);
this.baseEffectComposer.renderToScreen = false;

this.finalEffectComposer = new EffectComposer(renderer);
this.finalEffectComposer.addPass(passthroughFragPass);
this.finalEffectComposer.addPass(copyPass);
this.finalEffectComposer.renderToScreen = true;

In my rendering code I’m just calling this.firstRenderer.render() followed by this.finalRenderer.render()

Here’s a codepen for reference

Does anybody have any idea on how to fix this?
I’m using the latest three.js release