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")!!
        )
    }


}