FilmPass: Simplify implementation. (#26573)

* FilmPass: Simplify implementation.

* Examples: Update screenshots.

* E2E: Add points example to exception list.

examples/jsm/postprocessing/FilmPass.js

@@ -7,7 +7,7 @@ import { FilmShader } from '../shaders/FilmShader.js';
 
 class FilmPass extends Pass {
 
-	constructor( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
+	constructor( intensity = 0.5, grayscale = false ) {
 
 		super();
 
@@ -24,10 +24,8 @@ class FilmPass extends Pass {
 
 		} );
 
-		if ( grayscale !== undefined )	this.uniforms.grayscale.value = grayscale;
-		if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
-		if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
-		if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
+		this.uniforms.intensity.value = intensity; // (0 = no effect, 1 = full effect)
+		this.uniforms.grayscale.value = grayscale;
 
 		this.fsQuad = new FullScreenQuad( this.material );
 

examples/jsm/shaders/FilmShader.js

@@ -1,23 +1,3 @@
-/**
- * Film grain & scanlines shader
- *
- * - ported from HLSL to WebGL / GLSL
- * https://web.archive.org/web/20210226214859/http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
- *
- * Screen Space Static Postprocessor
- *
- * Produces an analogue noise overlay similar to a film grain / TV static
- *
- * Original implementation and noise algorithm
- * Pat 'Hawthorne' Shearon
- *
- * Optimized scanlines + noise version with intensity scaling
- * Georg 'Leviathan' Steinrohder
- *
- * This version is provided under a Creative Commons Attribution 3.0 License
- * http://creativecommons.org/licenses/by/3.0/
- */
-
 const FilmShader = {
 
 	name: 'FilmShader',
@@ -26,10 +6,8 @@ const FilmShader = {
 
 		'tDiffuse': { value: null },
 		'time': { value: 0.0 },
-		'nIntensity': { value: 0.5 },
-		'sIntensity': { value: 0.05 },
-		'sCount': { value: 4096 },
-		'grayscale': { value: 1 }
+		'intensity': { value: 0.5 },
+		'grayscale': { value: false }
 
 	},
 
@@ -48,52 +26,31 @@ const FilmShader = {
 
 		#include <common>
 
-		// control parameter
-		uniform float time;
-
+		uniform float intensity;
 		uniform bool grayscale;
-
-		// noise effect intensity value (0 = no effect, 1 = full effect)
-		uniform float nIntensity;
-
-		// scanlines effect intensity value (0 = no effect, 1 = full effect)
-		uniform float sIntensity;
-
-		// scanlines effect count value (0 = no effect, 4096 = full effect)
-		uniform float sCount;
+		uniform float time;
 
 		uniform sampler2D tDiffuse;
 
 		varying vec2 vUv;
 
 		void main() {
 
-		// sample the source
-			vec4 cTextureScreen = texture2D( tDiffuse, vUv );
-
-		// make some noise
-			float dx = rand( vUv + time );
-
-		// add noise
-			vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx, 0.0, 1.0 );
+			vec4 base = texture2D( tDiffuse, vUv );
 
-		// get us a sine and cosine
-			vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );
+			float noise = rand( vUv + time );
 
-		// add scanlines
-			cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;
+			vec3 color = base.rgb + base.rgb * clamp( 0.1 + noise, 0.0, 1.0 );
 
-		// interpolate between source and result by intensity
-			cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );
+			color = mix( base.rgb, color, intensity );
 
-		// convert to grayscale if desired
-			if( grayscale ) {
+			if ( grayscale ) {
 
-				cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
+				color = vec3( luminance( color ) ); // assuming linear-srgb
 
 			}
 
-			gl_FragColor =  vec4( cResult, cTextureScreen.a );
+			gl_FragColor = vec4( color, base.a );
 
 		}`,
 

examples/misc_controls_fly.html

@@ -227,7 +227,7 @@
 				// postprocessing
 
 				const renderModel = new RenderPass( scene, camera );
-				const effectFilm = new FilmPass( 0.35, 0.75, 2048, false );
+				const effectFilm = new FilmPass( 0.35 );
 				const outputPass = new OutputPass();
 
 				composer = new EffectComposer( renderer );

examples/webgl_points_dynamic.html

@@ -115,7 +115,7 @@
 
 				const renderModel = new RenderPass( scene, camera );
 				const effectBloom = new BloomPass( 0.75 );
-				const effectFilm = new FilmPass( 0.5, 0.5, 1448, false );
+				const effectFilm = new FilmPass();
 
 				effectFocus = new ShaderPass( FocusShader );
 

examples/webgl_postprocessing_advanced.html

@@ -161,8 +161,8 @@
 				effectVignette.uniforms[ 'darkness' ].value = 1.6;
 
 				const effectBloom = new BloomPass( 0.5 );
-				const effectFilm = new FilmPass( 0.35, 0.025, 648, false );
-				const effectFilmBW = new FilmPass( 0.35, 0.5, 2048, true );
+				const effectFilm = new FilmPass( 0.35 );
+				const effectFilmBW = new FilmPass( 0.35, true );
 				const effectDotScreen = new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 );
 
 				const effectHBlur = new ShaderPass( HorizontalBlurShader );

examples/webgl_shader_lava.html

@@ -93,7 +93,6 @@
 
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-			import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
 			import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
 			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
@@ -161,14 +160,12 @@
 
 				const renderModel = new RenderPass( scene, camera );
 				const effectBloom = new BloomPass( 1.25 );
-				const effectFilm = new FilmPass( 0.35, 0.95, 2048, false );
 				const outputPass = new OutputPass();
 
 				composer = new EffectComposer( renderer );
 
 				composer.addPass( renderModel );
 				composer.addPass( effectBloom );
-				composer.addPass( effectFilm );
 				composer.addPass( outputPass );
 
 				//

test/e2e/puppeteer.js

@@ -99,6 +99,7 @@ const exceptionList = [
 	'webgl_test_memory2',
 	'webgl_tiled_forward',
 	'webgl2_volume_instancing',
+	'webgl_points_dynamic',
 
 	// TODO: implement determinism for setTimeout and setInterval
 	// could it fix some examples from above?