Create LuminanceHighPassMaterial

Author: vanruesc

src/effects/BloomEffect.ts

@@ -1,7 +1,7 @@
 import { Uniform } from "three";
 import { LuminancePass } from "../passes/LuminancePass.js";
 import { MipmapBlurPass, MipmapBlurPassOptions } from "../passes/MipmapBlurPass.js";
-import { LuminanceMaterial } from "../materials/LuminanceMaterial.js";
+import { LuminanceHighPassMaterial } from "../materials/LuminanceHighPassMaterial.js";
 import { AddBlendFunction } from "./blending/blend-functions/AddBlendFunction.js";
 import { Effect } from "./Effect.js";
 
@@ -92,7 +92,6 @@ export class BloomEffect extends Effect implements BloomEffectOptions {
 		const luminanceMaterial = this.luminanceMaterial;
 		luminanceMaterial.threshold = luminanceThreshold;
 		luminanceMaterial.smoothing = luminanceSmoothing;
-		luminanceMaterial.colorOutput = true;
 
 		const mipmapBlurPass = new MipmapBlurPass({ levels, radius, fullResolutionUpsampling, clampToBorder });
 		this.mipmapBlurPass = mipmapBlurPass;
@@ -110,7 +109,7 @@ export class BloomEffect extends Effect implements BloomEffectOptions {
 	 * The luminance high-pass material.
 	 */
 
-	get luminanceMaterial(): LuminanceMaterial {
+	get luminanceMaterial(): LuminanceHighPassMaterial {
 
 		return this.luminancePass.fullscreenMaterial;
 

src/materials/LuminanceHighPassMaterial.ts

@@ -0,0 +1,67 @@
+import { Uniform } from "three";
+import { FullscreenMaterial } from "./FullscreenMaterial.js";
+
+import fragmentShader from "./shaders/luminance-high-pass.frag";
+import vertexShader from "./shaders/common.vert";
+
+/**
+ * A luminance high-pass shader material.
+ *
+ * @see https://www.poynton.com/notes/colour_and_gamma/ColorFAQ.html#RTFToC9
+ * @see https://hsto.org/getpro/habr/post_images/2ab/69d/084/2ab69d084f9a597e032624bcd74d57a7.png
+ * @category Materials
+ */
+
+export class LuminanceHighPassMaterial extends FullscreenMaterial {
+
+	/**
+	 * Constructs a new luminance high-pass material.
+	 */
+
+	constructor() {
+
+		super({
+			name: "LuminanceHighPassMaterial",
+			fragmentShader,
+			vertexShader,
+			uniforms: {
+				threshold: new Uniform(0.0),
+				smoothing: new Uniform(0.0)
+			}
+		});
+
+	}
+
+	/**
+	 * The luminance threshold.
+	 */
+
+	get threshold(): number {
+
+		return this.uniforms.threshold.value as number;
+
+	}
+
+	set threshold(value: number) {
+
+		this.uniforms.threshold.value = value;
+
+	}
+
+	/**
+	 * The luminance smoothing.
+	 */
+
+	get smoothing(): number {
+
+		return this.uniforms.smoothing.value as number;
+
+	}
+
+	set smoothing(value: number) {
+
+		this.uniforms.smoothing.value = value;
+
+	}
+
+}

src/materials/index.ts

@@ -12,7 +12,7 @@ export * from "./EffectMaterial.js";
 export * from "./FullscreenMaterial.js";
 export * from "./GaussianBlurMaterial.js";
 export * from "./KawaseBlurMaterial.js";
-export * from "./LuminanceMaterial.js";
+export * from "./LuminanceHighPassMaterial.js";
 export * from "./MaskMaterial.js";
 export * from "./SkyBoxMaterial.js";
 export * from "./SMAAEdgeDetectionMaterial.js";

src/materials/shaders/luminance-high-pass.frag

@@ -0,0 +1,18 @@
+#include <common>
+#include <pp_default_output_pars_fragment>
+#include <pp_input_buffer_pars_fragment>
+
+uniform float threshold;
+uniform float smoothing;
+
+in vec2 vUv;
+
+void main() {
+
+	vec4 texel = texture(inputBuffer, vUv);
+	float l = luminance(texel.rgb);
+	float mask = smoothstep(threshold, threshold + smoothing, l);
+
+	out_Color = texel * mask;
+
+}

src/passes/LuminancePass.ts

@@ -1,15 +1,15 @@
 import { WebGLRenderTarget } from "three";
 import { TextureResource } from "../core/io/TextureResource.js";
 import { Pass } from "../core/Pass.js";
-import { LuminanceMaterial } from "../materials/LuminanceMaterial.js";
+import { LuminanceHighPassMaterial } from "../materials/LuminanceHighPassMaterial.js";
 
 /**
  * A luminance pass.
  *
  * @category Passes
  */
 
-export class LuminancePass extends Pass<LuminanceMaterial> {
+export class LuminancePass extends Pass<LuminanceHighPassMaterial> {
 
 	/**
 	 * Identifies the luminance output buffer.
@@ -26,7 +26,7 @@ export class LuminancePass extends Pass<LuminanceMaterial> {
 		super("LuminancePass");
 
 		this.output.setBuffer(LuminancePass.BUFFER_LUMINANCE, this.createFramebuffer());
-		this.fullscreenMaterial = new LuminanceMaterial();
+		this.fullscreenMaterial = new LuminanceHighPassMaterial();
 
 	}