Scene background color and model lighting wrong

[JohanAlbrectsen]

I can't seem to set the background color of the scene to match the actual color of the view surrounding it. And when I have both main direct light and indirect light, the model is still very dark. Help is greatly appreciated!

I've got the following setup for my Jetpack Compose Scene:

var isLoadingModel by remember { mutableStateOf(true) }
val nodes = remember { mutableStateListOf<Node>() }
val engine = rememberEngine()
val modelLoader = rememberModelLoader(engine)
val indirectLight = rememberIndirectLight(engine = engine)
val mainLight = rememberMainLightNode(engine = engine)
val view = rememberView(engine = engine)
val renderer = rememberRenderer(engine)
val scene = rememberScene(engine = engine)
val materialLoader = rememberMaterialLoader(engine)
val skybox = rememberSkybox(engine = engine, creator = {
    Skybox
        .Builder()
        .color(250f / 255f, 250f / 255f, 250f / 255f, 1f)
        .build(engine)
    }
)

Loading the models:

LaunchedEffect(key1 = true) {
    modelLoader.loadModelInstanceAsync("https://github.com/JohanSkoett/glb_tests/raw/main/untitled2.glb", onResult = { modelInstance ->
        isLoadingModel = false

        modelInstance?.let {
            val node = ModelNode(
                modelInstance = it,
                scaleToUnits = 2.5f
            ).apply {
                transform(
                    position = Position(z = -4f, x = -0.1f, y = -0.3f),
                    rotation = Rotation(x = 0f)
                )
            }

            nodes.add(node)
        }
    })
}

The actual scene:

Scene(
    modifier = Modifier,
    activity = LocalContext.current as? MainActivity,
    lifecycle = LocalLifecycleOwner.current.lifecycle,
    childNodes = nodes,
    engine = engine,
    modelLoader = modelLoader,
    materialLoader = materialLoader,
    scene = scene,
    view = view,
    renderer = renderer,
    indirectLight = indirectLight,
    skybox = skybox,
    mainLightNode = mainLight,
)

What my scene actually looks like:

It's clear that the scene's background is not 3x 255 / 255 RGB, and I can't seem to solve the model being very dark.
Help is greatly appreciated!
Kind regards

[JohanAlbrectsen]

@ThomasGorisse
Help would truly be appreciated 🙏

[JohanAlbrectsen]

@NohaSamir
Would you be able to assist?
Kind regards

[Mehequanna]

Have you tried setting a different environment? These are used to determine how things are lit.

Scene(
     ...
     environment = environmentLoader.createHDREnvironment(
           assetFileLocation = "environments/sky_2k.hdr"
      )!!
)

Here are some free image based lighting files you can try: https://polyhaven.com/hdris

[NohaSamir]

You can make the 3d background transparent instead of white because the white color looks different in the 3D environment.

/**
 * Scene View version 1.2.6
 */
    Scene(
        engine = engine,
        modelLoader = modelLoader,
        cameraNode = cameraNode,
        childNodes = nodes,
        skybox = null,
        mainLightNode = mainLightNode,
        onViewCreated = {
            this.scene.skybox = null
            this.setTranslucent(true)
        }
    )

/**
 * Scene View version 2.0.1
 */
 
 val environmentLoader = rememberEnvironmentLoader(engine)
    Scene(
        engine = engine,
        modelLoader = modelLoader,
        cameraNode = cameraNode,
        childNodes = nodes,
        environment = environmentLoader.createEnvironment(),
        onViewCreated = {
            this.scene.skybox = null
            this.setTranslucent(true)
        }
    )   

[NohaSamir]

For the lights, Create a front light and add it to the nodes list

val nodes = remember { mutableStateListOf<Node>() }
val frontLight = rememberMainLightNode(engine = engine, creator = {
        LightNode(
            engine = engine,
            type = LightManager.Type.SPOT,
            apply = {
                color(SceneView.DEFAULT_MAIN_LIGHT_COLOR)
                falloff(1000f)
                intensity(48_000_0.0f)
                direction(0f, 0f, -3f)
                position(0f, 0f, -3f)
            })
    })
    
 nodes.add(frontLight)   
 

[dsilvera]

Hello,

Do you found any solution to make background transparent with version 2.0.3 ?

[wilfredbtan]

Hello,

Do you found any solution to make background transparent with version 2.0.3 ?

@dsilvera I found an answer in this issue