How to set background of scene view ?

[dinkar1708]

only model image should display not the white area.

Code

`

package com.ar_makeup_android_prototype.ar

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.unit.dp
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.repeatOnLifecycle
import com.ar_makeup_android_prototype.R
import com.google.android.filament.LightManager
import com.google.android.filament.Skybox
import com.gorisse.thomas.lifecycle.lifecycle
import com.gorisse.thomas.lifecycle.lifecycleScope
import io.github.sceneview.Scene
import io.github.sceneview.math.Position
import io.github.sceneview.math.Rotation
import io.github.sceneview.nodes.ModelNode
import kotlinx.coroutines.launch

@composable
fun ModelView( xPosition: Float,
yPosition: Float)
{
// initial background color of 3d model
val backgroundColor = Color.Transparent

 val reusableModifier = Modifier
     // size of model
     .size(200.dp)
     // location of model
    .offset(xPosition.dp, yPosition.dp)
     .background(Color.Transparent)
    Scene(
        modifier = reusableModifier,
        onCreate = { sceneView ->
            sceneView.apply {

// setBackgroundColor(backgroundColor.toArgb())
// background =add null
// sceneView.engine.lightManager.apply {
// setColor(1, 0.4f, 0.5f,0.3f, )
// setIntensity(1, 100_000.0f)
//// setDirection(1, 0.0f, -1.0f, 0.0f)
// }
// sceneView.skybox?.apply {
// setColor(750f / 255f, 750f / 255f, 750f / 255f, 0.5f)
//
// }

                setLifecycle(lifecycle)
                sceneView.lifecycleScope.launch {
                    sceneView.lifecycle.repeatOnLifecycle(Lifecycle.State.CREATED) {

// sceneView.skybox = Skybox.Builder().color(750f / 255f, 750f / 255f, 750f / 255f, 0.5f).build(sceneView.engine)
// sceneView.skybox = Skybox.Builder()
// .color(0.0f, 0.0f, 0.0f, 0.0f)
// .build(sceneView.engine)
val model = modelLoader.loadModel("models/glass2.glb")!!
val modelNode = ModelNode(sceneView, model).apply {
transform(
position = Position(z = -4.0f),
rotation = Rotation(x = 15.0f)
)
scaleToUnitsCube(2.0f)
}
addChildNode(modelNode)
}
}
}
}
)

}

`

[dinakar-m]

any one can answer?

[dinakar-m]

using skybox the color can be set to red.

sceneView.skybox = Skybox.Builder()
.color(0.0f, 1.0f, 1.0f, 1f)
.build(sceneView.engine)

but how to make background transparent?
trying to use this scene view over camera so that can put the glass object over camera and see the glass only not the glass red background.

[stackunderflows]

@dinakar-m Have you tried setting the alpha to 0? (the last number in the color)

[dinakar-m]

@dinakar-m Have you tried setting the alpha to 0? (the last number in the color)

yes that also does not work.

[dinakar-m]

@stackunderflows are you one of contributor to this repo?
i really want a attribute to make the background color to be transparent.

Just to fix background color to transparent i have to use below library and solution which worked.
https://github.com/WenlinMao/android-3d-model-viewer/tree/master
https://stackoverflow.com/questions/16762633/android-glsurfaceview-transparent-background-without-setzorderontop

[dinakar-m]

this also does not worked...
sceneView.skybox = Skybox.Builder()
// .color(1.0f, 1.0f, 1.0f, 0.0f)
// .build(sceneView.engine)

[dinakar-m]

inside below class init method
open class SceneView @jvmoverloads constructor(

init....
renderer.clearOptions = renderer.clearOptions.apply {
// TRY HERE
// clear = !uiHelper.isOpaque
// NOTE true changing background UI to black color
clear = true
discard = true

            // nothing in particular changing

// if (backgroundColor?.a == 1.0f) {
// clearColor = backgroundColor.toFloatArray()
// }
// not doing transparent
// clearColor = floatArrayOf(0.0f, 0.0f, 0.0f, 0.0f)
// TODO below showing red color not doing transparent
clearColor = floatArrayOf(1.0f, 0.0f, 0.0f, .1f)

        }

i tried various combination for clearColor attribute which can change the color to anything but can not change to transparent why?

[stackunderflows]

@stackunderflows are you one of contributor to this repo? i really want a attribute to make the background color to be transparent.

Just to fix background color to transparent i have to use below library and solution which worked. https://github.com/WenlinMao/android-3d-model-viewer/tree/master https://stackoverflow.com/questions/16762633/android-glsurfaceview-transparent-background-without-setzorderontop

No, I am not a contributor to this project. I've been playing around with it for a while and haven't ever had a white background like that. I don't know how that could happen.

[jaswant-iotric]

There you go!

`private fun setupTransparentSceneView() {
sceneView = findViewById(R.id.mSceneView)
sceneView.lifecycle = this.lifecycle

    sceneView.setZOrderOnTop(true)
    sceneView.setBackgroundColor(android.graphics.Color.TRANSPARENT)
    sceneView.holder.setFormat(PixelFormat.TRANSLUCENT)
    sceneView.uiHelper.isOpaque = false
    sceneView.view.blendMode = com.google.android.filament.View.BlendMode.TRANSLUCENT
    sceneView.scene.skybox = null

    val options = sceneView.renderer.clearOptions
    options.clear = true
    sceneView.renderer.clearOptions = options


    sceneView.view.dynamicResolutionOptions =
        View.DynamicResolutionOptions().apply {
            enabled = true
            quality = View.QualityLevel.LOW
        }
}`

[momintahir]

Thanks a lot for this!

[NohaSamir]

Hi @jaswant-iotric
I was using your solution in version 1.0.6, but Unfortunately, I'm encountering an issue with it in version 1.2.6, I need to know which version you're currently using. Could you please confirm?

[NohaSamir]

Here is how you can make the skybox background transparent

Note: on some emulators can cause the backgrounds to appear black, if you faced that you have to run on real device

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

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

 /**
 * Scene View version 1.0.6
 */
 
 sceneView.scene.skybox = null
sceneView.filamentView.blendMode = View.BlendMode.TRANSLUCENT
val options = sceneView.renderer.clearOptions
options.clear = true
sceneView.renderer.clearOptions = options

[github-actions[bot]]

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.

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.