Render a yuv420 encoded Image.

Hi guys.

I am receiving a Yuv420 buffer as a Uint8Array. I want to render this as Image data with vtk.js i.e

 const values = yuv420Buffer
var scalars = vtkDataArray.newInstance({
    values: values,
    numberOfComponents: 4, // number of channels 
    dataType: VtkDataTypes.UNSIGNED_CHAR, // values encoding
    name: 'scalars'
});

var imageData = vtkImageData.newInstance();
imageData.setOrigin(0, 0, 0);
imageData.setSpacing(1.0, (width / height).toFixed(2), (width / depth).toFixed(2));
imageData.setExtent(0, width - 1, 0, height - 1, 0, depth - 1);
imageData.getPointData().setScalars(scalars);

Do I need to convert the Yuv420 buffer into an RGBA buffer first? If so, is there an easy way to do this in javascript?

Any help would be greatly appreciated

I’m fairly certain you will need to do a YUV420-RGBA conversion. Right now there are no conversion routines provided by vtk.js, but you can most certainly find routines online for doing this.