Realistic lighting and shadows

View inQMLC++
View on GitHub
Sample viewer app

Show realistic lighting and shadows for the specific date and time of day.

screenshot

Use case

You can use realistic lighting to evaluate the shadow impact of buildings and utility infrastructure on the surrounding community. This could be useful for civil engineers and urban planners, or for events management assessing the impact of building shadows during an outdoor event.

How to use the sample

Select one of the three available lighting options to display that lighting effect. Adjust the slider to show the lighting effect for a particular time of day. The 3D buildings will display shadows when "Sun light with shadows" is selected.

How it works

  1. Create an ArcGISSceneLayer and display it in a SceneView.
  2. Create a Date to define the date and time of day.
  3. Set the sun time of the scene view to the specified date and time with sceneView.sunTime.
  4. Set the lightingMode of the scene view to NoLight, Light, or LightAndShadows with sceneView.sunLighting.

Relevant API

  • ArcGISSceneLayer
  • LightingMode
  • Scene
  • SceneView

Tags

3D, lighting, realism, realistic, rendering, shadows, sun, time

Sample Code

RealisticLightingAndShadows.qml
                                                                                                                                                     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
// [WriteFile Name=RealisticLightingAndShadows, Category=Analysis]
// [Legal]
// Copyright 2020 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.
// [Legal]

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.12

Rectangle {
    width: 800
    height: 600

    // Create a scene view
    SceneView {
        id: sceneView
        anchors.fill: parent
        atmosphereEffect: Enums.AtmosphereEffectRealistic
        sunLighting: Enums.LightingModeLightAndShadows
        sunTime: "2018-08-10T08:30"

        Component.onCompleted: {
            setViewpointCameraAndSeconds(camera, 0)
        }

        Camera {
            id: camera
            Point {
                y: 45.54605153789073
                x: -122.69033380511073
                z: 941.0002111233771
            }
            heading: 162.58544227544266
            pitch: 60.0
            roll: 0
        }

        // create a scene, which is a default property of scene view
        Scene {
            // add a basemap
            BasemapTopographic {}

            // add a surface, which is a default property of scene
            Surface {
                // add an arcgis tiled elevation source...elevation source is a default property of surface
                ArcGISTiledElevationSource {
                    url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
                }
            }

            // add a scene service with ArcGISSceneLayer
            ArcGISSceneLayer {
                url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/DevA_BuildingShells/SceneServer/layers/0"
            }
        }
    }

    Rectangle {
        anchors {
            top: parent.top
            right: parent.right
            margins: 5
        }
        width: childrenRect.width
        height: childrenRect.height
        color: "#ffffff"
        opacity: 0.7
        Column {
            id: settingsColumn
            spacing: 5
            padding: 15
            Text {
                id: timeValue
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 16
                text: "August 10, 2018, " + sceneView.sunTime.toLocaleTimeString("hh:mm ap")
            }

            ComboBox {
                id: sunLightingSelection
                anchors.horizontalCenter: parent.horizontalCenter
                width: 200
                model: [
                    "No Light",
                    "Light",
                    "Light and Shadows"
                ]
                currentIndex: 2
            }
            Slider {
                id: sunTimeSlider
                anchors.horizontalCenter: parent.horizontalCenter
                opacity: 0.7
                from: 0; to: 23.99
                value: 8.5
                onValueChanged: {
                    sceneView.sunTime = doubleToDateTime(sunTimeSlider.value)
                }
            }
        }
    }
    states: [
        State {
            when: sunLightingSelection.currentIndex == 0
            PropertyChanges {
                target: sceneView
                sunLighting: Enums.LightingModeNoLight
            }
        },
        State {
            when: sunLightingSelection.currentIndex == 1
            PropertyChanges {
                target: sceneView
                sunLighting: Enums.LightingModeLight
            }
        },
        State {
            when: sunLightingSelection.currentIndex == 2
            PropertyChanges {
                target: sceneView
                sunLighting: Enums.LightingModeLightAndShadows
            }
        }
    ]

    function doubleToDateTime(d) {
        const remainder = d % 1;
        let minute = remainder * 60;
        let hour = d - remainder;
        if (hour < 10) {
            hour = "0" + hour;
        }
        if (minute < 10) {
            minute = "0" + minute;
        }
        return new Date(`2018-08-10 ${hour}:${minute}`);
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.