Jump to content

optimization for a dynamic texture


Recommended Posts



I want to show data on a mesh ( an histogram, one axis is data , other is time). I use a dynamic texture and the render loop to slide curent content by one column, then i create an array  to stock my data then i rewrite the content of the array on the first line of my texture context.


This is an exemple ( playground doesn't work) of the structure. This structure work  but i don't thing i have to touch two time conText with the same function( cost FPS). I'm completly conscient that a better way exist like paste each pixel in image data, but before i need your suggestions.

var dynText = new BABYLON.DynamicTexture("dino",512,scene);var conText = dynText.getContext();var size = dynText.getSize();var pixelIndex =0;// render loopengine.runRenderLoop(function () {	// array of my data, each loop i've got completly new data [0,1]	donnee = ligne();	//slide by one all my previous data, NOTICE the one at the end 	conText.putImageData(conText.getImageData(0, 0, size.width, size.height), 0, 1);		// write the first line with my data	imageData = conText.getImageData(0, 0, size.width, size.height);		for(var j =0 ;j<size.width;j++){		pixelIndex = j*4;		// grey scale		imageData[pixelIndex ] = donnee[j]*255; // red one		imageData[pixelIndex + 1 ] = donnee[j]*255; // green oen		imageData[pixelIndex + 2] = donnee[j]*255; // blue one		imageData[pixelIndex + 3] = 255; // alpha	}		conText.putImageData(imageData,0,0);        dynText.update();			        scene.render();});
Link to comment
Share on other sites

Well, generating a new texture each frame is not such a good idea because it's really costly in fps


... and human eyeballs can't reasonably follow/understand data evolving 60 times per second


That said, if you want to display data with graphics in a 3D engine, why making a 2D texture instead of using directly 3D shapes (planes, boxes, etc) ?


If you still want a 2D texture applied to a 3D mesh, I would suggest to re-generate it at some frequency relative to the data refresh only ( with setInterval() ) instead of at each frame.

Link to comment
Share on other sites



It seems you have simpler solutions at hand. As Jerome said, using meshes instead of a dynamic texture could prove useful.


If you want to stick to a DynamicTexture, then I'd avise rect(x, y, width, height) to draw stuff, instead of put/getImageData. Currently your logic is:

  • getImageData of the whole texture
  • putImageData shifted 1 pixel
  • getImageData of the whole texture
  • draw new first line in image data
  • putImageData at the same place

Why not:

  • getImageData of the whole texture
  • putImageData shifted 1 pixel
  • draw new first line with rect()
Or even:
  • save new data in an array, pushing older data back
  • draw every line from the array using rect()

And of course only update when necessary!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...