PDA

View Full Version : Composing a new texture out of array of other textures.



freddy50
04-05-2011, 03:50 AM
Hi,

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.
http://i54.tinypic.com/2lsjm86.png

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

thanks,

SteveBaker
04-05-2011, 08:47 PM
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.

freddy50
04-13-2011, 01:59 AM
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 http://home.scarlet.be/~cornetp/ (only tested in firefox 4)

Thanks,

(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() {
cratefunction();
for (var t=0; t < 3; t++) {
var texture = gl.createTexture();
texture.image = crateArray[t];
crateTextures.push(texture);
}

crateArray[0].onload = function () {
handleLoadedTexture(crateTextures)
}

}
function cratefunction(){
initImages();
toSagitaal();
}
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 = canvasData.data[idx + 0];
g = canvasData.data[idx + 1];
b = canvasData.data[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();
crateArray.push(crateImage);
}
}
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";
}