Estoy capturando varios datos usando un Kinect y para generar mi transmisión de video en color, estoy dibujando en un lienzo HTML5 a través de CTX para cada cuadro:

 const renderColorFrame = (ctx, canvasImageData, newPixelData) => { const pixelArray = canvasImageData.data; for (let i = 0; i < canvasImageData.data.length; i++) { pixelArray[i] = newPixelData[i]; } ctx.putImageData(canvasImageData, 0, 0); };

Luego me gustaría agregar este lienzo a una textura en un lienzo 3D Three.JS. Sin embargo, pasar el lienzo directamente sobre la textura no funciona. En su lugar, envío el lienzo a una etiqueta de video y luego lo paso al lienzo Three.JS.

 // Set the video as the RGB Canvas output const rgbVideo = document.getElementById('rgbVideo'); const stream = $rgbCanvas.captureStream(); rgbVideo.srcObject = stream;

El problema es que esto es realmente ineficiente y crea retrasos significativos en la transmisión de video.

Me gustaría pasar el lienzo directamente a la textura (y actualizarlo en cada cuadro), sin embargo, no puedo encontrar ninguna información si esto es posible. ¿Hay alguien que haya resuelto un problema similar?

Esta es la forma en que agrego la textura de transmisión de video al plano en el lienzo Three.js:

 var scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 0); const renderer = new THREE.WebGLRenderer(); renderer.setSize(1080, 720); document.body.appendChild(renderer.domElement); //get video feed from html element in index.html and convert to texture const texture = new THREE.VideoTexture(rgbVideo); // Create background plane. const geometry = new THREE.PlaneGeometry(9,5); const plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: texture })) plane.position.z = -3 scene.add(plane)