Pictofit / Android SDK / 0.13.1 / Using the Orbit Layout

Using the Orbit Layout

Using the Orbit Viewer Layout to display content in 3D.

The RROrbitViewerLayout is a great way of adding an interactive visualization to your application. The user can twist & turn the object to see it from all angles and zoom in to inspect details. The layout works with any type of RRRenderable and automatically adjusts the camera so that the objects is fully visible. A common use case for this is to add it to an existing shopping application by providing the 3D model in addtion to images an a product detail page. The following snippet shows how it’s done.

val orbitLayout = RROrbitViewerLayout.create()!!
val garmentPath = RRGarment3D.createFromAsset("accessory_bag_black.gm3d")!!
val renderable = RRGarment3DRenderable.createWithGarment(garment)!!

renderView.setLayout(orbitLayout)
orbitLayout.renderable = renderable

Asynchronous Content Loading

Loading assets like garments or avatars takes some time and therefore should not be done on the main thread. It’s also a good practice to have different versions of the asset like a low-resolution and a high-resolution one. This allows to show something to the user quickly while the detailed, high-resolution asset is still loading.

For this we use kotlin coroutines. To use them we need to add a new dependency to the project. (follow the link to get more info on how to do that)

// load the renderable / preview into the scene
GlobalScope.launch(Dispatchers.IO) {
  loadPreviewAsync()
  loadGarmentAsync()
}

private fun loadPreviewAsync() {
  // create the garment preview model and add it
  // this is a low resolution model and will be replaced by the actual high quality garment once it finished loading
  val previewModel = RRTexturedMesh3DObject.createFromAsset("accessory_bag_black_preview.tm3d")!!
  val previewRenderable = previewModel.createRenderable()!!
  layout.renderable = previewRenderable
}

private fun loadGarmentAsync() {
  // the real garment might take longer to load
  val garment3D = RRGarment3D.createFromAsset("accessory_bag_black.gm3d")!!
  val garment3DRenderable = RRGarment3DRenderable.createWithGarment(garment3D)!!
  // when it is done, replace the previously loaded preview with it
  layout.renderable = garment3DRenderable
}

Samples

To learn more about this feature, check out the following samples:

© 2014-2020 Reactive Reality AG