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.
A few tips:
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. material.map
instead of updating the texture with the canvases stored in the array. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.