Set atmosphere effect in scene | ArcGIS Maps SDK for Kotlin

View on GitHub

Sample viewer app

Changes the appearance of the atmosphere in a scene.

Image of Set atmosphere effect in scene sample

Use case

Atmospheric effect can be used to make the scene view look more realistic.

How to use the sample

Select one of the three available atmosphere effects. The sky will change to display the selected atmosphere effect.

How it works

Create an ArcGISScene and add it to a SceneView composable.
Expose the selected AtmosphereEffect from a ViewModel and observe it in the Compose screen using collectAsStateWithLifecycle.
Pass the AtmosphereEffect value into the SceneView composable, so changing the selected value updates the composable SceneView.

Relevant API

ArcGISScene
ArcGISTiledElevationSource
AtmosphereEffect
SceneView
Viewpoint

Additional information

There are three atmosphere effect options:

Realistic - A realistic atmosphere effect is applied over the entire surface.
HorizonOnly - Atmosphere effect applied to the sky (horizon) only.
None - No atmosphere effect. The sky is rendered black with a starfield consisting of randomly placed white dots.

Sample Code

MainActivity.kt

SetAtmosphereEffectInSceneViewModel.kt

SetAtmosphereEffectInSceneScreen.kt

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.setatmosphereeffectinscene

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
import com.esri.arcgismaps.sample.setatmosphereeffectinscene.screens.SetAtmosphereEffectInSceneScreen

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // authentication with an API key or named user is
        // required to access basemaps and other location services
        ArcGISEnvironment.apiKey = ApiKey.create(BuildConfig.ACCESS_TOKEN)

        setContent {
            SampleAppTheme {
                SetAtmosphereEffectInSceneApp()
            }
        }
    }

    @Composable
    private fun SetAtmosphereEffectInSceneApp() {
        Surface(color = MaterialTheme.colorScheme.background) {
            SetAtmosphereEffectInSceneScreen(
                sampleName = getString(R.string.set_atmosphere_effect_in_scene_app_name)
            )
        }
    }
}

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.setatmosphereeffectinscene.components

import android.app.Application
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.viewModelScope
import com.arcgismaps.mapping.ArcGISScene
import com.arcgismaps.mapping.ArcGISTiledElevationSource
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.view.AtmosphereEffect
import com.arcgismaps.mapping.view.Camera
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch

/**
 * ViewModel for the sample demonstrating setting the atmosphere effect on a Scene.
 */
class SetAtmosphereEffectInSceneViewModel(app: Application) : AndroidViewModel(app) {

    // Create a scene with an imagery basemap & set an initial viewpoint.
    var arcGISScene = ArcGISScene(BasemapStyle.ArcGISImagery).apply {
        val camera = Camera(
            latitude = 64.416919,
            longitude = -14.483728,
            altitude = 0.0,
            heading = 318.0,
            pitch = 105.0,
            roll = 0.0
        )
        // Add an initial viewpoint using a camera.
        initialViewpoint = Viewpoint(
            boundingGeometry = camera.location,
            camera = camera
        )
        // Creates an elevation source and set it on the scene's base surface.
        baseSurface.elevationSources.add(
            ArcGISTiledElevationSource("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer")
        )
    }

    // Keep track of the SceneView's atmosphere effect state.
    private val _atmosphereEffect = MutableStateFlow<AtmosphereEffect>(AtmosphereEffect.HorizonOnly)
    val atmosphereEffect = _atmosphereEffect.asStateFlow()

    // Message dialog view model for error handling.
    val messageDialogVM = MessageDialogViewModel()

    init {
        // Load the scene and report load failures if they occur.
        viewModelScope.launch {
            arcGISScene.load().onFailure { messageDialogVM.showMessageDialog(it) }
        }
    }

    /**
     * Update the [AtmosphereEffect] applied to the SceneView.
     */
    fun updateAtmosphereEffect(newEffect: AtmosphereEffect) {
        _atmosphereEffect.value = newEffect
    }
}

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.setatmosphereeffectinscene.screens

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import com.arcgismaps.mapping.view.AtmosphereEffect
import com.arcgismaps.toolkit.geoviewcompose.SceneView
import com.esri.arcgismaps.sample.setatmosphereeffectinscene.components.SetAtmosphereEffectInSceneViewModel
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialog
import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar

/**
 * Main screen layout for the sample app.
 */
@Composable
fun SetAtmosphereEffectInSceneScreen(sampleName: String) {
    val viewModel: SetAtmosphereEffectInSceneViewModel = viewModel()

    // Observe the currently selected atmosphere effect.
    val currentAtmosphereEffect by viewModel.atmosphereEffect.collectAsStateWithLifecycle()

    Scaffold(
        topBar = { SampleTopAppBar(title = sampleName) },
        content = { paddingValues ->
            Column(modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues),
                verticalArrangement = Arrangement.Center) {
                // SceneView composable that displays the 3D Scene.
                // The atmosphere effect parameter controls how the sky/atmosphere is rendered.
                SceneView(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxSize(),
                    arcGISScene = viewModel.arcGISScene,
                    atmosphereEffect = currentAtmosphereEffect
                )

                // A SingleChoiceSegmentedButtonRow with 3 choices to switch atmosphere effects.
                AtmosphereEffectSelector(
                    currentEffect = currentAtmosphereEffect,
                    onEffectSelected = viewModel::updateAtmosphereEffect
                )
            }

            // Display a dialog if the sample encounters an error.
            viewModel.messageDialogVM.apply {
                if (dialogStatus) {
                    MessageDialog(
                        title = messageTitle,
                        description = messageDescription,
                        onDismissRequest = ::dismissDialog
                    )
                }
            }
        }
    )
}

@Composable
private fun AtmosphereEffectSelector(
    currentEffect: AtmosphereEffect,
    onEffectSelected: (AtmosphereEffect) -> Unit
) {
    // The list of atmosphere options displayed in the segmented control.
    val effectOptions = listOf(
        AtmosphereEffect.Realistic,
        AtmosphereEffect.HorizonOnly,
        AtmosphereEffect.None
    )

    SingleChoiceSegmentedButtonRow(modifier = Modifier.fillMaxWidth()) {
        effectOptions.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(index = index, count = effectOptions.size),
                onClick = { onEffectSelected(effectOptions[index]) },
                selected = currentEffect == effectOptions[index]
            ) {
                Text(text = label.javaClass.simpleName)
            }
        }
    }
}