Add option to toggle ambient occlusion

cityjson · Jun 21, 2024 · 9fe4393 · 9fe4393
1 parent d651d73
commit 9fe4393
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -574,6 +574,7 @@
               :texture-manager="textureManager"
               :active-texture-theme="activeTextureTheme"
               :double-side="doubleSide"
+              :ambient-occlusion="ambientOcclusion"
               @object_clicked="move_to_object($event)"
               @rendering="loading = $event"
               @loadCompleted="onLoadComplete()"
@@ -609,6 +610,18 @@
                   for="semanticsSwitch"
                 >Semantics</label>
               </div>
+              <div class="custom-control custom-switch ml-1">
+                <input
+                  id="ambientOcclussionSwitch"
+                  v-model="ambientOcclusion"
+                  type="checkbox"
+                  class="custom-control-input"
+                >
+                <label
+                  class="custom-control-label"
+                  for="ambientOcclussionSwitch"
+                >Ambient Occlusion</label>
+              </div>
               <div
                 class="btn-group ml-1 mb-1 bg-white"
                 role="group"
@@ -780,6 +793,7 @@ export default {
 			activeLoD: - 1,
 			cameraLight: false,
 			doubleSide: true,
+			ambientOcclusion: false,
 			performanceMode: false,
 			conditionalFormatting: false,
 			conditionalAttribute: '',

diff --git a/src/lib-components/ThreeJsViewer.vue b/src/lib-components/ThreeJsViewer.vue
@@ -103,6 +103,10 @@ export default {
 			type: Boolean,
 			default: true
 		},
+		ambientOcclusion: {
+			type: Boolean,
+			default: true
+		},
 		activeLod: {
 			type: Number,
 			default: - 1
@@ -224,6 +228,21 @@ export default {
 
 			this.updateScene();
 
+		},
+		ambientOcclusion: function () {
+
+			if ( this.ambientOcclusion ) {
+
+				this.composer.addPass( this.gtaoPass );
+
+			} else {
+
+				this.composer.removePass( this.gtaoPass );
+
+			}
+
+			this.updateScene();
+
 		},
 		highlightSelectedSurface: function () {
 
@@ -363,6 +382,7 @@ export default {
 		this.raycaster = null;
 		this.mouse = null;
 		this.spotLight = null;
+		this.gtaoPass = null;
 		this.composer = null;
 
 	},
@@ -676,7 +696,7 @@ export default {
 			const renderPass = new RenderPass( this.scene, this.camera );
 			composer.addPass( renderPass );
 
-			const gtaoPass = new GTAOPass( this.scene, this.camera, viewer.clientWidth, viewer.clientHeight );
+			this.gtaoPass = new GTAOPass( this.scene, this.camera, viewer.clientWidth, viewer.clientHeight );
 
 			const aoParameters = {
 				radius: 2.4,
@@ -688,9 +708,13 @@ export default {
 				screenSpaceRadius: false,
 			};
 
-			gtaoPass.updateGtaoMaterial( aoParameters );
+			this.gtaoPass.updateGtaoMaterial( aoParameters );
+
+			if ( this.ambientOcclusion ) {
 
-			composer.addPass( gtaoPass );
+				composer.addPass( this.gtaoPass );
+
+			}
 
 			const outputPass = new OutputPass();
 			composer.addPass( outputPass );