Correct way to set background color/ using skybox causes black flash momentarily

[tomriddle25]

Hi folks, first of all thanks a lot for building and maintaining SceneView, its been a boon for 3d model viewing on a jetpack compose project.

My problem is that the models I am using do not have a background, and are displayed with a black background, and when I am trying to use the existing solutions discussed on issues like a colored skybox , I am getting a black background initially when the composable is rendered and then it becomes white.
Its sort of like a black flash.

Scene(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.WHITE),
    engine = engine,
    modelLoader = modelLoader,
    cameraNode = cameraNode,
    childNodes =
    listOf(centerNode,
        rememberNode {
            ModelNode(
                modelInstance = modelLoader.createModelInstance("avatar/compressed_new/St2.glb"),
            )
        }),
    onViewCreated = {
        skybox = Skybox.Builder().color(255f, 255f, 255f, 1.0f).build(this.engine)
    }
)

Here's a video of the issue.

Screen_recording_20240404_124025.mp4

P.S. - I am using the latest release 2.1.0.

[ThomasGorisse]

You're not so far from being right but you are applying the skybox once the view is created and so the default black skybox has already been rendered.
You should instead use the Scene's environment param. I know it's not clear but it was originaly made like that to also handle .ktx and .hdr skyboxes which are also generating an IndirectLight.

Solution (I hope):

Scene(
    modifier = Modifier
        .fillMaxSize(),
    engine = engine,
    modelLoader = modelLoader,
    cameraNode = cameraNode,
    childNodes = listOf(
        centerNode,
        rememberNode {
            ModelNode(
                modelInstance = modelLoader.createModelInstance("avatar/compressed_new/St2.glb"),
            )
        }
    ),
    environment = rememberEnvironment(engine ) {
        Environment(
            skybox = Skybox.Builder()
                .color(255f, 255f, 255f, 1.0f)
                .build(engine)
        )
    }
)