Models not displaying right on device but they look ok on emulator with isOpaque = false

[andytriboletti]

When I choose isOpaque = false to display a background image the models on my device don't show correctly. Is there another way to display a background image?

With my pixel 8, the models I am loading don't display correctly. see photo. on an emulator they are fine.

working on emulator:

not working on device:

my code:

@Composable
fun Apples() {
    DisposableEffect(Unit) {
        // Code to run on composition start
        println("Composable started")

        onDispose {
            // Code to run on composition end or recomposition
            println("Composable disposed")
            // Perform cleanup operations here
        }
    }

    val engine = rememberEngine()
    // Background Image
    val backgroundImage = painterResource(id = R.drawable.universe_background)
    val modelLoader = rememberModelLoader(engine)
//    val cameraNode = rememberCameraNode(engine) {
//        // Content
//
//        position = Position(z = 4.0f)
//    }
    //val cameraNode = SceneView.DefaultCameraNode(engine)
    val cameraNode = SceneView.createCameraNode(engine)
    //cameraNode = rememberCameraNode(engine).apply {
    //    position = Position(z = -4.0f)
    //} as SceneView.DefaultCameraNode
    //cameraNode.position  = Position(z = 100.0f)


    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        // Background Image
//        Image(
//            painter = backgroundImage,
//            contentDescription = "Background Image",
//            modifier = Modifier.fillMaxSize(),
//            contentScale = ContentScale.FillBounds // Adjust content scale as needed
//        )
        Scene(
            modifier = Modifier.fillMaxSize(),
            engine = engine,
            modelLoader = modelLoader,
            isOpaque = false,
            cameraNode = cameraNode,
            activity = LocalContext.current as? ComponentActivity,
            lifecycle = LocalLifecycleOwner.current.lifecycle,
            view = rememberView(engine),
            childNodes = rememberNodes {
                add(ModelNode(modelLoader.createModelInstance("earth.glb")).apply {
                    // Position the first apple
                    position = Position(-5f, 0f, -30f)
                    scale = Scale(10f, 10f, 10f)
                })
                add(ModelNode(modelLoader.createModelInstance("spaceshipc.glb")).apply {
                    // Position the second apple
                    position = Position(5f, 0f, -30f)
                })
            },
            //environment = environmentLoader.createHDREnvironment("environment.hdr")!!
        )
    }


}

[github-actions]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[andytriboletti]

Yes, it still exists as far as I know.

[ghostship]

Could this be related: google/filament#7794

[bsautner]

I have the same issue trying to set the background. Just modifying the model-viewer-compose sample setting opaque to false results in my model being scrambled. Also on a pixel 7

Edit - confirmed this isn't an issue on a samsung device or emulator. It does look like a Pixel driver bug per the filament link above.

 Scene(
                        isOpaque = false,
                        modifier = Modifier.fillMaxSize(),
                        engine = engine,
                        modelLoader = modelLoader,
                        cameraNode = cameraNode as CameraNode,
                        cameraManipulator = rememberCameraManipulator(
                            orbitHomePosition = cameraNode.worldPosition,
                            targetPosition = centerNode.worldPosition
                        ),
                        childNodes = listOf(centerNode, modelNode),

                    ) 

[andytriboletti]

Looks like there is some progress from filament:
google/filament#7794 (comment)