Currently, I am working on creating a texture in THREE.js (r78) from a video tag and updating the texture 60 times per second by setting needsupdate=true in requestanimationframe. However, I am facing a problem where I notice memory leakage in the Chrome Task Manager. Specifically, in the task GPU Process under the column Memory (not GPU Memory), the value keeps increasing over time.
The video file I am using is an MP4 file encoded in H.264 with a frame rate of 60 fps. Below is the code I am working on. I thought of seeking advice on stackoverflow.com before raising a new issue on github.com for THREE.js.
var video = document.createElement('video');
video.src = 'test1.mp4';
video.loop = true;
video.load();
video.play();
video.onloadedmetadata = function() {
initScene();
animate();
};
var scene, camera, renderer, object;
function initScene() {
const W = 1280;
const H = 720;
camera = new THREE.PerspectiveCamera(30, W/H, 1, 5000);
camera.position.z = 1000;
object = makeVideoObject(video.videoWidth, video.videoHeight);
scene = new THREE.Scene();
scene.add(object);
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(W, H);
document.body.appendChild(renderer.domElement);
}
function animate() {
object.material.map.needsUpdate = true;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
function makeVideoObject(w, h) {
var texture = new THREE.Texture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
var material = new THREE.MeshBasicMaterial({ map:texture });
var geometry = new THREE.PlaneGeometry(w, h, 1, 1);
return new THREE.Mesh(geometry, material);
}
In my attempts to resolve the memory leakage issue, I also experimented with creating the texture from a canvas tag and updating its context by calling context.drawImage(video, 0, 0) before setting needsupdate=true. Unfortunately, this approach also led to memory leakage.
EDIT After facing this issue, I have submitted it as a bug. For more information, check out https://github.com/mrdoob/three.js/issues/9440