From b1b78f745a791bb463e87afcf932610d6d1ead8e Mon Sep 17 00:00:00 2001
From: "Raoul v. R." <vanruesc@users.noreply.github.com>
Date: Sun, 28 Jul 2024 23:37:46 +0200
Subject: [PATCH] Update blur.ts

---
 manual/assets/js/src/demos/blur.ts | 48 ++++++++++++++++--------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/manual/assets/js/src/demos/blur.ts b/manual/assets/js/src/demos/blur.ts
index 282d3efb9..09373b3ef 100644
--- a/manual/assets/js/src/demos/blur.ts
+++ b/manual/assets/js/src/demos/blur.ts
@@ -90,20 +90,25 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	// Post Processing
 
+	const mipmapBlurPass = new MipmapBlurPass({
+		clampToBorder: false,
+		radius: 1.0,
+		levels: 1
+	});
+
 	const gaussianBlurPass = new GaussianBlurPass({
 		kernelSize: 15,
 		iterations: 1,
 		resolutionScale: 0.5
 	});
 
-	const mipmapBlurPass = new MipmapBlurPass({
-		clampToBorder: false,
-		radius: 1.0,
-		levels: 1
-	});
+	gaussianBlurPass.enabled = false;
+	const textureEffect = new TextureEffect({ texture: mipmapBlurPass.texture });
 
-	mipmapBlurPass.enabled = false;
-	const textureEffect = new TextureEffect({ texture: gaussianBlurPass.texture });
+	const outputPass = new EffectPass(
+		textureEffect,
+		new ToneMappingEffect()
+	);
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
@@ -112,12 +117,9 @@ window.addEventListener("load", () => void load().then((assets) => {
 			frameBufferType: HalfFloatType,
 			samples: 4
 		}),
-		gaussianBlurPass,
 		mipmapBlurPass,
-		new EffectPass(
-			textureEffect,
-			new ToneMappingEffect()
-		)
+		gaussianBlurPass,
+		outputPass
 	);
 
 	// Settings
@@ -126,17 +128,19 @@ window.addEventListener("load", () => void load().then((assets) => {
 	const fpsGraph = Utils.createFPSGraph(pane);
 
 	const folder = pane.addFolder({ title: "Settings" });
+	folder.addBinding(outputPass, "dithering");
+
 	const tab = folder.addTab({
 		pages: [
-			{ title: "Gaussian" },
-			{ title: "Mipmap" }
+			{ title: "Mipmap" },
+			{ title: "Gaussian" }
 		]
 	});
 
 	tab.on("select", (event) => {
 
-		gaussianBlurPass.enabled = (event.index === 0);
-		mipmapBlurPass.enabled = (event.index === 1);
+		mipmapBlurPass.enabled = (event.index === 0);
+		gaussianBlurPass.enabled = (event.index === 1);
 		textureEffect.texture = gaussianBlurPass.enabled ? gaussianBlurPass.texture : mipmapBlurPass.texture;
 
 	});
@@ -152,14 +156,14 @@ window.addEventListener("load", () => void load().then((assets) => {
 	};
 
 	const p0 = tab.pages[0];
-	tab.pages[0].addBinding(gaussianBlurPass.fullscreenMaterial, "kernelSize", { options: gaussKernels });
-	p0.addBinding(gaussianBlurPass.fullscreenMaterial, "scale", { min: 0, max: 2, step: 0.01 });
-	p0.addBinding(gaussianBlurPass.resolution, "scale", { label: "resolution", min: 0.5, max: 1, step: 0.05 });
-	p0.addBinding(gaussianBlurPass, "iterations", { min: 1, max: 8, step: 1 });
+	p0.addBinding(mipmapBlurPass, "radius", { min: 0, max: 1, step: 0.01 });
+	p0.addBinding(mipmapBlurPass, "levels", { min: 1, max: 10, step: 1 });
 
 	const p1 = tab.pages[1];
-	p1.addBinding(mipmapBlurPass, "radius", { min: 0, max: 1, step: 0.01 });
-	p1.addBinding(mipmapBlurPass, "levels", { min: 1, max: 10, step: 1 });
+	p1.addBinding(gaussianBlurPass.fullscreenMaterial, "kernelSize", { options: gaussKernels });
+	p1.addBinding(gaussianBlurPass.fullscreenMaterial, "scale", { min: 0, max: 2, step: 0.01 });
+	p1.addBinding(gaussianBlurPass.resolution, "scale", { label: "resolution", min: 0.5, max: 1, step: 0.05 });
+	p1.addBinding(gaussianBlurPass, "iterations", { min: 1, max: 8, step: 1 });
 
 	// Resize Handler