I am trying to make the texture produced by a WebGLRenderTarget the map of a material used in a plane. We have a function that returns us a WebGLRenderTarget.texture, and it works well until we try to set texture.repeat to any value other than (1, 1).
function GenerateTexture() {
// ... some code ...
renderer.render(bufferScene, bufferCamera, bufferTarget);
console.log("width: " + bufferTarget.width + ", height: " + bufferTarget.height);
return bufferTarget.texture;
}
// ... some code ...
var texture = GenerateTexture();
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(8, 8);
This snippet generates a texture that gets bound to one of the corners of our plane, then gets stretched out in the vertical and horizontal axis, like you would expect from a texture that didn't get its wrap fields correctly set to RepeatWrapping while having a custom repeat value. It also logs "width: 2048, height: 2048", as intended, so I know the framebuffer (and, by extension, I assume the texture as well) is a power of 2.
I tried to change var texture = GenerateTexture();
to var texture = new THREE.TextureLoader().load("some/image.jpg");
, and it worked exactly as intended, by wrapping itself all accross the plane, so I know our plane and our wrapping setup are correct.
It seems the texture in WebGLRenderTarget.texture ignores wrapS and wrapT for whatever reason, but it appears to be a bug with the library. Can anyone confirm the problem?
I think you need to set the wrapping mode in the contructor:
var bufferTarget = new THREE.WebGLRenderTarget(2048, 2048, { wrapS: THREE.RepeatWrapping, wrapT: THREE.RepeatWrapping});
@IRMN You need to set the wrapping mode prior to rendering to the texture.
Most helpful comment
@IRMN You need to set the wrapping mode prior to rendering to the texture.