Combine Textures into One

Questions
, ,
1

Hello all, I’m trying to take the texture from a render target and add it to another texture. I’ve seen this done elsewhere using WebGLRenderer.readRenderTargetPixels and using the buffer it outputs as the source for a data texture. But I want to patch together a bunch of different textures into one so the end texture would be like a quilt of all the render textures. If you could imagine, that would look like so:

TEX7 TEX8 TEX9
TEX4 TEX5 TEX6
TEX1 TEX2 TEX3

The problem I’m having is that I can’t figure out how to set the pixels where I want them to be, i.e. with the correct offset. I feel that the WebGL function I want to use is WebGLRenderingContext.copyTexSubImage2D(). Does this function have any kind of wrapper in Three.js? Or do I need to dig into the WebGL to get it working? I’m not super familiar with WebGL, so I’d rather not do that if possible.

Here’s the code I have now, I just can’t figure out what to do with “pixelArray” now that I have it.

    var pixelArray = new Uint8Array( renderSizeX * renderSizeY * 4 );

    for(var i = 0; i < numViews; i++)
    {
        
        camera.position.set(origPosition.x, origPosition.y, origPosition.z);
        var radians = THREE.Math.degToRad(THREE.Math.lerp(start, end, i/(numViews - 1)));
        
        handleOffset(camera, radians);
        
        renderer.render(scene, camera, rtMain, true);
        
        renderer.readRenderTargetPixels(rtMain, 0, 0, renderSizeX, renderSizeY, pixelArray);
    }

Thanks!

2

I guess you can solve this problem with WebGLRenderer.copyTextureToTexture. This method was recently added with R91.

Example: https://threejs.org/examples/#webgl_materials_texture_partialupdate

2 Likes
3

Oh great, that looks like what I need! I ended up solving this in a very roundabout way, but this will make it much easier. Thank you!

1 Like
4

Can you render and assemble these textures into one using WebGL and reading the end result once?

3 Likes