Texture to data URI in THREE.js

Question

Most of the people have opposite problem, but I want to ask is there any simple way to get texture data back to the data URI. I am using render to texture (RTT) to render the scene in background (with different camera). I want to be able to send this data to the server or just display in img element for test purpose.

Accepted Answer

Thanks guys for the help. I have figured out one solution. Probably it could be done simpler, but this solution works and looks quite fast.

RTT

```
this.renderer.render(this.scene, camera, this.rttTexture, true);
```

Get scene data.

```
this.pixelsIn = new Uint8Array(4 * 1024 * 1024);
var gl = this.renderer.context;
var framebuffer = this.rttTexture.__webglFramebuffer;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.viewport(0, 0, 1024, 1024);
gl.readPixels(0, 0, 1024, 1024, gl.RGBA, gl.UNSIGNED_BYTE, this.pixelsIn);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
```

Create 2d context.

```
this.printScreenCanvas = document.createElement("canvas");
this.printScreenCanvas.width = 1024;
this.printScreenCanvas.height = 1024;
this.printScreenContext = this.printScreenCanvas.getContext('2d');
```

Create storage for 2d context.

```
this.pixelsOut = this.printScreenContext.createImageData(1024, 1024);
```

Must convert data + flip Y.

```
var row, col, k = 4*1024;
for(var i=0; i<this.pixelsIn.length; i++) {
    row = Math.floor(i/k);
    col = i % k;
    this.pixelsOut.data[(1023-row)*k+col] = this.pixelsIn[i];
}
```

Store data in 2d context.

```
this.printScreenContext.putImageData(this.pixelsOut,0,0);
```

Get data URI data.

```
return this.printScreenCanvas.toDataURL();
```

Texture to data URI in THREE.js

Solution

Problem

Related problems