Results 1 to 3 of 3

Thread: Composing a new texture out of array of other textures.

  1. #1
    Junior Member
    Join Date
    Apr 2011

    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


  2. #2
    Senior Member
    Join Date
    May 2010

    Re: Composing a new texture out of array of other textures.

    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.

  3. #3
    Junior Member
    Join Date
    Apr 2011

    Re: Composing a new texture out of array of other textures.

    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)

    Code :
            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";

Similar Threads

  1. show texture with vertex array routine
    By jackhat25 in forum OpenGL ES
    Replies: 0
    Last Post: 03-26-2009, 06:45 AM
  2. Composing Alpha only texture images
    By iswhite in forum OpenGL ES
    Replies: 4
    Last Post: 05-15-2008, 10:37 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Proudly hosted by Digital Ocean