Three.js: texture vers datatexture

J'essaie d'implémenter une visionneuse webcam différée en javascript, en utilisant Three.js pour les fonctionnalités WebGL.

J'ai besoin de stocker des images prises à la webcam, afin qu'elles puissent être affichées après un certain temps (quelques millisecondes à quelques secondes). Je peux le faire sans Three.js, en utilisant canvas et getImageData() . Vous pouvez trouver un exemple sur jsfidle .

J'essaie de trouver un moyen de le faire sans toile, mais en utilisant l'objet Three.js Texture ou DataTexture . Voici un exemple de ce que j'essaie . Le problème est que je ne peux pas trouver comment copier l'image d'une Texture (l' image est du type HTMLVideoElement ) à une autre.

Dans la fonction rotateFrames() , le cadre plus ancien doit être perdu et plus récent doit être remplacé, comme dans un FIFO. Mais la ligne

 frames[i].image = frames[i + 1].image;

Est juste de copier la référence, pas les données de texture. Je suppose que DataTexture devrait le faire, mais je ne suis pas en mesure d'obtenir un DataTexture sur une Texture ou HTMLVideoElement .

Une idée?

Avertissement: vous devez disposer d'une caméra et permettre au navigateur de l'utiliser pour que les exemples fonctionnent. Et évidemment, vous devez disposer d'un navigateur mis à jour.

Est-ce ce que vous cherchez?

http://fiddle.jshell.net/m4Bh7/10/

Modifier:

 function onFrame(dt) { if (video.readyState === video.HAVE_ENOUGH_DATA) { /* new frame available from webcam */ context.drawImage(video, 0, 0,videoWidth,videoHeight); frames[framesNum - 1].image.data = new Uint8Array(context.getImageData(0,0,videoWidth, videoHeight).data.buffer); frames[framesNum - 1].needsUpdate = true; } }

C'est la partie la plus importante: elle fait une copie du cadre et l'enregistre en tant que donnée dans un dataTexture.

 function rotateFrames() { for (var i = 0; i != framesNum - 1; ++i) { /* * FIXME: this does not work! */ frames[i].image.data = frames[i + 1].image.data; frames[i].needsUpdate = true; } }

Ceci copie les données de la texture à la texture dans les images.

Nouvelle version: http: //fiddle.jshell.net/hWL2E/4/

 function onFrame(dt) { if (video.readyState === video.HAVE_ENOUGH_DATA) { /* new frame available from webcam */ context.drawImage(video, 0, 0,videoWidth,videoHeight); var frame = new THREE.DataTexture(new Uint8Array(context.getImageData(0,0,videoWidth, videoHeight).data.buffer) ,videoWidth,videoHeight); frames[framesNum - 1] = frame; frames[framesNum - 1].needsUpdate = true; sprites[framesNum - 1].map = frames[framesNum - 1]; } }

Il génère une nouvelle texture de chaque image pour les images vidéo.

 function rotateFrames() { for (var i = 0; i != framesNum - 1; ++i) { /* * FIXME: this does not work! */ frames[i] = frames[i + 1]; sprites[i].map = frames[i]; } }

C'est ce qui fait mieux. En cas de réutilisation des textures utilisées, cela signifie qu'il n'a pas besoin d'être renvoyé au GPU.