Merge pull request #509 from pmndrs/dev

Version 6.32.2

README.md

@@ -61,6 +61,12 @@ const composer = new EffectComposer(renderer, {
 });
 ```
 
+## Tone Mapping
+
+Tone mapping is the process of converting HDR colors to LDR output colors. When using postprocessing, the `toneMapping` setting on the renderer should be set to `NoToneMapping` (default) and high precision frame buffers should be enabled. Otherwise, colors will be mapped to `[0.0, 1.0]` at the start of the pipeline. To enable tone mapping, use a `ToneMappingEffect` at the end of the pipeline.
+
+Note that tone mapping is not applied to the clear color when using only the renderer because clearing doesn't involve shaders. Postprocessing applies to the full input image which means that tone mapping will also be applied uniformly. Consequently, the results of tone mapping a clear color background with and without postprocessing will be different, with the postprocessing approach being correct.
+
 ## Performance
 
 This library provides an [EffectPass](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/EffectPass.js~EffectPass.html) which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own [blend function](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction).

demo/src/demos/AntialiasingDemo.js

@@ -157,11 +157,11 @@ export class AntialiasingDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(4, 8, 0.75);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(4, 8, 0.75);
 		controls.lookAt(-0.5, 6.5, -0.25);
 		this.controls = controls;
 

demo/src/demos/BloomDemo.js

@@ -218,12 +218,12 @@ export class BloomDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.general.setMode(ControlMode.THIRD_PERSON);
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setEnabled(false);
-		settings.zoom.setSensitivity(1.0);
-		controls.setPosition(-10, 6, 15);
+		settings.general.mode = ControlMode.THIRD_PERSON;
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.enabled = false;
+		settings.zoom.sensitivity = 1.0;
+		controls.position.set(-10, 6, 15);
 		this.controls = controls;
 
 		// Sky

demo/src/demos/BlurDemo.js

@@ -146,12 +146,12 @@ export class BlurDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.general.setMode(ControlMode.THIRD_PERSON);
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setEnabled(false);
-		settings.zoom.setSensitivity(1.0);
-		controls.setPosition(-15, 0, -15);
+		settings.general.mode = ControlMode.THIRD_PERSON;
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.enabled = false;
+		settings.zoom.sensitivity = 1.0;
+		controls.position.set(-15, 0, -15);
 		this.controls = controls;
 
 		// Sky

demo/src/demos/ColorDepthDemo.js

@@ -103,11 +103,11 @@ export class ColorDepthDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-9, 0.5, 0);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-9, 0.5, 0);
 		controls.lookAt(0, 3, -3.5);
 		this.controls = controls;
 

demo/src/demos/ColorGradingDemo.js

@@ -228,11 +228,11 @@ export class ColorGradingDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-9, 0.5, 0);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-9, 0.5, 0);
 		controls.lookAt(0, 3, -3.5);
 		this.controls = controls;
 

demo/src/demos/DepthOfFieldDemo.js

@@ -151,11 +151,11 @@ export class DepthOfFieldDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-2.3684, 0.5964, -1.3052);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-2.3684, 0.5964, -1.3052);
 		controls.lookAt(-1.4265, 0.6513, -1.6365);
 		this.controls = controls;
 

demo/src/demos/GlitchDemo.js

@@ -143,11 +143,11 @@ export class GlitchDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-9, 0.5, 0);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-9, 0.5, 0);
 		controls.lookAt(0, 3, -3.5);
 		this.controls = controls;
 

demo/src/demos/GodRaysDemo.js

@@ -138,11 +138,11 @@ export class GodRaysDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(9.25, 2.4, 1);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(9.25, 2.4, 1);
 		controls.lookAt(8.4, 2.15, 0.5);
 		this.controls = controls;
 

demo/src/demos/OutlineDemo.js

@@ -255,13 +255,13 @@ export class OutlineDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.general.setMode(ControlMode.THIRD_PERSON);
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setEnabled(false);
-		settings.zoom.setSensitivity(1.0);
-		settings.zoom.setDamping(0.05);
-		controls.setPosition(-4, 1.25, -5);
+		settings.general.mode = ControlMode.THIRD_PERSON;
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.enabled = false;
+		settings.zoom.sensitivity = 1.0;
+		settings.zoom.damping = 0.05;
+		controls.position.set(-4, 1.25, -5);
 		this.controls = controls;
 
 		// Sky
@@ -383,6 +383,7 @@ export class OutlineDemo extends PostProcessingDemo {
 
 		const outlineEffect = new OutlineEffect(scene, camera, {
 			blendFunction: BlendFunction.SCREEN,
+			multisampling: Math.min(4, renderer.capabilities.maxSamples),
 			edgeStrength: 2.5,
 			pulseSpeed: 0.0,
 			visibleEdgeColor: 0xffffff,
@@ -440,6 +441,8 @@ export class OutlineDemo extends PostProcessingDemo {
 
 		});
 
+		menu.add(effect, "multisampling", [0, 2, 4]);
+
 		menu.add(params, "blurriness",
 			KernelSize.VERY_SMALL, KernelSize.HUGE + 1, 1).onChange((value) => {
 

demo/src/demos/PatternDemo.js

@@ -119,11 +119,11 @@ export class PatternDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-9, 0.5, 0);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-9, 0.5, 0);
 		controls.lookAt(0, 3, -3.5);
 		this.controls = controls;
 

demo/src/demos/PixelationDemo.js

@@ -98,11 +98,11 @@ export class PixelationDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-9, 0.5, 0);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-9, 0.5, 0);
 		controls.lookAt(0, 3, -3.5);
 		this.controls = controls;
 

demo/src/demos/SSAODemo.js

@@ -131,11 +131,11 @@ export class SSAODemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(9.5, 1.65, -0.25);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(9.5, 1.65, -0.25);
 		controls.lookAt(8.5, 1.65, -0.25);
 		this.controls = controls;
 

demo/src/demos/ShockWaveDemo.js

@@ -203,11 +203,11 @@ export class ShockWaveDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-8, 1, -0.25);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-8, 1, -0.25);
 		controls.lookAt(target);
 		this.controls = controls;
 

demo/src/demos/TextureDemo.js

@@ -115,11 +115,11 @@ export class TextureDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-9, 0.5, 0);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-9, 0.5, 0);
 		controls.lookAt(0, 3, -3.5);
 		this.controls = controls;
 

demo/src/demos/ToneMappingDemo.js

@@ -109,11 +109,11 @@ export class ToneMappingDemo extends PostProcessingDemo {
 		const { position, quaternion } = camera;
 		const controls = new SpatialControls(position, quaternion, domElement);
 		const settings = controls.settings;
-		settings.rotation.setSensitivity(2.2);
-		settings.rotation.setDamping(0.05);
-		settings.translation.setSensitivity(3.0);
-		settings.translation.setDamping(0.1);
-		controls.setPosition(-5.15, 8.1, -0.95);
+		settings.rotation.sensitivity = 2.2;
+		settings.rotation.damping = 0.05;
+		settings.translation.sensitivity = 3.0;
+		settings.translation.damping = 0.1;
+		controls.position.set(-5.15, 8.1, -0.95);
 		controls.lookAt(-4.4, 8.6, -0.5);
 		this.controls = controls;
 

manual/assets/css/src/themes/_highlight-dark.scss

@@ -18,7 +18,7 @@
 	/* KeywordType */ .chroma .kt { color: #66D9EF; }
 	/* Name */ .chroma .n { color: #F8F8F2; }
 	/* NameAttribute */ .chroma .na { color: #A6E22E; }
-	/* NameBuiltin */ .chroma .nb {  }
+	/* NameBuiltin */ .chroma .nb { color: #F8F8F2; }
 	/* NameBuiltinPseudo */ .chroma .bp {  }
 	/* NameClass */ .chroma .nc { color: #A6E22E; }
 	/* NameConstant */ .chroma .no { color: #66D9EF; }

manual/assets/js/src/demos/bloom.js

@@ -77,10 +77,10 @@ window.addEventListener("load", () => load().then((assets) => {
 	const camera = new PerspectiveCamera();
 	const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
 	const settings = controls.settings;
-	settings.rotation.setSensitivity(2.2);
-	settings.rotation.setDamping(0.05);
-	settings.translation.setDamping(0.1);
-	controls.setPosition(0, 0, 1);
+	settings.rotation.sensitivity = 2.2;
+	settings.rotation.damping = 0.05;
+	settings.translation.damping = 0.1;
+	controls.position.set(0, 0, 1);
 	controls.lookAt(0, 0, 0);
 
 	// Scene, Lights, Objects
@@ -125,8 +125,8 @@ window.addEventListener("load", () => load().then((assets) => {
 	});
 
 	const effect = new SelectiveBloomEffect(scene, camera, {
-		luminanceThreshold: 0.1,
-		luminanceSmoothing: 0.3,
+		luminanceThreshold: 0.3,
+		luminanceSmoothing: 0.2,
 		mipmapBlur: true,
 		intensity: 4.0
 	});

manual/assets/js/src/demos/blur.js

@@ -76,12 +76,12 @@ window.addEventListener("load", () => load().then((assets) => {
 	const camera = new PerspectiveCamera();
 	const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
 	const settings = controls.settings;
-	settings.general.setMode(ControlMode.THIRD_PERSON);
-	settings.rotation.setSensitivity(2.2);
-	settings.rotation.setDamping(0.05);
-	settings.zoom.setDamping(0.1);
-	settings.translation.setEnabled(false);
-	controls.setPosition(0, 0, 5);
+	settings.general.mode = ControlMode.THIRD_PERSON;
+	settings.rotation.sensitivity = 2.2;
+	settings.rotation.damping = 0.05;
+	settings.zoom.damping = 0.1;
+	settings.translation.enabled = false;
+	controls.position.set(0, 0, 5);
 
 	// Scene, Lights, Objects
 

manual/assets/js/src/demos/brightness-contrast.js

@@ -66,12 +66,12 @@ window.addEventListener("load", () => load().then((assets) => {
 	const camera = new PerspectiveCamera();
 	const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
 	const settings = controls.settings;
-	settings.general.setMode(ControlMode.THIRD_PERSON);
-	settings.zoom.setSensitivity(0.05);
-	settings.zoom.setDamping(0.1);
-	settings.rotation.setSensitivity(0);
-	settings.translation.setEnabled(false);
-	controls.setPosition(0, 0, 1.4);
+	settings.general.mode = ControlMode.THIRD_PERSON;
+	settings.zoom.sensitivity = 0.05;
+	settings.zoom.damping = 0.1;
+	settings.rotation.enabled = false;
+	settings.translation.enabled = false;
+	controls.position.set(0, 0, 1.4);
 
 	// Scene & Objects
 

manual/assets/js/src/demos/chromatic-aberration.js

@@ -71,10 +71,10 @@ window.addEventListener("load", () => load().then((assets) => {
 	const camera = new PerspectiveCamera();
 	const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
 	const settings = controls.settings;
-	settings.rotation.setSensitivity(2.2);
-	settings.rotation.setDamping(0.05);
-	settings.translation.setDamping(0.1);
-	controls.setPosition(0, 0, 1);
+	settings.rotation.sensitivity = 2.2;
+	settings.rotation.damping = 0.05;
+	settings.translation.damping = 0.1;
+	controls.position.set(0, 0, 1);
 	controls.lookAt(0, 0, 0);
 
 	// Scene, Lights, Objects

manual/assets/js/src/demos/color-depth.js

@@ -71,10 +71,10 @@ window.addEventListener("load", () => load().then((assets) => {
 	const camera = new PerspectiveCamera();
 	const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
 	const settings = controls.settings;
-	settings.rotation.setSensitivity(2.2);
-	settings.rotation.setDamping(0.05);
-	settings.translation.setDamping(0.1);
-	controls.setPosition(0, 0, 1);
+	settings.rotation.sensitivity = 2.2;
+	settings.rotation.damping = 0.05;
+	settings.translation.damping = 0.1;
+	controls.position.set(0, 0, 1);
 	controls.lookAt(0, 0, 0);
 
 	// Scene, Lights, Objects