[英]Updating a material's texture map with images rapidly (every 50ms or so) causes huge stuttering
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? 问题:如何在不使浏览器阻塞的情况下,快速(以50ms〜200ms的间隔)使用图像(存储在HTML5画布中)更新球体的材质贴图?
I have a series of panoramic images to map onto a sphere. 我有一系列全景图像可以映射到一个球体上。 These images are updated every 50ms ~ 200ms.
这些图像每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.
该代码似乎可以正常工作,但实际上它会非常窒息-导致一些重新绘制跳过或等待2s〜3s出现。
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 ”: 触发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;
}
Thanks. 谢谢。 Please pardon prototype style code.
请原谅原型样式代码。
A few tips: 一些提示:
new THREE.Texture()
everytime you update the sphere texture. new THREE.Texture()
。 Create the texture once, and then update it using: material.map.needsUpdate = true;
material.map.needsUpdate = true;
更新它: 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. material.map
而不用存储在数组中的画布来更新纹理。 side: THREE.DoubleSide
? side: THREE.DoubleSide
? Try using THREE.BackSide
if you are using the sphere for a skybox. THREE.BackSide
球体用于天空盒,请尝试使用THREE.BackSide
。 With theese optimisations, you should be able to run texture updates at 60 fps. 通过这些优化,您应该能够以60 fps的速度运行纹理更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.