Add a 3D settings demo (Graphical settings) for 4.0-dev

Could possible fix #600.
This demo has some of the basic graphical settings that game devs would want. I tried to keep it minimal because it's just a demo. I hope this is sufficient and that there are enough comments explaining everything. Everything works without any bugs or errors.
Small fix

Small script format fix
Small fix


Small fix


Changed readme


Update 3d/3d_settings_menu/project.godot

Co-authored-by: Aaron Franke <[email protected]>
Fixing many mistakes

Changed folder name
Deleted git files
changed the default size with the project settings variant
Removed some debug info


Added extra features

Changed the layout into sections,
Added some extra settings and features.
Waiting for Calinou to see what he would like to change/add.
Small fixes

Getting the start viewport in ready

3d/graphics_settings/README.md

@@ -0,0 +1,26 @@
+# 3D Settings Menu (Graphical Settings)
+
+A demo showing an example of a settings menu.
+Included settings are:
+	- UI Scaling;
+	- Render Quality;
+	- Filter;
+	- Vsync;
+	- Anti-Aliasing;
+	- Fullscreen;
+	- Screen-Space Reflections;
+	- Ambient Occlusion;
+	- Indirect lightning;
+	- Glow;
+	- Brightness;
+	- Contrast;
+	- Saturation.
+
+
+Language: GDScript
+
+Renderer: Vulkan Clustered
+
+## Screenshots
+
+![Screenshot](screenshots/interface.png)

3d/graphics_settings/control.tscn

@@ -0,0 +1,465 @@
+[gd_scene load_steps=6 format=3 uid="uid://ye05btta37gb"]
+
+[ext_resource type="Script" path="res://settings.gd" id="1_gm54x"]
+[ext_resource type="PackedScene" uid="uid://cbdt8lmycl8pc" path="res://3d_scene.tscn" id="2_hsbu5"]
+[ext_resource type="Texture2D" uid="uid://c5ujmv8i0y1pn" path="res://icon.png" id="3_xpykm"]
+
+[sub_resource type="Environment" id="Environment_1f0b2"]
+adjustment_enabled = true
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_w3j8l"]
+content_margin_left = 20.0
+content_margin_right = 20.0
+content_margin_top = 50.0
+content_margin_bottom = 10.0
+bg_color = Color(0.231373, 0.231373, 0.231373, 0.768627)
+
+[node name="Control" type="Control"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+script = ExtResource( "1_gm54x" )
+
+[node name="WorldEnvironment" type="WorldEnvironment" parent="."]
+environment = SubResource( "Environment_1f0b2" )
+
+[node name="SubViewportContainer" type="SubViewportContainer" parent="."]
+anchor_right = 1.0
+anchor_bottom = 1.0
+stretch = true
+
+[node name="SubViewport" type="SubViewport" parent="SubViewportContainer"]
+handle_input_locally = false
+size = Vector2i(1024, 600)
+render_target_update_mode = 4
+
+[node name="Node3D" parent="SubViewportContainer/SubViewport" instance=ExtResource( "2_hsbu5" )]
+
+[node name="SettingsMenu" type="PanelContainer" parent="."]
+anchor_bottom = 1.0
+offset_right = 372.0
+grow_horizontal = 2
+grow_vertical = 2
+theme_override_styles/panel = SubResource( "StyleBoxFlat_w3j8l" )
+
+[node name="ScrollContainer" type="ScrollContainer" parent="SettingsMenu"]
+clip_contents = false
+offset_left = 20.0
+offset_top = 50.0
+offset_right = 352.0
+offset_bottom = 590.0
+
+[node name="VBoxContainer" type="VBoxContainer" parent="SettingsMenu/ScrollContainer"]
+offset_right = 324.0
+offset_bottom = 613.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+theme_override_constants/separation = 10
+
+[node name="UISection" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer"]
+offset_right = 324.0
+offset_bottom = 26.0
+text = "UI Section"
+horizontal_alignment = 1
+
+[node name="GridContainer" type="GridContainer" parent="SettingsMenu/ScrollContainer/VBoxContainer"]
+offset_top = 36.0
+offset_right = 324.0
+offset_bottom = 69.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+theme_override_constants/vseparation = 10
+columns = 2
+
+[node name="UIScaleLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer"]
+offset_top = 3.0
+offset_right = 160.0
+offset_bottom = 29.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "UI Scale:"
+
+[node name="UIScaleOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_right = 324.0
+offset_bottom = 33.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 5
+selected = 2
+popup/item_0/text = "Extra Small"
+popup/item_0/id = 0
+popup/item_1/text = "Small"
+popup/item_1/id = 1
+popup/item_2/text = "Normal"
+popup/item_2/id = 2
+popup/item_3/text = "Big"
+popup/item_3/id = 3
+popup/item_4/text = "Extra Big"
+popup/item_4/id = 4
+
+[node name="ViewportSection" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer"]
+offset_top = 79.0
+offset_right = 324.0
+offset_bottom = 105.0
+text = "Quality Section"
+horizontal_alignment = 1
+
+[node name="GridContainer2" type="GridContainer" parent="SettingsMenu/ScrollContainer/VBoxContainer"]
+offset_top = 115.0
+offset_right = 324.0
+offset_bottom = 296.0
+columns = 2
+
+[node name="QualityLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+offset_top = 3.0
+offset_right = 160.0
+offset_bottom = 29.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Quality:"
+
+[node name="QualityOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_right = 324.0
+offset_bottom = 33.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 5
+selected = 2
+popup/item_0/text = "Extra Low"
+popup/item_0/id = 0
+popup/item_1/text = "Low"
+popup/item_1/id = 1
+popup/item_2/text = "Medium"
+popup/item_2/id = 2
+popup/item_3/text = "High"
+popup/item_3/id = 3
+popup/item_4/text = "Extra High"
+popup/item_4/id = 4
+
+[node name="FilterLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+offset_top = 40.0
+offset_right = 160.0
+offset_bottom = 66.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Filter:"
+
+[node name="FilterOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_top = 37.0
+offset_right = 324.0
+offset_bottom = 70.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 2
+selected = 1
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "Enabled"
+popup/item_1/id = 1
+
+[node name="VsyncLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+offset_top = 77.0
+offset_right = 160.0
+offset_bottom = 103.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Vsync:"
+
+[node name="VsyncOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_top = 74.0
+offset_right = 324.0
+offset_bottom = 107.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 3
+selected = 2
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "Adaptive"
+popup/item_1/id = 1
+popup/item_2/text = "Enabled"
+popup/item_2/id = 2
+
+[node name="AALabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+offset_top = 114.0
+offset_right = 160.0
+offset_bottom = 140.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Anti-Aliasing:"
+
+[node name="AAOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_top = 111.0
+offset_right = 324.0
+offset_bottom = 144.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 5
+selected = 0
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "FXAA"
+popup/item_1/id = 1
+popup/item_2/text = "2x"
+popup/item_2/id = 2
+popup/item_3/text = "4x"
+popup/item_3/id = 3
+popup/item_4/text = "8x"
+popup/item_4/id = 4
+
+[node name="FullscreenLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+offset_top = 151.0
+offset_right = 160.0
+offset_bottom = 177.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Fullscreen:"
+
+[node name="FullscreenOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_top = 148.0
+offset_right = 324.0
+offset_bottom = 181.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 2
+selected = 0
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "Enabled"
+popup/item_1/id = 1
+
+[node name="EnvironmentSection" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer"]
+offset_top = 306.0
+offset_right = 324.0
+offset_bottom = 332.0
+text = "Environment Section"
+horizontal_alignment = 1
+
+[node name="GridContainer3" type="GridContainer" parent="SettingsMenu/ScrollContainer/VBoxContainer"]
+offset_top = 342.0
+offset_right = 324.0
+offset_bottom = 613.0
+columns = 2
+
+[node name="SSReflectionsLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_top = 3.0
+offset_right = 160.0
+offset_bottom = 29.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "SS Reflections:"
+
+[node name="SSReflectionsOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_right = 324.0
+offset_bottom = 33.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 4
+selected = 0
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "Low"
+popup/item_1/id = 1
+popup/item_2/text = "Medium"
+popup/item_2/id = 2
+popup/item_3/text = "High"
+popup/item_3/id = 3
+
+[node name="SSAOLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_top = 40.0
+offset_right = 160.0
+offset_bottom = 66.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "SSAO:"
+
+[node name="SSAOOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_top = 37.0
+offset_right = 324.0
+offset_bottom = 70.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 2
+selected = 0
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "Enabled"
+popup/item_1/id = 1
+
+[node name="SSILLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_top = 77.0
+offset_right = 160.0
+offset_bottom = 103.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "SSIL:"
+
+[node name="SSILOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_top = 74.0
+offset_right = 324.0
+offset_bottom = 107.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 2
+selected = 0
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "Enabled"
+popup/item_1/id = 1
+
+[node name="SDFGILabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_top = 114.0
+offset_right = 160.0
+offset_bottom = 140.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "SDFGI:"
+
+[node name="SDFGIOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_top = 111.0
+offset_right = 324.0
+offset_bottom = 144.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 2
+selected = 0
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "Enabled"
+popup/item_1/id = 1
+
+[node name="GlowLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_top = 151.0
+offset_right = 160.0
+offset_bottom = 177.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Glow:"
+
+[node name="GlowOptionButton" type="OptionButton" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+minimum_size = Vector2(100, 33)
+offset_left = 164.0
+offset_top = 148.0
+offset_right = 324.0
+offset_bottom = 181.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+item_count = 2
+selected = 0
+popup/item_0/text = "Disabled"
+popup/item_0/id = 0
+popup/item_1/text = "Enabled"
+popup/item_1/id = 1
+
+[node name="BrightnessLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_top = 185.0
+offset_right = 160.0
+offset_bottom = 211.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Brightness:"
+
+[node name="BrightnessSlider" type="HSlider" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_left = 164.0
+offset_top = 185.0
+offset_right = 324.0
+offset_bottom = 211.0
+size_flags_horizontal = 3
+size_flags_vertical = 1
+min_value = 0.5
+max_value = 4.0
+step = 0.2
+value = 1.0
+
+[node name="ContrastLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_top = 215.0
+offset_right = 160.0
+offset_bottom = 241.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Contrast:"
+
+[node name="ContrastSlider" type="HSlider" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_left = 164.0
+offset_top = 215.0
+offset_right = 324.0
+offset_bottom = 241.0
+size_flags_horizontal = 3
+size_flags_vertical = 1
+min_value = 0.5
+max_value = 4.0
+step = 0.2
+value = 1.0
+
+[node name="SaturationLabel" type="Label" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_top = 245.0
+offset_right = 160.0
+offset_bottom = 271.0
+size_flags_horizontal = 3
+theme_override_font_sizes/font_size = 16
+text = "Saturation:"
+
+[node name="SaturationSlider" type="HSlider" parent="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3"]
+offset_left = 164.0
+offset_top = 245.0
+offset_right = 324.0
+offset_bottom = 271.0
+size_flags_horizontal = 3
+size_flags_vertical = 1
+min_value = 0.5
+max_value = 10.0
+step = 0.2
+value = 1.0
+
+[node name="HideShowButton" type="CheckButton" parent="."]
+offset_right = 149.0
+offset_bottom = 31.0
+theme_override_font_sizes/font_size = 16
+button_pressed = true
+text = "Hide settings"
+
+[node name="TextureRect" type="TextureRect" parent="."]
+anchor_left = 1.0
+anchor_top = 1.0
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_left = -65.0
+offset_top = -65.0
+grow_horizontal = 0
+grow_vertical = 0
+texture = ExtResource( "3_xpykm" )
+
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer/UIScaleOptionButton" to="." method="_on_ui_scale_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2/QualityOptionButton" to="." method="_on_quality_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2/FilterOptionButton" to="." method="_on_filter_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2/VsyncOptionButton" to="." method="_on_vsync_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2/AAOptionButton" to="." method="_on_aa_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer2/FullscreenOptionButton" to="." method="_on_fullscreen_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3/SSReflectionsOptionButton" to="." method="_on_ss_reflections_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3/SSAOOptionButton" to="." method="_on_ssao_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3/SSILOptionButton" to="." method="_on_ssil_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3/SDFGIOptionButton" to="." method="_on_sdfgi_option_button_item_selected"]
+[connection signal="item_selected" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3/GlowOptionButton" to="." method="_on_glow_option_button_item_selected"]
+[connection signal="value_changed" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3/BrightnessSlider" to="." method="_on_brightness_slider_value_changed"]
+[connection signal="value_changed" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3/ContrastSlider" to="." method="_on_contrast_slider_value_changed"]
+[connection signal="value_changed" from="SettingsMenu/ScrollContainer/VBoxContainer/GridContainer3/SaturationSlider" to="." method="_on_saturation_slider_value_changed"]
+[connection signal="toggled" from="HideShowButton" to="." method="_on_HideShowButton_toggled"]

3d/graphics_settings/icon.png.import

@@ -0,0 +1,33 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://c5ujmv8i0y1pn"
+path="res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://icon.png"
+dest_files=["res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.ctex"]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/bptc_ldr=0
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/size_limit=0
+detect_3d/compress_to=1

3d/graphics_settings/project.godot

@@ -0,0 +1,21 @@
+; Engine configuration file.
+; It's best edited using the editor UI and not directly,
+; since the parameters that go here are not all obvious.
+;
+; Format:
+;   [section] ; section goes between []
+;   param=value ; assign values to parameters
+
+config_version=5
+
+[application]
+
+config/name="3D Graphics Settings Demo"
+run/main_scene="res://control.tscn"
+config/icon="res://icon.png"
+config/features=PackedStringArray("4.0", "Vulkan Clustered")
+
+[display]
+
+window/stretch/mode="canvas_items"
+window/stretch/aspect="expand"

3d/graphics_settings/screenshots/interface.png.import

@@ -0,0 +1,33 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dv27oyy6q3nuj"
+path="res://.godot/imported/interface.png-d66f41b9831e9844ce0f39a7fbe98037.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://screenshots/interface.png"
+dest_files=["res://.godot/imported/interface.png-d66f41b9831e9844ce0f39a7fbe98037.ctex"]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/bptc_ldr=0
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/size_limit=0
+detect_3d/compress_to=1

3d/graphics_settings/settings.gd

@@ -0,0 +1,201 @@
+extends Control
+# Window project settings:
+#  - Viewport size is set to 1920x1080
+#  - Stretch mode is set to "canvas_items" (in godot 3.x known as 2d)
+#  - Stretch aspect is set to "expand"
+@onready var sub_viewport := $SubViewportContainer/SubViewport
+@onready var sub_viewport_container := $SubViewportContainer
+@onready var world_environment := $WorldEnvironment
+
+var current_quality := 2 # This is needed for when screen size changes
+var viewport_start_size := Vector2.ZERO
+
+
+func _ready() -> void:
+	# When the screen changes size, we need to update the 3D
+	# viewport quality setting. If we don't do this, the viewport will take
+	# the size from the main viewport.
+	viewport_start_size.x = ProjectSettings.get_setting(&"display/window/size/viewport_width")
+	viewport_start_size.y = ProjectSettings.get_setting(&"display/window/size/viewport_height")
+	sub_viewport.connect(&"size_changed", self._on_quality_option_button_item_selected)
+
+
+func _on_HideShowButton_toggled(show_settings: bool) -> void:
+	# Option to hide the settings so you can see the changes to the 3d world better.
+	var button := $HideShowButton
+	var settings_menu := $SettingsMenu
+	if show_settings:
+		button.text = "Hide settings"
+	else:
+		button.text = "Show settings"
+	settings_menu.visible = show_settings
+
+
+func _on_ui_scale_option_button_item_selected(index: int) -> void:
+	# For changing the UI, we take the viewport size, which we set in the project settings.
+	var new_size := viewport_start_size
+	if index == 0: # Extra small
+		new_size *= 1.50
+	elif index == 1: # Small
+		new_size *= 1.25
+	elif index == 2: # Normal
+		new_size *= 1.0
+	elif index == 3: # Big
+		new_size *= 0.75
+	elif index == 4: # Extra big
+		new_size *= 0.50
+	get_tree().root.set_content_scale_size(new_size)
+
+
+func _on_quality_option_button_item_selected(index: int = current_quality) -> void:
+	# Setting the overal screen quality can be done by changing
+	# the sub viewport size. When the screen size changed, this function
+	# will get called with the current_quality variable.
+	var new_size : Vector2
+	current_quality = index
+	if index == 0: # Extra low
+		new_size = get_viewport().size * 0.50
+	elif index == 1: # Low
+		new_size = get_viewport().size * 0.75
+	elif index == 2: # Medium
+		new_size = get_viewport().size
+	elif index == 3: # High
+		new_size = get_viewport().size * 1.25
+	elif index == 4: # Extra high
+		new_size = get_viewport().size * 1.50
+	sub_viewport.set_size(new_size)
+
+
+func _on_filter_option_button_item_selected(index: int) -> void:
+	# Texture filter setting. This can smooth out hard edges, but can also make
+	# the scene appear more blurry when quality is set to low.
+	if index == 0: # Disabled
+		sub_viewport_container.set_texture_filter(CanvasItem.TEXTURE_FILTER_NEAREST)
+	elif index == 1: # Enabled
+		sub_viewport_container.set_texture_filter(CanvasItem.TEXTURE_FILTER_LINEAR)
+
+
+func _on_vsync_option_button_item_selected(index: int) -> void:
+	# Vsync is enabled by default.
+	# Vertical synchronization locks framerate and makes screen tearing not visible.
+	if index == 0: # Disabled
+		DisplayServer.window_set_vsync_mode(DisplayServer.VSYNC_DISABLED)
+	elif index == 1: # Adaptive
+		DisplayServer.window_set_vsync_mode(DisplayServer.VSYNC_ADAPTIVE)
+	elif index == 2: # Enabled
+		DisplayServer.window_set_vsync_mode(DisplayServer.VSYNC_ENABLED)
+
+
+func _on_aa_option_button_item_selected(index: int) -> void:
+	# Because this option is only for the 3D objects, we need to
+	# change this setting on the sub viewport.
+	# MSAA = Better quality at a higher performance cost.
+	# FXAA = Low performance cost but can appear blurry.
+	if index == 0: # Disabled
+		sub_viewport.set_msaa(Viewport.MSAA_DISABLED)
+		sub_viewport.set_screen_space_aa(Viewport.SCREEN_SPACE_AA_DISABLED)
+	elif index == 1: # FXAA
+		sub_viewport.set_msaa(Viewport.MSAA_DISABLED)
+		sub_viewport.set_screen_space_aa(Viewport.SCREEN_SPACE_AA_FXAA)
+	elif index == 2: # 2x
+		sub_viewport.set_msaa(Viewport.MSAA_2X)
+		sub_viewport.set_screen_space_aa(Viewport.SCREEN_SPACE_AA_DISABLED)
+	elif index == 3: # 4x
+		sub_viewport.set_msaa(Viewport.MSAA_4X)
+		sub_viewport.set_screen_space_aa(Viewport.SCREEN_SPACE_AA_DISABLED)
+	elif index == 4: # 8x
+		sub_viewport.set_msaa(Viewport.MSAA_8X)
+		sub_viewport.set_screen_space_aa(Viewport.SCREEN_SPACE_AA_DISABLED)
+
+
+func _on_fullscreen_option_button_item_selected(index: int) -> void:
+	# To change between winow, fullscreen and other window modes,
+	# set the root mode to one of the options of Window.MODE_*.
+	# other modes are maximized, minimized and exclusive fullscreen.
+	if index == 0:
+		get_tree().root.set_mode(Window.MODE_WINDOWED)
+	elif index == 1:
+		get_tree().root.set_mode(Window.MODE_FULLSCREEN)
+
+
+func _on_ss_reflections_option_button_item_selected(index: int) -> void:
+	# This is a setting that is attached to the environment.
+	# If your game requires you to change the environment,
+	# then be sure to run this function again to set the settings correct.
+	if index == 0: # Disabled
+		world_environment.environment.set_ssr_enabled(false)
+	elif index == 1: # Low
+		world_environment.environment.set_ssr_enabled(true)
+		world_environment.environment.set_ssr_max_steps(8)
+	elif index == 2: # Medium
+		world_environment.environment.set_ssr_enabled(true)
+		world_environment.environment.set_ssr_max_steps(32)
+	elif index == 3: # High
+		world_environment.environment.set_ssr_enabled(true)
+		world_environment.environment.set_ssr_max_steps(64)
+	# We set the fade in higher (default is 0.15) so it looks
+	# a better and cleaner.
+	world_environment.environment.set_ssr_fade_in(0.7)
+
+func _on_ssao_option_button_item_selected(index: int) -> void:
+	# This is a setting that is attached to the environment.
+	# If your game requires you to change the environment,
+	# then be sure to run this function again to set the settings correct.
+	if index == 0: # Disabled
+		world_environment.environment.set_ssao_enabled(false)
+	elif index == 1: # Enabled
+		world_environment.environment.set_ssao_enabled(true)
+
+
+func _on_ssil_option_button_item_selected(index: int) -> void:
+	# This is a setting that is attached to the environment.
+	# If your game requires you to change the environment,
+	# then be sure to run this function again to set the settings correct.
+	if index == 0: # Disabled
+		world_environment.environment.set_ssil_enabled(false)
+	elif index == 1: # Enabled
+		world_environment.environment.set_ssil_enabled(true)
+
+
+func _on_sdfgi_option_button_item_selected(index: int) -> void:
+	# This is a setting that is attached to the environment.
+	# If your game requires you to change the environment,
+	# then be sure to run this function again to set the settings correct.
+	if index == 0: # Disabled
+		world_environment.environment.set_sdfgi_enabled(false)
+	elif index == 1: # Enabled
+		world_environment.environment.set_sdfgi_enabled(true)
+
+
+func _on_glow_option_button_item_selected(index: int) -> void:
+	# This is a setting that is attached to the environment.
+	# If your game requires you to change the environment,
+	# then be sure to run this function again to set the settings correct.
+	if index == 0: # Disabled
+		world_environment.environment.set_glow_enabled(false)
+	elif index == 1: # Enabled
+		world_environment.environment.set_glow_enabled(true)
+
+
+func _on_brightness_slider_value_changed(value: float) -> void:
+	# This is a setting that is attached to the environment.
+	# If your game requires you to change the environment,
+	# then be sure to run this function again to set the settings correct.
+	# The slider value is clammed between 0.5 and 4.
+	world_environment.environment.set_adjustment_brightness(value)
+
+
+func _on_contrast_slider_value_changed(value: float) -> void:
+	# This is a setting that is attached to the environment.
+	# If your game requires you to change the environment,
+	# then be sure to run this function again to set the settings correct.
+	# The slider value is clammed between 0.5 and 4.
+	world_environment.environment.set_adjustment_contrast(value)
+
+
+func _on_saturation_slider_value_changed(value: float) -> void:
+	# This is a setting that is attached to the environment.
+	# If your game requires you to change the environment,
+	# then be sure to run this function again to set the settings correct.
+	# The slider value is clammed between 0.5 and 10.
+	world_environment.environment.set_adjustment_saturation(value)