Display SBS Images in 4V

Decode SBS (2x1) Image format to a Quad and display it using the QuadView.

In this section, you will learn how to display a SBS image using a QuadView. As discussed in the previous section, we need to first convert the SBS image to a Quad format image.

The steps to render an SBS image are exactly the same as rendering a LIF image. However, SBS images can currently only be decoded using File Uris or ContentUris.

In order to be compatible with the SDK, SBS images must have a suffix of _2x1 in their file name. Learn more

This section will provide you with instructions on how to load a SBS image using a File Uri, decode it to a Quad and display using a QuadView.

Setup Resources

The steps outlined in this section are implemented in the sample project available on Github. This project contains a sample app which loads a SBS image from the raw resource directory into the device's external cache storage. This is done since SBS images cannot be decoded using raw byte[] currently.

The Uri of the file is then used to decode, synthesize views and display the image using a QuadView.

SBS-Render-Sample-App

Decode SBS image

Decode the SBS image using the MultiviewImageDecoder by specifying the file Uri and the output pixels

Kotlin

val multiviewImage = MultiviewImageDecoder.getDefault().decode(context, fileUri, 1280 * 720)

Java

MultiviewImage multiviewImage = MultiviewImageDecoder.getDefault().decode(imageBytes, 1280 * 720);

• Decode SBS image to get the MultiviewImage instance from the MultiviewImageDecoder

• We will set the output pixels to 1280 x 720 for this tutorial. This resizes all the decoded viewpoints to the set resolution.

• The decoder returns null if the file Uri or contentUri points to an image that is not supported.

In order to be compatible with the SDK, SBS images must have a suffix of _2x1 in their file name. Learn more

Note: The code in this step should be called on a worker thread.

Populate Disparity Maps

The MultiviewImage obtained in the previous step can now be used to synthesize 4 views.

In order to do so, we need to ensure the disparity maps are generated for the different view points. This function generates the disparity maps, if required.

Kotlin

// Obtain MultiviewSynthesizer instance
val synthesizer2 = MultiviewSynthesizer2.createMultiviewSynthesizer(context)

// Populate Disparity maps
synthesizer2.populateDisparityMaps(multiviewImage)

Java

// Obtain MultiviewSynthesizer instance
MultiviewSynthesizer2 synthesizer = MultiviewSynthesizer2.createMultiviewSynthesizer(context);
        
// Populate Disparity maps
synthesizer.populateDisparityMaps(multiviewImage);

• Obtain the MultiviewSynthesizer2 instance using the MultiviewSynthesizer2.createMultiviewSynthesizer(Context context) function.

• Generate the disparity maps for the MultiviewImage using MultiviewSynthesizer2#populateDisparityMaps(MultiviewImage).

• Disparity maps are essential for generating the different views in a Quad image. Disparity maps will only be populated by this function, if not already present in the MultiviewImage

Note: All steps in this section should be called on a worker thread.

View Synthesis to Quad

Finally, obtain a Quad Bitmap by synthesizing the MultiviewImage to a generate four views and obtain a Bitmap representing a Quad.

Kotlin

val quadBitmap = synthesizer2.toQuadBitmap(multiviewImage)

Java

Bitmap quadBitmap = synthesizer2.toQuadBitmap(multiviewImage);

Set Quad in QuadView

You now have the Quad Bitmap which can be used to display the image in 4V using the QuadView.

Kotlin

 quadView.setQuadBitmap(quadBitmap)

Java

 quadView.setQuadBitmap(quadBitmap);

Build your app

If you followed the steps correctly, you should be able to view the SBS image in 4V in your Android project. Feel free to refer to the sample project on Github, which converts the LIF image to a Quad while following Android best practices.

SBS-Render-Sample-App

In the next section, you will learn about the conversion pipeline and how to leverage the MultiviewImage in your android application and also learn about the decoding pipeline.