Update demos

vanruesc · vanruesc · commit 03d1394f4daa · 2026-04-26T17:30:08.000+02:00
diff --git a/manual/assets/js/src/demos/ascii.ts b/manual/assets/js/src/demos/ascii.ts
@@ -12,7 +12,6 @@ import {
 import {
 	ASCIIEffect,
 	ASCIITexture,
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	MixBlendFunction,
@@ -117,7 +116,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		new EffectPass(effect, new ToneMappingEffect())
 	);
diff --git a/manual/assets/js/src/demos/bloom.ts b/manual/assets/js/src/demos/bloom.ts
@@ -10,7 +10,6 @@ import {
 
 import {
 	BloomEffect,
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	RenderPipeline,
@@ -103,7 +102,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		effectPass
 	);
diff --git a/manual/assets/js/src/demos/blur.ts b/manual/assets/js/src/demos/blur.ts
@@ -9,7 +9,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GaussianBlurPass,
 	GeometryPass,
@@ -110,7 +109,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		mipmapBlurPass,
 		gaussianBlurPass,
diff --git a/manual/assets/js/src/demos/brightness-contrast.ts b/manual/assets/js/src/demos/brightness-contrast.ts
@@ -12,7 +12,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	GeometryPass,
 	RenderPipeline
 } from "postprocessing";
@@ -86,15 +85,12 @@ window.addEventListener("load", () => void load().then((assets) => {
 	// Post Processing
 
 	const pipeline = new RenderPipeline(renderer);
-	pipeline.add(
-		new ClearPass(),
-		new GeometryPass(scene, camera)
-	);
+	pipeline.add(new GeometryPass(scene, camera));
 
 	/*
 	const effect = new BrightnessContrastEffect();
 	effect.blendMode.blendFunction = new MixBlendFunction();
-	pipeline.addPass(new EffectPass(effect, new ToneMappingEffect()));
+	pipeline.add(new EffectPass(effect, new ToneMappingEffect()));
 	*/
 
 	// Settings
diff --git a/manual/assets/js/src/demos/chromatic-aberration.ts b/manual/assets/js/src/demos/chromatic-aberration.ts
@@ -11,7 +11,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	RenderPipeline,
@@ -122,7 +121,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		new EffectPass(new ToneMappingEffect())
 	);
diff --git a/manual/assets/js/src/demos/color-depth.ts b/manual/assets/js/src/demos/color-depth.ts
@@ -11,7 +11,6 @@ import {
 
 import {
 	ColorDepthEffect,
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	MixBlendFunction,
@@ -103,7 +102,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		new EffectPass(new ToneMappingEffect(), effect)
 	);
diff --git a/manual/assets/js/src/demos/depth-of-field.ts b/manual/assets/js/src/demos/depth-of-field.ts
@@ -11,7 +11,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	GeometryPass,
 	RenderPipeline
 } from "postprocessing";
@@ -113,7 +112,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.autoRenderToScreen = false;
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 })
 	);
 
@@ -137,8 +135,8 @@ window.addEventListener("load", () => void load().then((assets) => {
 	// #endregion DEBUG
 
 	effect.blendMode.blendFunction = new MixBlendFunction();
-	pipeline.addPass(new EffectPass(effect, new ToneMappingEffect()));
-	pipeline.addPass(cocDebugPass);
+	pipeline.add(new EffectPass(effect, new ToneMappingEffect()));
+	pipeline.add(cocDebugPass);
 	*/
 
 	// Settings
diff --git a/manual/assets/js/src/demos/depth-picking.ts b/manual/assets/js/src/demos/depth-picking.ts
@@ -13,7 +13,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	DepthCopyMode,
 	DepthPickingPass,
 	EffectPass,
@@ -106,7 +105,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		depthPickingPass,
 		new EffectPass(new ToneMappingEffect())
diff --git a/manual/assets/js/src/demos/fxaa.ts b/manual/assets/js/src/demos/fxaa.ts
@@ -9,7 +9,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	FXAAEffect,
 	GeometryPass,
@@ -91,7 +90,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera),
 		new EffectPass(effect, new ToneMappingEffect())
 	);
diff --git a/manual/assets/js/src/demos/gbuffer.ts b/manual/assets/js/src/demos/gbuffer.ts
@@ -10,7 +10,6 @@ import {
 
 import {
 	BufferDebugPass,
-	ClearPass,
 	DebugTools,
 	EffectPass,
 	GBuffer,
@@ -103,7 +102,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		new EffectPass(new ToneMappingEffect()),
 		bufferDebugPass
diff --git a/manual/assets/js/src/demos/glitch.ts b/manual/assets/js/src/demos/glitch.ts
@@ -10,7 +10,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	GeometryPass,
 	RenderPipeline
 } from "postprocessing";
@@ -87,7 +86,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 })
 	);
 
@@ -96,8 +94,8 @@ window.addEventListener("load", () => void load().then((assets) => {
 	const effect = new GlitchEffect({ perturbationMap: assets.get("noise") });
 	effect.input.uniforms.set(GlitchEffect.INPUT_UNIFORM_OFFSET, chromaticAberrationEffect.offset); // TODO not like this
 
-	pipeline.addPass(new EffectPass(effect));
-	pipeline.addPass(new EffectPass(chromaticAberrationEffect, new ToneMappingEffect());
+	pipeline.add(new EffectPass(effect));
+	pipeline.add(new EffectPass(chromaticAberrationEffect, new ToneMappingEffect());
 	*/
 
 	// Settings
diff --git a/manual/assets/js/src/demos/halftone.ts b/manual/assets/js/src/demos/halftone.ts
@@ -9,7 +9,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	HalftoneEffect,
@@ -101,7 +100,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		new EffectPass(effect, new ToneMappingEffect())
 	);
diff --git a/manual/assets/js/src/demos/hue-saturation.ts b/manual/assets/js/src/demos/hue-saturation.ts
@@ -12,7 +12,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	GeometryPass,
 	RenderPipeline
 } from "postprocessing";
@@ -87,14 +86,13 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera)
 	);
 
 	/*
 	const effect = new HueSaturationEffect();
 	effect.blendMode.blendFunction = new MixBlendFunction();
-	pipeline.addPass(new EffectPass(effect, new ToneMappingEffect()));
+	pipeline.add(new EffectPass(effect, new ToneMappingEffect()));
 	*/
 
 	// Settings
diff --git a/manual/assets/js/src/demos/lens-distortion.ts b/manual/assets/js/src/demos/lens-distortion.ts
@@ -10,7 +10,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	LensDistortionEffect,
@@ -89,7 +88,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		new EffectPass(effect, new ToneMappingEffect())
 	);
diff --git a/manual/assets/js/src/demos/lut.ts b/manual/assets/js/src/demos/lut.ts
@@ -14,7 +14,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	LookupTexture,
@@ -188,7 +187,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { alpha: true }),
 		new EffectPass(effect)
 	);
diff --git a/manual/assets/js/src/demos/msaa.ts b/manual/assets/js/src/demos/msaa.ts
@@ -9,7 +9,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	RenderPipeline,
@@ -88,7 +87,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		geoPass,
 		new EffectPass(new ToneMappingEffect())
 	);
diff --git a/manual/assets/js/src/demos/noise.ts b/manual/assets/js/src/demos/noise.ts
@@ -12,7 +12,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	NoiseEffect,
@@ -91,7 +90,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { alpha: true }),
 		new EffectPass(effect)
 	);
diff --git a/manual/assets/js/src/demos/pixelation.ts b/manual/assets/js/src/demos/pixelation.ts
@@ -9,7 +9,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	GeometryPass,
 	RenderPipeline
 } from "postprocessing";
@@ -92,7 +91,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 })
 	);
 
diff --git a/manual/assets/js/src/demos/scanlines.ts b/manual/assets/js/src/demos/scanlines.ts
@@ -10,7 +10,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	RenderPipeline,
@@ -98,7 +97,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const pipeline = new RenderPipeline(renderer);
 	pipeline.add(
-		new ClearPass(),
 		new GeometryPass(scene, camera, { samples: 4 }),
 		new EffectPass(effect, new ToneMappingEffect())
 	);
diff --git a/manual/assets/js/src/demos/scissor-viewport.ts b/manual/assets/js/src/demos/scissor-viewport.ts
@@ -9,7 +9,6 @@ import {
 } from "three";
 
 import {
-	ClearPass,
 	EffectPass,
 	GeometryPass,
 	RenderPipeline,
@@ -113,25 +112,18 @@ window.addEventListener("load", () => void load().then((assets) => {
 	// Post Processing
 
 	const pipeline = new RenderPipeline(renderer);
-	const clearPassA = new ClearPass();
-	const clearPassB = new ClearPass();
 	const geometryPassA = new GeometryPass(sceneA, camera, { samples: 4 });
 	const geometryPassB = new GeometryPass(sceneB, camera);
 	const effectPass = new EffectPass(new ToneMappingEffect());
 
 	geometryPassB.output.defaultBuffer = geometryPassA.output.defaultBuffer;
 
 	geometryPassA.scissor.enabled = true;
-	geometryPassB.scissor.enabled = true;
 	geometryPassA.viewport.enabled = true;
+	geometryPassB.scissor.enabled = true;
 	geometryPassB.viewport.enabled = true;
 
-	clearPassA.scissor.enabled = true;
-	clearPassB.scissor.enabled = true;
-	clearPassA.viewport.enabled = true;
-	clearPassB.viewport.enabled = true;
-
-	pipeline.add(clearPassA, geometryPassA, clearPassB, geometryPassB, effectPass);
+	pipeline.add(geometryPassA, geometryPassB, effectPass);
 
 	// Settings
 
@@ -153,15 +145,10 @@ window.addEventListener("load", () => void load().then((assets) => {
 		pipeline.setSize(width, height);
 
 		geometryPassA.scissor.set(0, 0, widthHalf, height);
-		geometryPassB.scissor.set(widthHalf, 0, widthHalf, height);
 		geometryPassA.viewport.set(0, 0, widthHalf, height);
+		geometryPassB.scissor.set(widthHalf, 0, widthHalf, height);
 		geometryPassB.viewport.set(widthHalf, 0, widthHalf, height);
 
-		clearPassA.scissor.set(0, 0, widthHalf, height);
-		clearPassB.scissor.set(widthHalf, 0, widthHalf, height);
-		clearPassA.viewport.set(0, 0, widthHalf, height);
-		clearPassB.viewport.set(widthHalf, 0, widthHalf, height);
-
 	}
 
 	window.addEventListener("resize", onResize);
diff --git a/manual/assets/js/src/demos/smaa.ts b/manual/assets/js/src/demos/smaa.ts
diff --git a/manual/assets/js/src/demos/texture.ts b/manual/assets/js/src/demos/texture.ts
diff --git a/manual/assets/js/src/demos/tilt-shift.ts b/manual/assets/js/src/demos/tilt-shift.ts
diff --git a/manual/assets/js/src/demos/tone-mapping.ts b/manual/assets/js/src/demos/tone-mapping.ts
diff --git a/manual/assets/js/src/demos/ui.ts b/manual/assets/js/src/demos/ui.ts
diff --git a/manual/assets/js/src/demos/vignette.ts b/manual/assets/js/src/demos/vignette.ts
diff --git a/manual/content/demos/utility/gbuffer.en.md b/manual/content/demos/utility/gbuffer.en.md
diff --git a/manual/content/demos/utility/scissor-viewport.md b/manual/content/demos/utility/scissor-viewport.md
diff --git a/manual/content/demos/utility/ui.en.md b/manual/content/demos/utility/ui.en.md
