DataTexture is flipped vertically, and flipY does not seem to work

Questions
1

Hi, I am trying to take a small strip (narrow horizontal slice) of a texture, and overlay that on another texture.

I am using a DataTexture to store the strip.

const stripData = new Uint8Array(4 * size);
const stripTexture = new THREE.DataTexture(stripData, rtWidth, stripHeight);

// Read pixels from RenderTarget to stripData.
renderer.readRenderTargetPixels(renderTarget, 0, 0, rtWidth, stripHeight, stripData);

// Then overlay on the main texture.
renderer.copyTextureToTexture(
      new THREE.Vector2(0, this.rtHeight / 2),  // Put strip at center.
      stripTexture,
      mainTexture);
this.renderer.render(this.scene, this.camera);

The problem is that the strip comes out upside down. I have tried setting stripData.flipY to both true and false (with stripData.needsUpdate = true). Nothing I do seems to make any difference, the strip is still flipped vertically. Help would be much appreciated. Thanks!

1 Like
2

I had the same problem, my solution was to mirror the texture. This is one of the properties of DataTexture.
stripTexture.flipY = true; stripTexture.needsUpdate = true;
This should solve the problem.

https://threejs.org/docs/#api/en/textures/DataTexture

1 Like