texturing a cylinder with multiple texture

Question

I have one cylinder and I would like to texture it using 36 different bitmaps. The problem that If i texture the cylinder with just one texture, I see that is stretched, like the picture here :

// 90, 90, are top radius, down radius, 50 is the height, 60 segements w, 60 segments height.


reel = new CylinderGeometry(90,90,50,60,60,false,false,true);
   var textureBase2:Texture2DBase = new BitmapTexture(new reelTexture().bitmapData);
   matrial_Reel = new TextureMaterial(textureBase2);
   matrial_Reel.bothSides = true;

   reelMesh = new Mesh(reel, matrial_Reel);
   reel = null;

   reelMesh.mouseEnabled = true;

I would like also to put different textures one down the other, but to group them into one large texture, the problem is with the co-ordinates. I use the following code but still I get two pictures overlap each other

public static const SIZE : int 1024;
public var img1 : Bitmap;
public var img2 : Bitmap;

var bmp:BitmapData=new BitmapData(SIZE,SIZE,false,0);

//Draw img1 at 0,0
bmp.draw(img1); 

//Draw img2 at 512,0
bmp.draw(img2, new Matrix(1,0,0,1, SIZE/2, 0));

enter image description here

Edit:

The new problem is I textured 12 pictures (128*128), but the last pictures is overlapping the last picture. I also want to texture 36 pictures, but the max texture is 4k in away3d, how would I do that ?

Here is a new pic with new code:

render = new BitmapData ( 2048 , 128 , false, 0 );


        for (var j:int = 0; j < bitmaps.length; j++) 
        { 

            if ( j == 0 ) 
            {
                matrix.translate(0,0);
                matrix.scale(1.1,1);
                render.draw(bitmaps[0], matrix);

            }
            else if ( j == bitmaps.length -1 ) 
            { 
                matrix.translate(128,0);
                //matrix.scale(1,1);
                render.draw(bitmaps[j], matrix);
            }
            else 
            {
                matrix.translate(128,0);
                matrix.scale(1.05,1);
                render.draw(bitmaps[j], matrix);

            }

        }


        var m_finalText:TextureMaterial = new TextureMaterial ( new BitmapTexture( render) ) ;

Vesper Vesper · Accepted Answer · 2013-10-01T05:08:03

I think you should make one texture out of 36 your bitmaps, then texture that cylinder with that texture. About how to put many bitmaps into one - say, your bitmaps are SIZE_X wide and SIZE_Y high - use the following:

const NUM_X:int=6; // how many bitmaps in a row
var bitmaps:Vector.<BitmapData>; // the bitmaps in a single array
// for easier reference and for looping
var cb:int; var cr:int; var cc:int;
var p0:Point=new Point();
var bigTexture:BitmapData=new BitmapData(NUM_X*SIZE_X,
  (Math.floor((bitmaps.length-1)/NUM_X)+1)*SIZE_Y,false,0); 
// use true for transparency if you want transparent texture
for (cb=0;cb<bitmaps.length;cb++) {
    cr=cb/NUM_X;
    cc=cb-cr*NUM_X;
    p0.x=cc*SIZE_X;
    p0.y=cr*SIZE_Y;
    bigTexture.copyPixels(bitmaps[cb],bitmaps[cb].rect,p0);
}

texturing a cylinder with multiple texture

1 Answers