Away3D Forum putting multi-bitmapdata into one texture

andreahmed, Member
Posted: 30 September 2013 07:58 AM Total Posts: 62

Hi all,

I have about 20 bitmapdata pictures, and I would like to store them in a large rectangle, then change that large rectangle into a texturematerial, is that possible ?

SharpEdge, Member
Posted: 30 September 2013 09:43 AM Total Posts: 94 [ # 1 ]

You want to merge at runtime dynamically 20 images into one texture right?

Ok so you should create a new BitmapData with the final size and then draw onto it one by one your 20 images (using draw function).

Now the question is how to offset each image and indicate it’s position inside the final bitmap?

Using a custom Matrix you can indicate a translation to apply to the image before it is drawn on the final bitmap.

Example ( this draw 2 images 4 times alternating them, obtaining a checker pattern)

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)); 

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

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

If you don’t like Matrix you could use a main Sprite adding to it your 20 images and positioning them using simpler x,y properties then draw your Sprite onto the bitmapdata.

When you have your final bitmapdata you can create your Texture.

If it’s not clear ask me.

andreahmed, Member
Posted: 30 September 2013 09:57 AM Total Posts: 62 [ # 2 ]

Thanks so much for the fast reply.

I have two problems
1) the textures are sized 128*128 * 20 will result in a large texture which is not supported by the stage3D

2) I tried to just texture one image and I get it distorted I use the following idea. I feel also the distortion is because of not correct UV cords.
3) Would you show me the sprite soultion ?

private var m_renderDest:Point;
public  var m_normalImage:BitmapData; // the bitmapdate
private var m_normalTex:BitmapMaterial;
m_renderDest.x = 128 * m_index;  // index of the textures
m_renderDest.y = 128 * m_index;

m_normalTex.bitmap.copyPixels(m_normalImage, m_normalImage.rect, m_renderDest);   

// then convert it to texture
m_finalText = new TextureMaterial ( new BitmapTexture( m_normalImage ) ) ;  
m_finalText.mipmap = false;   
// then apply it to the mesh
mesh.material = m_finalText; 

The result is like that:

SharpEdge, Member
Posted: 30 September 2013 10:06 AM Total Posts: 94 [ # 3 ]

I’m not understanding what kind of final result you need, can you be more specific? what you need to do?

For the limit on the resolution you can split your final image in 2 or more images, but from what i see: (128 * 20 < 4,095) and (128 * 128 * 20 < 16,777,215 ) so you are not exceeding the limits and this shouldn’t be a problem for you

andreahmed, Member
Posted: 30 September 2013 10:09 AM Total Posts: 62 [ # 4 ]

Thanks so much for the quick reply.

1) I have tried your idea, but I get a distorted texture as attached in the picture. When the final texture is applied for the cylinder as shown, the texture is stretched.

2) I may have 36 pictures * 128, that is a problem actually. so I will split the pictures in two 3 big images * 12 pictures . good idea, but how to combine the three images into one texture, considering the constraints ?

SharpEdge, Member
Posted: 30 September 2013 10:24 AM Total Posts: 94 [ # 5 ]

Clearly it’s streched because if it’s a square texture, the circumference should be equal to the height of the cylinder.

Maybe there is also another problem, i don’t know how it’s mapped in away3d the cylinder, you should wait someone else to help you with UV coord.

Regarding the size as i said before, we can’t bypass the limit imposed by Adobe so the only solution is to split the image in multiple images.
Said so i also think that there is a problem at the base of the way you had architectured the project but i can’t say this for sure if you don’t explain to me what are you trying to achieve.

Fabrice Closier, Administrator
Posted: 30 September 2013 10:32 AM Total Posts: 1265 [ # 6 ]

If you do need uv adjustments, you may want to take look at the SpriteSheetAnimator and its tools helper, you may find an easy way to adjust your uv’s at very low effort in there… This class despite its obvious animation aspect would do this on gpu. Which is way more efficient than other destructive options that you can find in the engien regarding uv manipulation. Take a look at the tutorial section if you never used it before.

andreahmed, Member
Posted: 30 September 2013 10:34 AM Total Posts: 62 [ # 7 ]

Thanks for the reply.

I would like to texture a cylinder with 128*128, 32 pictures. that’s really what I would like to achieve.

andreahmed, Member
Posted: 30 September 2013 10:39 AM Total Posts: 62 [ # 8 ]

@Fabrice
Do you think its only a UV problem or what ?
Because I tried a simple application like that, and still the texture is distorted

[Embed(source="../embedded/symbol_coin_reel_1.png")]
   
  public var reelTexture:Class;   
       
        private var reel:CylinderGeometry;
        private var reelMesh:Mesh;
     
        private var away3DScene:Away3DScene;
      private var texture_Reel:BitmapTexture;
      private var matrial_Reel:TextureMaterial;
   
 
  /**
   * Constructor
   */
  public function reelTest()
  {
   super();
 
   
    away3DScene = Away3DScene.getInstance();
   away3DScene.init(true,true); // paramater 1 = show stats, 2 = show trident, 3 = show axes grid  
   addChild(away3DScene)
   
   
    
   initScene();
   
  }
 
  
  
  // ---------------------------------------------------------------------------------------------------------------------------
  private function initScene():void
  {
       
   // Setup what we want in our Away3D scene
   initLights();
   initMaterials();
   init3DObjects();
   
   // Setup our SWF resize event listener and execute it at least once to ensure elements are in their correct places
   stage.addEventListener(Event.RESIZE,resizeHandler);
   
   // Force position update
   resizeHandler();
   
   // Enter frame animation handler
   stage.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
  }
   
  private function initLights():void
  {
    
  }
  
  
  
   
  private function init3DObjects():void
  {
   reel = new CylinderGeometry(90,90,50,60,60,false,false,true);
   //matrial_Reel = new ColorMaterial(Math.random()*0xFFFFFF);
   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;
    
   away3DScene.scene.addChild(reelMesh);  
   reelMesh.rotationZ = 90;
  } 

SharpEdge, Member
Posted: 30 September 2013 10:50 AM Total Posts: 94 [ # 9 ]

From your example:
the circumference is 565 and the height is 50.

You should use a Radius of 6,28 and height of 50.

Image Limit:
You can create 32 cylinders (height = circumference = 128) and create 32 final images each for one cylinder.

Fabrice Closier, Administrator
Posted: 30 September 2013 11:07 AM Total Posts: 1265 [ # 10 ]

a native primitive is mapped 0-1. where a square map would be 1-1 on any PlanePrimitive having square dimensions. The moment you change the receiver aspect ratio, you do get distorts unless you either adjust the map, the model, the uvs or combination of the 3. If you have the circumference correct and the height equal to it, a square map will fit perfectly.

Now as about having 32 materials 128x128, instead you could have 2 using 512x512 or a single one using a 1024x1024. You then simply offset and scale the uv’s per geometry. By merging them during build (where you update the uv’s in the loop) you also could end up with one “cylinders” mesh instead of 32.

andreahmed, Member
Posted: 30 September 2013 11:38 AM Total Posts: 62 [ # 11 ]

Thanks for the reply.

Sorry its off topic: I would like to rotate the bitmap before texturing it, I tried the following code, but unfortunately it didn’t work.

var bi:BitmapData = new reelTexture().bitmapData;
   var rotationMatrix:Matrix = new Matrix();
   rotationMatrix.rotate(-90);
   rotationMatrix.translate(bi.width, bi.height);
   var output:Bitmap = new Bitmap(bi);
   var textureBase2:Texture2DBase = new BitmapTexture(output.bitmapData);
   
   matrial_Reel = new TextureMaterial(textureBase2); 

2) Reducing the height of the cylinders to equal the circumference to texture it correctly, is fine, but that would reduce the shape of the cylinder and I want it to be bigger and has a larger height, so in that case should I change the UV cord ? The spriteanimation sample doesn’t show really how to change the UV cords.

andreahmed, Member
Posted: 30 September 2013 12:38 PM Total Posts: 62 [ # 12 ]

how do I assign the bitmaps dynamically at runtime ?
Using the following code, I had to define 32 bitmaps, line by line…

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)); 

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

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

SharpEdge, Member
Posted: 30 September 2013 12:40 PM Total Posts: 94 [ # 13 ]

This was an example you could use a for cycle and some algorithms to parametrize the positions.

andreahmed, Member
Posted: 30 September 2013 01:27 PM Total Posts: 62 [ # 14 ]

I adjusted the cylinder like that:

reel = new CylinderGeometry(0.79, 0.79,5,16,1,false,false,true);

 var bmp:BitmapData = new BitmapData( 128, 128,false,0);
          m_finalText = new TextureMaterial ( new BitmapTexture( bmp) ) ;
   m_finalText.mipmap = true; 

The result is like that, but still don’t you see its little bit stretched too or zoomed?

I tried to zoom the camera so much to see the cylinders :/
Thanks for help

andreahmed, Member
Posted: 30 September 2013 03:25 PM Total Posts: 62 [ # 15 ]

I have attached the project with the textures. Still the textures can not be located correctly and they are little bit stretched. Would you check it please?

putting multi-bitmapdata into one texture Software: Away3D 4.x

andreahmed, Member Posted: 30 September 2013 07:58 AM Total Posts: 62 Hi all, I have about 20 bitmapdata pictures, and I would like to store them in a large rectangle, then change that large rectangle into a texturematerial, is that possible ?
SharpEdge, Member Posted: 30 September 2013 09:43 AM Total Posts: 94 [ # 1 ] You want to merge at runtime dynamically 20 images into one texture right? Ok so you should create a new BitmapData with the final size and then draw onto it one by one your 20 images (using draw function). Now the question is how to offset each image and indicate it’s position inside the final bitmap? Using a custom Matrix you can indicate a translation to apply to the image before it is drawn on the final bitmap. Example ( this draw 2 images 4 times alternating them, obtaining a checker pattern) `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)); //Draw img1 at 512,512 bmp.draw(img1, new Matrix(1,0,0,1, SIZE/2, SIZE/2)); //Draw img1 at 0,512 bmp.draw(img2, new Matrix(1,0,0,1, 0, SIZE/2));` If you don’t like Matrix you could use a main Sprite adding to it your 20 images and positioning them using simpler x,y properties then draw your Sprite onto the bitmapdata. When you have your final bitmapdata you can create your Texture. If it’s not clear ask me.
andreahmed, Member Posted: 30 September 2013 09:57 AM Total Posts: 62 [ # 2 ] Thanks so much for the fast reply. I have two problems 1) the textures are sized 128128 20 will result in a large texture which is not supported by the stage3D 2) I tried to just texture one image and I get it distorted I use the following idea. I feel also the distortion is because of not correct UV cords. 3) Would you show me the sprite soultion ? private var m_renderDest:Point; public var m_normalImage:BitmapData; // the bitmapdate private var m_normalTex:BitmapMaterial; m_renderDest.x = 128 * m_index; // index of the textures m_renderDest.y = 128 * m_index; m_normalTex.bitmap.copyPixels(m_normalImage, m_normalImage.rect, m_renderDest); // then convert it to texture m_finalText = new TextureMaterial ( new BitmapTexture( m_normalImage ) ) ; m_finalText.mipmap = false; // then apply it to the mesh mesh.material = m_finalText; The result is like that:
SharpEdge, Member Posted: 30 September 2013 10:06 AM Total Posts: 94 [ # 3 ] I’m not understanding what kind of final result you need, can you be more specific? what you need to do? For the limit on the resolution you can split your final image in 2 or more images, but from what i see: (128 * 20 < 4,095) and (128 * 128 * 20 < 16,777,215 ) so you are not exceeding the limits and this shouldn’t be a problem for you
andreahmed, Member Posted: 30 September 2013 10:09 AM Total Posts: 62 [ # 4 ] Thanks so much for the quick reply. 1) I have tried your idea, but I get a distorted texture as attached in the picture. When the final texture is applied for the cylinder as shown, the texture is stretched. 2) I may have 36 pictures * 128, that is a problem actually. so I will split the pictures in two 3 big images * 12 pictures . good idea, but how to combine the three images into one texture, considering the constraints ?
SharpEdge, Member Posted: 30 September 2013 10:24 AM Total Posts: 94 [ # 5 ] Clearly it’s streched because if it’s a square texture, the circumference should be equal to the height of the cylinder. Maybe there is also another problem, i don’t know how it’s mapped in away3d the cylinder, you should wait someone else to help you with UV coord. Regarding the size as i said before, we can’t bypass the limit imposed by Adobe so the only solution is to split the image in multiple images. Said so i also think that there is a problem at the base of the way you had architectured the project but i can’t say this for sure if you don’t explain to me what are you trying to achieve.
Fabrice Closier, Administrator Posted: 30 September 2013 10:32 AM Total Posts: 1265 [ # 6 ] If you do need uv adjustments, you may want to take look at the SpriteSheetAnimator and its tools helper, you may find an easy way to adjust your uv’s at very low effort in there… This class despite its obvious animation aspect would do this on gpu. Which is way more efficient than other destructive options that you can find in the engien regarding uv manipulation. Take a look at the tutorial section if you never used it before.
andreahmed, Member Posted: 30 September 2013 10:34 AM Total Posts: 62 [ # 7 ] Thanks for the reply. I would like to texture a cylinder with 128*128, 32 pictures. that’s really what I would like to achieve.
andreahmed, Member Posted: 30 September 2013 10:39 AM Total Posts: 62 [ # 8 ] @Fabrice Do you think its only a UV problem or what ? Because I tried a simple application like that, and still the texture is distorted [Embed(source="../embedded/symbol_coin_reel_1.png")] public var reelTexture:Class; private var reel:CylinderGeometry; private var reelMesh:Mesh; private var away3DScene:Away3DScene; private var texture_Reel:BitmapTexture; private var matrial_Reel:TextureMaterial; /** * Constructor / public function reelTest() { super(); away3DScene = Away3DScene.getInstance(); away3DScene.init(true,true); // paramater 1 = show stats, 2 = show trident, 3 = show axes grid addChild(away3DScene) initScene(); } // --------------------------------------------------------------------------------------------------------------------------- private function initScene():void { // Setup what we want in our Away3D scene initLights(); initMaterials(); init3DObjects(); // Setup our SWF resize event listener and execute it at least once to ensure elements are in their correct places stage.addEventListener(Event.RESIZE,resizeHandler); // Force position update resizeHandler(); // Enter frame animation handler stage.addEventListener(Event.ENTER_FRAME,enterFrameHandler); } private function initLights():void { } private function init3DObjects():void { reel = new CylinderGeometry(90,90,50,60,60,false,false,true); //matrial_Reel = new ColorMaterial(Math.random()0xFFFFFF); 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; away3DScene.scene.addChild(reelMesh); reelMesh.rotationZ = 90; }
SharpEdge, Member Posted: 30 September 2013 10:50 AM Total Posts: 94 [ # 9 ] From your example: the circumference is 565 and the height is 50. You should use a Radius of 6,28 and height of 50. Image Limit: You can create 32 cylinders (height = circumference = 128) and create 32 final images each for one cylinder.
Fabrice Closier, Administrator Posted: 30 September 2013 11:07 AM Total Posts: 1265 [ # 10 ] a native primitive is mapped 0-1. where a square map would be 1-1 on any PlanePrimitive having square dimensions. The moment you change the receiver aspect ratio, you do get distorts unless you either adjust the map, the model, the uvs or combination of the 3. If you have the circumference correct and the height equal to it, a square map will fit perfectly. Now as about having 32 materials 128x128, instead you could have 2 using 512x512 or a single one using a 1024x1024. You then simply offset and scale the uv’s per geometry. By merging them during build (where you update the uv’s in the loop) you also could end up with one “cylinders” mesh instead of 32.
andreahmed, Member Posted: 30 September 2013 11:38 AM Total Posts: 62 [ # 11 ] Thanks for the reply. Sorry its off topic: I would like to rotate the bitmap before texturing it, I tried the following code, but unfortunately it didn’t work. `var bi:BitmapData = new reelTexture().bitmapData; var rotationMatrix:Matrix = new Matrix(); rotationMatrix.rotate(-90); rotationMatrix.translate(bi.width, bi.height); var output:Bitmap = new Bitmap(bi); var textureBase2:Texture2DBase = new BitmapTexture(output.bitmapData); matrial_Reel = new TextureMaterial(textureBase2);` 2) Reducing the height of the cylinders to equal the circumference to texture it correctly, is fine, but that would reduce the shape of the cylinder and I want it to be bigger and has a larger height, so in that case should I change the UV cord ? The spriteanimation sample doesn’t show really how to change the UV cords.
andreahmed, Member Posted: 30 September 2013 12:38 PM Total Posts: 62 [ # 12 ] how do I assign the bitmaps dynamically at runtime ? Using the following code, I had to define 32 bitmaps, line by line… `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)); //Draw img1 at 512,512 bmp.draw(img1, new Matrix(1,0,0,1, SIZE/2, SIZE/2)); //Draw img1 at 0,512 bmp.draw(img2, new Matrix(1,0,0,1, 0, SIZE/2));`
SharpEdge, Member Posted: 30 September 2013 12:40 PM Total Posts: 94 [ # 13 ] This was an example you could use a for cycle and some algorithms to parametrize the positions.
andreahmed, Member Posted: 30 September 2013 01:27 PM Total Posts: 62 [ # 14 ] I adjusted the cylinder like that: `reel = new CylinderGeometry(0.79, 0.79,5,16,1,false,false,true); var bmp:BitmapData = new BitmapData( 128, 128,false,0); m_finalText = new TextureMaterial ( new BitmapTexture( bmp) ) ; m_finalText.mipmap = true;` The result is like that, but still don’t you see its little bit stretched too or zoomed? I tried to zoom the camera so much to see the cylinders :/ Thanks for help
andreahmed, Member Posted: 30 September 2013 03:25 PM Total Posts: 62 [ # 15 ] I have attached the project with the textures. Still the textures can not be located correctly and they are little bit stretched. Would you check it please?

putting multi-bitmapdata into one texture

Login

Away3D Forum

Member Login