Updating a material's texture map with images rapidly (every 50ms or so) causes huge stuttering

Question

Question: How should I update a sphere's material texture map with images (stored in a HTML5 canvas) very rapidly (50ms ~ 200ms interval) without the browser choking?

I have a series of panoramic images to map onto a sphere. These images are updated every 50ms ~ 200ms. The code seems to work but in practice it chokes very badly - causing some re-draws to skip or wait for 2s ~ 3s to show up.

Here is the mesh code and the texture (first texture map is a placeholder):

var geometry = new THREE.SphereGeometry(100.0, 64, 64);
var material = new THREE.MeshBasicMaterial({
  map: THREE.ImageUtils.loadTexture(image_path), // placeholder
  side: THREE.DoubleSide,
});

When playPanos(0) is triggered, it tries to update the material texture map with the image drawn in a HTML5 canvas, stored in an array “loaded_canvas”:

function playPanos(curr_id) {
  if (curr_id >= loaded_canvas.length) return;

  paintPanos(curr_id);

  setTimeout(function() {
    playPanos(curr_id + 1);
  }, 100); // update every 100ms
}

function paintPanos(curr_id) {
  material.map = new THREE.Texture(loaded_canvas[curr_id]);
  material.map.needsUpdate = true;
}

Thanks. Please pardon prototype style code.

Answer 1

A few tips:

• You don't need to create new THREE.Texture() everytime you update the sphere texture. Create the texture once, and then update it using: material.map.needsUpdate = true; each time you draw something new in the canvas context.
• I supose, since you store the canvases in an array, you don't have a dynamic animation, you have just a loop animation. In that case you could store the finished textures and just update material.map instead of updating the texture with the canvases stored in the array.
• If your canvas resolution is too high, try to reduce the pixel dimensions as much as possible. I guess you allready done this.
• Do you really need: side: THREE.DoubleSide? Try using THREE.BackSide if you are using the sphere for a skybox.

With theese optimisations, you should be able to run texture updates at 60 fps.