快速（每50ms左右）用圖像更新材質的紋理貼圖會導致嚴重的卡頓

Question

問題：如何在不使瀏覽器阻塞的情況下，快速（以50ms〜200ms的間隔）使用圖像（存儲在HTML5畫布中）更新球體的材質貼圖？

我有一系列全景圖像可以映射到一個球體上。 這些圖像每50ms〜200ms更新一次。 該代碼似乎可以正常工作，但實際上它會非常窒息-導致一些重新繪制跳過或等待2s〜3s出現。

這是網格代碼和紋理（第一個紋理貼圖是一個占位符）：

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

觸發playPanos（0）時 ，它將嘗試使用HTML5畫布中繪制的圖像更新材質紋理貼圖，該圖像存儲在數組“ load_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;
}

謝謝。 請原諒原型樣式代碼。

Answer 1

一些提示：

• 您不需要在每次更新球體紋理時都創建new THREE.Texture() 。 創建一次紋理，然后使用以下material.map.needsUpdate = true;更新它： material.map.needsUpdate = true; 每次您在畫布上下文中繪制新內容時。
• 我想，因為您將畫布存儲在一個數組中，所以沒有動態動畫，只有循環動畫。 在這種情況下，您可以存儲完成的紋理並僅更新material.map而不用存儲在數組中的畫布來更新紋理。
• 如果您的畫布分辨率太高，請嘗試盡可能減小像素尺寸。 我想你已經准備好了。
• 您是否真的需要： side: THREE.DoubleSide ？ 如果THREE.BackSide球體用於天空盒，請嘗試使用THREE.BackSide 。

通過這些優化，您應該能夠以60 fps的速度運行紋理更新。