javascript - 三种js更新纹理生成的Canvas的最佳性能方法

我有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.

最佳答案

在每次更新时都会创建一个画布，一旦创建了画布和纹理，就可以在update函数中只使用画布上下文，然后设置texture.needsUpdate = true。

关于javascript - 三种js更新纹理生成的Canvas的最佳性能方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38245038/