THREE js 更新纹理生成 Canvas 的最佳性能方式

Question

我THREE.Points THREE.PointsMaterial.作为map，我使用生成的动态cavas图像。我需要在每一帧上重新渲染canvas。

我的代码部分：

function makeEnemyBaseLabel( n,d ) {
                var canvas = document.createElement('canvas');
                var context= canvas.getContext("2d");
                var w = 5;
                    context.canvas.width  = context.canvas.height = 128;
                    context.fillStyle = 'rgba(255,255,255,0.4)';
                    context.strokeStyle = 'rgba(255,255,255,0.5)';
                    context.beginPath();
                    context.moveTo(64-(w/2),64-w);
                    context.lineTo(64-w,64-w);
                    context.lineTo(64-w,64-(w/2));
                    context.stroke();
                    context.beginPath();
                    context.moveTo(64-w,64+(w/2));
                    context.lineTo(64-w,64+w);
                    context.lineTo(64-(w/2),64+w);
                    context.stroke();
                    context.beginPath();
                    context.moveTo(64+(w/2),64+w);
                    context.lineTo(64+w,64+w);
                    context.lineTo(64+w,64+(w/2));
                    context.stroke();
                    context.beginPath();
                    context.moveTo(64+w,64-(w/2));
                    context.lineTo(64+w,64-w);
                    context.lineTo(64+(w/2),64-w);
                    context.stroke();

                        context.textAlign="center";
                        context.font = "Normal 10px Sans-Serif";
                        context.fillText(formatDistance(d), 64, 85);

                var texture = new THREE.Texture(canvas); 
                    texture.needsUpdate = true;
                    return new THREE.PointsMaterial( { visible: true, size: 128, color: 0xffffff, depthTest: false, depthWrite: false,  opacity: 1, sizeAttenuation: false,  transparent: true, map: texture } );
}
function updateEnemyBaseLabel( n,d,o ) {
                var canvas = document.createElement('canvas');
                var context= canvas.getContext("2d");
                var w = 5;
                    context.canvas.width  = context.canvas.height = 128;

                    if(d < 100) {
                         context.fillStyle = 'rgba(255,255,255,1)';
                         context.strokeStyle = 'rgba(255,255,255,1)';
                    } else 
                    if(d < 1000) {
                         context.fillStyle = 'rgba(255,255,255,0.6)';
                         context.strokeStyle = 'rgba(255,255,255,0.7)';
                    } else {
                         context.fillStyle = 'rgba(255,255,255,0.4)';
                         context.strokeStyle = 'rgba(255,255,255,0.5)';
                    }
                    context.beginPath();
                    context.moveTo(64-(w/2),64-w);
                    context.lineTo(64-w,64-w);
                    context.lineTo(64-w,64-(w/2));
                    context.stroke();
                    context.beginPath();
                    context.moveTo(64-w,64+(w/2));
                    context.lineTo(64-w,64+w);
                    context.lineTo(64-(w/2),64+w);
                    context.stroke();
                    context.beginPath();
                    context.moveTo(64+(w/2),64+w);
                    context.lineTo(64+w,64+w);
                    context.lineTo(64+w,64+(w/2));
                    context.stroke();
                    context.beginPath();
                    context.moveTo(64+w,64-(w/2));
                    context.lineTo(64+w,64-w);
                    context.lineTo(64+(w/2),64-w);
                    context.stroke();

                        context.textAlign="center";
                        context.font = "Normal 10px Sans-Serif";
                        context.fillText(formatDistance(d), 64, 85);

                    var texture = new THREE.Texture(canvas); 
                        texture.needsUpdate = true;
                        o.material.map = texture; 

}
var geometry = new THREE.Geometry();      
    geometry.vertices.push( new THREE.Vector3() );
enemyShipMesh = new THREE.Points( geometry, makeEnemyBaseLabel( 1,1 ) );
scene.add(enemyShipMesh)
..
..
update() {
    updateEnemyBaseLabel( 1,5,enemyShipMesh );
}

一段时间后，我出现了内存泄漏。我敢肯定，原因是在内存中创建新的纹理。

以引用对象的最佳方式更新画布的最佳方法是什么？

我正在寻找类似的东西：

var context = //new context without canvas creating?
context.fillText(formatDistance(d), 64, 85);
enemyShipMesh.material.map = context; // or most simple without creating a lot of new object each sec.

Answer 1

您正在创建一个画布，并且在每次更新时都已完成，一旦您创建了画布和纹理，您就可以在更新函数中仅使用画布上下文并在之后设置texture.needsUpdate = true。