Merge pull request #234 from vanruesc/dev

Version 6.18.0

demo/src/demos/AntialiasingDemo.js

@@ -11,6 +11,7 @@ import {
 	CopyMaterial,
 	EdgeDetectionMode,
 	EffectPass,
+	PredicationMode,
 	ShaderPass,
 	SMAAEffect,
 	SMAAImageLoader,
@@ -154,7 +155,7 @@ export class AntialiasingDemo extends PostProcessingDemo {
 		// Camera.
 
 		const aspect = window.innerWidth / window.innerHeight;
-		const camera = new PerspectiveCamera(50, aspect, 0.5, 2000);
+		const camera = new PerspectiveCamera(50, aspect, 0.3, 2000);
 		camera.position.set(4, 8, 0.75);
 		this.camera = camera;
 
@@ -197,9 +198,14 @@ export class AntialiasingDemo extends PostProcessingDemo {
 			assets.get("smaa-search"),
 			assets.get("smaa-area"),
 			SMAAPreset.HIGH,
-			EdgeDetectionMode.DEPTH
+			EdgeDetectionMode.COLOR
 		);
 
+		smaaEffect.edgeDetectionMaterial.setEdgeDetectionThreshold(0.05);
+		smaaEffect.edgeDetectionMaterial.setPredicationMode(PredicationMode.DEPTH);
+		smaaEffect.edgeDetectionMaterial.setPredicationThreshold(0.002);
+		smaaEffect.edgeDetectionMaterial.setPredicationScale(1.0);
+
 		const edgesTextureEffect = new TextureEffect({
 			blendFunction: BlendFunction.SKIP,
 			texture: smaaEffect.renderTargetEdges.texture
@@ -288,12 +294,16 @@ export class AntialiasingDemo extends PostProcessingDemo {
 		const weightsTextureEffect = this.weightsTextureEffect;
 		const edgeDetectionMaterial = smaaEffect.edgeDetectionMaterial;
 
-		const AAMode = Object.assign({
+		const AAMode = {
 			DISABLED: 0,
 			SMAA: 1
-		}, !renderer.capabilities.isWebGL2 ? {} : {
-			MSAA: 2
-		});
+		};
+
+		if(renderer.capabilities.isWebGL2) {
+
+			Object.assign(AAMode, { MSAA: 2 });
+
+		}
 
 		const SMAAMode = {
 			DEFAULT: 0,
@@ -306,13 +316,25 @@ export class AntialiasingDemo extends PostProcessingDemo {
 			"smaa": {
 				"mode": SMAAMode.DEFAULT,
 				"preset": SMAAPreset.HIGH,
-				"edge detection": EdgeDetectionMode.DEPTH,
-				"contrast factor": Number(edgeDetectionMaterial.defines.LOCAL_CONTRAST_ADAPTATION_FACTOR),
 				"opacity": smaaEffect.blendMode.opacity.value,
 				"blend mode": smaaEffect.blendMode.blendFunction
+			},
+			"edgeDetection": {
+				"mode": Number(edgeDetectionMaterial.defines.EDGE_DETECTION_MODE),
+				"contrast factor": Number(edgeDetectionMaterial.defines.LOCAL_CONTRAST_ADAPTATION_FACTOR),
+				"threshold": Number(edgeDetectionMaterial.defines.EDGE_THRESHOLD)
+			},
+			"predication": {
+				"mode": Number(edgeDetectionMaterial.defines.PREDICATION_MODE),
+				"threshold": Number(edgeDetectionMaterial.defines.PREDICATION_THRESHOLD),
+				"strength": Number(edgeDetectionMaterial.defines.PREDICATION_STRENGTH),
+				"scale": Number(edgeDetectionMaterial.defines.PREDICATION_SCALE)
 			}
 		};
 
+		// Disable PredicationMode.CUSTOM for the demo.
+		delete PredicationMode.CUSTOM;
+
 		menu.add(this, "rotate");
 
 		menu.add(params, "antialiasing", AAMode).onChange(() => {
@@ -322,7 +344,8 @@ export class AntialiasingDemo extends PostProcessingDemo {
 			effectPass.enabled = (mode === AAMode.SMAA);
 			copyPass.enabled = !effectPass.enabled;
 
-			composer.multisampling = (mode === AAMode.MSAA) ? Math.min(4, context.getParameter(context.MAX_SAMPLES)) : 0;
+			composer.multisampling = (mode !== AAMode.MSAA) ? 0 :
+				Math.min(4, context.getParameter(context.MAX_SAMPLES));
 
 		});
 
@@ -341,18 +364,53 @@ export class AntialiasingDemo extends PostProcessingDemo {
 		folder.add(params.smaa, "preset", SMAAPreset).onChange(() => {
 
 			smaaEffect.applyPreset(Number(params.smaa.preset));
+			params.edgeDetection.threshold = Number(edgeDetectionMaterial.defines.EDGE_THRESHOLD);
+
+		});
+
+		let subfolder = folder.addFolder("Edge Detection");
+
+		subfolder.add(params.edgeDetection, "mode", EdgeDetectionMode).onChange(() => {
+
+			edgeDetectionMaterial.setEdgeDetectionMode(Number(params.edgeDetection.mode));
+
+		});
+
+		subfolder.add(params.edgeDetection, "contrast factor").min(1.0).max(3.0).step(0.01).onChange(() => {
+
+			edgeDetectionMaterial.setLocalContrastAdaptationFactor(Number(params.edgeDetection["contrast factor"]));
+
+		});
+
+		subfolder.add(params.edgeDetection, "threshold").min(0.0).max(0.5).step(0.0001).onChange(() => {
+
+			edgeDetectionMaterial.setEdgeDetectionThreshold(Number(params.edgeDetection.threshold));
+
+		}).listen();
+
+		subfolder = folder.addFolder("Predicated Thresholding");
+
+		subfolder.add(params.predication, "mode", PredicationMode).onChange(() => {
+
+			edgeDetectionMaterial.setPredicationMode(Number(params.predication.mode));
+
+		});
+
+		subfolder.add(params.predication, "threshold").min(0.0).max(0.5).step(0.0001).onChange(() => {
+
+			edgeDetectionMaterial.setPredicationThreshold(Number(params.predication.threshold));
 
 		});
 
-		folder.add(params.smaa, "edge detection", EdgeDetectionMode).onChange(() => {
+		subfolder.add(params.predication, "strength").min(0.0).max(1.0).step(0.0001).onChange(() => {
 
-			edgeDetectionMaterial.setEdgeDetectionMode(Number(params.smaa["edge detection"]));
+			edgeDetectionMaterial.setPredicationStrength(Number(params.predication.strength));
 
 		});
 
-		folder.add(params.smaa, "contrast factor").min(1.0).max(3.0).step(0.01).onChange(() => {
+		subfolder.add(params.predication, "scale").min(1.0).max(5.0).step(0.01).onChange(() => {
 
-			edgeDetectionMaterial.setLocalContrastAdaptationFactor(Number(params.smaa["contrast factor"]));
+			edgeDetectionMaterial.setPredicationScale(Number(params.predication.scale));
 
 		});
 

demo/src/demos/SSAODemo.js

@@ -303,6 +303,8 @@ export class SSAODemo extends PostProcessingDemo {
 			textureEffect.blendMode.setBlendFunction((mode !== RenderMode.DEFAULT) ?
 				BlendFunction.NORMAL : BlendFunction.SKIP);
 
+			effectPass.encodeOutput = (mode === RenderMode.DEFAULT);
+
 		}
 
 		if(capabilities.isWebGL2) {

demo/src/index.js

@@ -38,6 +38,15 @@ import { TextureUtils } from "./utils/TextureUtils";
 
 let manager;
 
+/**
+ * A composer.
+ *
+ * @type {EffectComposer}
+ * @private
+ */
+
+let composer;
+
 /**
  * A camera.
  *
@@ -97,7 +106,7 @@ window.addEventListener("load", (event) => {
 	OverrideMaterialManager.workaroundEnabled = true;
 
 	// Create the effect composer.
-	const composer = new EffectComposer(renderer, {
+	composer = new EffectComposer(renderer, {
 		frameBufferType: HalfFloatType
 	});
 
@@ -187,6 +196,7 @@ window.addEventListener("resize", (event) => {
 	const width = window.innerWidth;
 	const height = window.innerHeight;
 	manager.setSize(width, height);
+	composer.setSize(width, height);
 
 });
 
@@ -217,7 +227,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 });
 
 /**
- * Toggles the visibility of the interface on H key press.
+ * Handles keyboard events.
  *
  * @private
  * @param {KeyboardEvent} event - An event.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "postprocessing",
-	"version": "6.17.4",
+	"version": "6.18.0",
 	"description": "A post processing library that provides the means to implement image filter effects for three.js.",
 	"homepage": "https://github.com/vanruesc/postprocessing",
 	"main": "build/postprocessing.js",
@@ -47,7 +47,7 @@
 		"dev": "concurrently -k -n server,rollup,eslint \"hs -s\" \"rollup -c -w\" \"esw -w src demo/src\"",
 		"doc": "rimraf public/docs && esdoc",
 		"lint": "eslint src demo/src",
-		"prepack": "npm test && npm run doc",
+		"prepublishOnly": "npm test && npm run doc",
 		"pretest": "rimraf build && npm run build:production",
 		"test": "ava"
 	},
@@ -64,13 +64,13 @@
 		"extends": "aether"
 	},
 	"peerDependencies": {
-		"three": ">= 0.102.0 < 0.122.0"
+		"three": ">= 0.102.0 < 0.123.0"
 	},
 	"devDependencies": {
 		"@babel/core": "7.x.x",
 		"@babel/preset-env": "7.x.x",
 		"@rollup/plugin-babel": "5.x.x",
-		"@rollup/plugin-node-resolve": "9.x.x",
+		"@rollup/plugin-node-resolve": "10.x.x",
 		"ava": "3.x.x",
 		"concurrently": "5.x.x",
 		"cross-env": "7.x.x",