Composing a new texture out of array of other textures.


I’m trying to do the following: I 'm drawing 4 256x256 images on the screen, and need from each image a rectangle made of the pixels (0,0) to (64,256), and these 4 rectangles need to form a new texture.

How can I load an array of textures to a framebuffer? I can then maybe read back pixels from that framebuffer with readPixels()?

Any help or advise is appreciated


Do you really need the resulting image back in the CPU?

Readpixels is pretty expensive and if you’re only going to display the results then you’re better off rendering four quadrilaterals (each with a different texture and with appropriate texture coordinates) into an FBO.

But if you need the results back in the CPU then I guess you’re going to need readpixels to get it there.

Thanks for you reply! I’ve got it working now, but I’m rendering from a 2D canvas element. The problem is now that all the textures stay black upon loading the page. After a refresh everything is ok. How can I make them load immediately? I have the following code included, and the site in action is at (only tested in firefox 4)


(The code might seem strange: basically what I’m trying to do is draw different images on a canvas, and then read the pixels and write them to a new image. (PNGlib.js). I’m trying to build a 3D image out of a 2D slice dataset)

        var crateTextures = new Array();
	var crateArray = new Array();
	var imageArray = new Array();
	var crateImage
	var elem;
	var context;
	var r;
	var g;
	var b;
function initTexture() {			
			for (var t=0; t < 3; t++) {
            var texture = gl.createTexture();
            texture.image = crateArray[t];

        crateArray[0].onload = function () {

	function cratefunction(){
	function toSagitaal(){
		elem = document.getElementById('myCanvas');
		context = elem.getContext('2d');
		for(var z=0; z<3; z++){
			context.drawImage(imageArray[z], 0, 0);
			var p = new PNGlib(256, 256, 256); // construcor takes height, weight and color-depth
			var background = p.color(1, 1, 0, 1); // set the background transparent
			var canvasData = context.getImageData(0, 0, elem.width, elem.height);
			for (var i = 0; i < 256; i++) {
					for (var j = 0; j < 256; j++) {
							var idx = (j * canvasData.width + i) * 4;
								r =[idx + 0];
								g =[idx + 1];							
								b =[idx + 2];							
								p.buffer[p.index(255-i, j + 0)] = p.color(r, g, b);
		crateImage = new Image();
		crateImage.src = "data:image/png;base64,"+p.getBase64();
	function initImages() {
				imageArray[0] = new Image();
		imageArray[0].src = "./data/data0000.png";
				imageArray[1] = new Image();
		imageArray[1].src = "./data/data0001.png";
				imageArray[2] = new Image();
		imageArray[2].src = "./data/data0002.png";