0
videoタグからTHREE.js（r78）テクスチャを作成し、needsupdate=trueをrequestanimationframeに設定して1秒間に60回テクスチャを更新しています。私の問題はChromeのタスクマネージャでメモリが漏れていることです。具体的には、GPUプロセスのカラムメモリ（GPUメモリではない）の値は、時間の経過と共に増加します。テクスチャからのビデオタグリークメモリ
ビデオファイルはMP4、H.264、60 fpsです。私のコードは以下の通りです。私はgithub.com上で新しいTHREE.jsの問題を提出する前に、stackoverflow.comでこれを検証したかったのです。
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);
}
ところで、私はまた、canvasタグからテクスチャを作成し、needsupdate=trueを設定する前にcontext.drawImage(video, 0, 0)を呼び出すことによって、それはコンテキストの更新を試してみました。これもメモリをリークします。
EDIT 私は問題を提出しました。 https://github.com/mrdoob/three.js/issues/9440
あなたは[webglinspector]（HTTPSを試すことができます.google.com/webstore/detail/webgl-inspector/ogkcjmbhnfmlnielkjhedpcjomeaghda）を使用して、画像を読み込んだ後に画像が保存されているかどうかを確認します。 – Gero3
@ Gero3、テクスチャタブ（WebGLインスペクタを使用して初めて）で、リストされている唯一のオブジェクトは私のムービーファイルです。他の画像はありません。 – Jonas
あなたはどのブラウザを使用しましたか？ – Gero3