Away3D Forum What’s an optimal way to update a texture?

jansensan, Newbie
Posted: 09 January 2012 06:30 PM Total Posts: 16

I would like to know what’s the best way to optimize the update of a material.

What I’m doing so far is I have visual assets from an embedded SWC (created in the Flash IDE). I instantiate the MC, then draw it to a BitmapData. When I move something with TweenMax in the MovieClip children, I redraw the BitmapData, however that is considerably slow sometimes (it can go from 60 fps to 15 fps)

So I wonder what are the alternatives? One thing is the MC is not a simple playback timelines, elements are placed and are dynamic (just so I don’t get told to simply playback the MC )

Thanks!

PS: Below is an example of the code:

package 
{
 import away3d.containers.View3D;
 import away3d.materials.BitmapMaterial;
 import away3d.primitives.Plane;

 import net.hires.debug.Stats;

 import com.greensock.TweenMax;
 import com.greensock.easing.Cubic;

 import flash.display.BitmapData;
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 import flash.geom.Matrix;
 
 [SWF(frameRate="60")]
 public class Main extends Sprite
 {
  private const WIDTH   :uint = 1280;
  private const HEIGHT   :uint = 720;
  
  private const MATERIAL_WIDTH :uint = 1024;
  private const MATERIAL_HEIGHT :uint = 512;
  
  private const PLANE_WIDTH  :uint = 640;
  private const PLANE_HEIGHT :uint = 360;
  
  private var _assetsMC :AssetsMC;
  private var _bitmapData :BitmapData;
  private var _matrix  :Matrix;
  
  private var _material :BitmapMaterial;
  private var _plane  :Plane;
  private var _view3D  :View3D;
  
  
  public function Main()
  {
   initStage();
   init();
  }
  
  
  private function initStage():void
  {
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;
  }
  
  
  private function init():void
  {
   
   _matrix = new Matrix();
   _matrix.scale(MATERIAL_WIDTH / PLANE_WIDTH, MATERIAL_HEIGHT / PLANE_HEIGHT);
   
   _assetsMC = new AssetsMC();
   
   _bitmapData = new BitmapData(MATERIAL_WIDTH, MATERIAL_HEIGHT);
   _bitmapData.draw(_assetsMC, _matrix, null, null, null, true);
   
   _material = new BitmapMaterial(_bitmapData);
   _material.bothSides = true;
   
   _plane = new Plane(_material, PLANE_WIDTH, PLANE_HEIGHT);
   
   _view3D = new View3D();
   _view3D.scene.addChild(_plane);
   _view3D.width = WIDTH;
   _view3D.height = HEIGHT;
   
   _assetsMC.width *= 0.25;
   _assetsMC.x = WIDTH - _assetsMC.width;
   _assetsMC.height *= 0.25;
   _assetsMC.y = HEIGHT - _assetsMC.height;
   
   addChild(_view3D);
   addChild(_assetsMC);
   addChild(new Stats());
   
   addEventListener(Event.ENTER_FRAME, updateHandler);
   
   moveLeft();
  }
  
  
  private function moveLeft():void
  {
   TweenMax.to(_assetsMC.circleMC, 0.45, {x:0, ease:Cubic.easeInOut, onComplete:moveLeftComplete});
  }
  
  
  private function moveLeftComplete():void
  {
   moveRight();
  }
  
  
  private function moveRight():void
  {
   var xTo:int = 640 - _assetsMC.circleMC.width;
   TweenMax.to(_assetsMC.circleMC, 0.45, {x:xTo, ease:Cubic.easeInOut, onComplete:moveRightComplete});
  }
  
  
  private function moveRightComplete():void
  {
   moveLeft();
  }


  private function updateHandler(event:Event):void
  {
   _bitmapData.draw(_assetsMC, _matrix, null, null, null, true);
   
   _material.updateTexture();
   
   _plane.rotationY += 3;
   
   _view3D.render();
  }
 }
} 

Matse, Sr. Member
Posted: 09 January 2012 06:57 PM Total Posts: 149 [ # 1 ]

Not sure about the best way to update a texture (and I switched to the dev branch where materials/textures are a bit different) but looking at your code my guess would be that the slowdown is caused by the part that draws the MovieClip to a BitmapData, no ?

Did you run some “benchmarks” on parts of your code, showing there is something to gain on the texture update part ?

Something like :

private function updateHandler(event:Event):void
{
  var i:int;
  var t:int = getTimer();
   
  // run the code several times to get more meaningful results
  for (i = 0; i < 100; i++) {
     _bitmapData.draw(_assetsMC, _matrix, null, null, null, true);
   }
  trace("draw", (getTimer() - t)/100 + "ms");

  t = getTimer();
  // run the code several times to get more meaningful results
  for (i = 0; i < 100; i++) {
     _material.updateTexture();
  }
  trace("updateTexture", (getTimer() - t)/100 + "ms");
   
   _plane.rotationY += 3;
   
   _view3D.render();
  } 

Of course the “benchmark” (sorry cannot think of a better word although there is surely one) code should be commented out most of the time or it will unnecesseraly slow your app quite a bit

jansensan, Newbie
Posted: 09 January 2012 07:01 PM Total Posts: 16 [ # 2 ]

Yea I’m thinking as well that this is where the slowness happens, however I do have to draw to the BitmapData to be able to update what is displayed on the Plane. I wish I could use BitmapData.copyPixels() as it’s quite faster, but the source is a Sprite… My belief is that even if the assets were not from the Flash IDE but build programmatically, rendering a class to a BitmapData would slow down majorly. Is there an ideal alternative to that?

theMightyAtom, Sr. Member
Posted: 10 January 2012 09:31 AM Total Posts: 669 [ # 3 ]

I realise it’s not a strategy for all situations, and your example code may be simpler than your actual project, but if you have shapes moving around on a plane, why not have a 3D object (plane) for each shape and move them around instead?

The only other suggestion is use a square, power of 2 bitmap , and maybe reduce size and use a scaling Matrix, depending of course on how large the object actually is on screen.

Good Luck!

jansensan, Newbie
Posted: 10 January 2012 03:57 PM Total Posts: 16 [ # 4 ]

Thanks for your suggestion theMightyAtom, but as you have guessed it, the project contains different things.

The assets have been designed in the Flash IDE and contain TextLayout textfields, because there is a need for dynamic text that is data driven, multilingual and requires exponents.

The textfield is updated as the user interfaces with the app, and then that text is animated with Tweens as other 3D objects move around. That is why I am redrawing the asset and rescaling it to fit into a power of 2 Bitmap via a Matrix.

Then I might need to skip a frame in the rendering while this happens…

What’s an optimal way to update a texture? Software: Away3D 4.x

jansensan, Newbie Posted: 09 January 2012 06:30 PM Total Posts: 16 I would like to know what’s the best way to optimize the update of a material. What I’m doing so far is I have visual assets from an embedded SWC (created in the Flash IDE). I instantiate the MC, then draw it to a BitmapData. When I move something with TweenMax in the MovieClip children, I redraw the BitmapData, however that is considerably slow sometimes (it can go from 60 fps to 15 fps) So I wonder what are the alternatives? One thing is the MC is not a simple playback timelines, elements are placed and are dynamic (just so I don’t get told to simply playback the MC ) Thanks! PS: Below is an example of the code: package { import away3d.containers.View3D; import away3d.materials.BitmapMaterial; import away3d.primitives.Plane; import net.hires.debug.Stats; import com.greensock.TweenMax; import com.greensock.easing.Cubic; import flash.display.BitmapData; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.geom.Matrix; [SWF(frameRate="60")] public class Main extends Sprite { private const WIDTH :uint = 1280; private const HEIGHT :uint = 720; private const MATERIAL_WIDTH :uint = 1024; private const MATERIAL_HEIGHT :uint = 512; private const PLANE_WIDTH :uint = 640; private const PLANE_HEIGHT :uint = 360; private var _assetsMC :AssetsMC; private var _bitmapData :BitmapData; private var _matrix :Matrix; private var _material :BitmapMaterial; private var _plane :Plane; private var _view3D :View3D; public function Main() { initStage(); init(); } private function initStage():void { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; } private function init():void { _matrix = new Matrix(); _matrix.scale(MATERIAL_WIDTH / PLANE_WIDTH, MATERIAL_HEIGHT / PLANE_HEIGHT); _assetsMC = new AssetsMC(); _bitmapData = new BitmapData(MATERIAL_WIDTH, MATERIAL_HEIGHT); _bitmapData.draw(_assetsMC, _matrix, null, null, null, true); _material = new BitmapMaterial(_bitmapData); _material.bothSides = true; _plane = new Plane(_material, PLANE_WIDTH, PLANE_HEIGHT); _view3D = new View3D(); _view3D.scene.addChild(_plane); _view3D.width = WIDTH; _view3D.height = HEIGHT; _assetsMC.width = 0.25; _assetsMC.x = WIDTH - _assetsMC.width; _assetsMC.height = 0.25; _assetsMC.y = HEIGHT - _assetsMC.height; addChild(_view3D); addChild(_assetsMC); addChild(new Stats()); addEventListener(Event.ENTER_FRAME, updateHandler); moveLeft(); } private function moveLeft():void { TweenMax.to(_assetsMC.circleMC, 0.45, {x:0, ease:Cubic.easeInOut, onComplete:moveLeftComplete}); } private function moveLeftComplete():void { moveRight(); } private function moveRight():void { var xTo:int = 640 - _assetsMC.circleMC.width; TweenMax.to(_assetsMC.circleMC, 0.45, {x:xTo, ease:Cubic.easeInOut, onComplete:moveRightComplete}); } private function moveRightComplete():void { moveLeft(); } private function updateHandler(event:Event):void { _bitmapData.draw(_assetsMC, _matrix, null, null, null, true); _material.updateTexture(); _plane.rotationY += 3; _view3D.render(); } } }
Matse, Sr. Member Posted: 09 January 2012 06:57 PM Total Posts: 149 [ # 1 ] Not sure about the best way to update a texture (and I switched to the dev branch where materials/textures are a bit different) but looking at your code my guess would be that the slowdown is caused by the part that draws the MovieClip to a BitmapData, no ? Did you run some “benchmarks” on parts of your code, showing there is something to gain on the texture update part ? Something like : private function updateHandler(event:Event):void { var i:int; var t:int = getTimer(); // run the code several times to get more meaningful results for (i = 0; i < 100; i++) { _bitmapData.draw(_assetsMC, _matrix, null, null, null, true); } trace("draw", (getTimer() - t)/100 + "ms"); t = getTimer(); // run the code several times to get more meaningful results for (i = 0; i < 100; i++) { _material.updateTexture(); } trace("updateTexture", (getTimer() - t)/100 + "ms"); _plane.rotationY += 3; _view3D.render(); } Of course the “benchmark” (sorry cannot think of a better word although there is surely one) code should be commented out most of the time or it will unnecesseraly slow your app quite a bit
jansensan, Newbie Posted: 09 January 2012 07:01 PM Total Posts: 16 [ # 2 ] Yea I’m thinking as well that this is where the slowness happens, however I do have to draw to the BitmapData to be able to update what is displayed on the Plane. I wish I could use BitmapData.copyPixels() as it’s quite faster, but the source is a Sprite… My belief is that even if the assets were not from the Flash IDE but build programmatically, rendering a class to a BitmapData would slow down majorly. Is there an ideal alternative to that?
theMightyAtom, Sr. Member Posted: 10 January 2012 09:31 AM Total Posts: 669 [ # 3 ] I realise it’s not a strategy for all situations, and your example code may be simpler than your actual project, but if you have shapes moving around on a plane, why not have a 3D object (plane) for each shape and move them around instead? The only other suggestion is use a square, power of 2 bitmap , and maybe reduce size and use a scaling Matrix, depending of course on how large the object actually is on screen. Good Luck!
jansensan, Newbie Posted: 10 January 2012 03:57 PM Total Posts: 16 [ # 4 ] Thanks for your suggestion theMightyAtom, but as you have guessed it, the project contains different things. The assets have been designed in the Flash IDE and contain TextLayout textfields, because there is a need for dynamic text that is data driven, multilingual and requires exponents. The textfield is updated as the user interfaces with the app, and then that text is animated with Tweens as other 3D objects move around. That is why I am redrawing the asset and rescaling it to fit into a power of 2 Bitmap via a Matrix. Then I might need to skip a frame in the rendering while this happens…

What’s an optimal way to update a texture?

Login

Away3D Forum

Member Login