javascript - 三种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 );
}

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

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

我正在寻找类似的东西:

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

您在每次更新时都会创建 Canvas 和所有内容，一旦创建了 Canvas 和纹理，您就可以在更新函数中仅使用 Canvas 上下文并设置texture.needsUpdate = true 之后。