JSM: Added module and TS file for FilmPass, BloomPass and DotScreenPass.

docs/manual/en/introduction/Import-via-modules.html

@@ -158,8 +158,11 @@
 				</li>
 				<li>postprocessing
 					<ul>
+						<li>BloomPass</li>
 						<li>ClearPass</li>
+						<li>DotScreenPass</li>
 						<li>EffectComposer</li>
+						<li>FilmPass</li>
 						<li>MaskPass</li>
 						<li>RenderPass</li>
 						<li>ShaderPass</li>

examples/js/postprocessing/DotScreenPass.js

@@ -33,7 +33,7 @@ THREE.DotScreenPass.prototype = Object.assign( Object.create( THREE.Pass.prototy
 
 	constructor: THREE.DotScreenPass,
 
-	render: function ( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
+	render: function ( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 
 		this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.uniforms[ "tSize" ].value.set( readBuffer.width, readBuffer.height );

examples/js/postprocessing/FilmPass.js

@@ -34,7 +34,7 @@ THREE.FilmPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ),
 
 	constructor: THREE.FilmPass,
 
-	render: function ( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
+	render: function ( renderer, writeBuffer, readBuffer, deltaTime /*, maskActive */ ) {
 
 		this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.uniforms[ "time" ].value += deltaTime;

examples/jsm/postprocessing/BloomPass.d.ts

@@ -0,0 +1,17 @@
+import {
+  WebGLRenderTarget,
+  ShaderMaterial
+} from '../../../src/Three';
+
+import { Pass } from './Pass';
+
+export class BloomPass extends Pass {
+  constructor(strength?: number, kernelSize?: number, sigma?: number, resolution?: number);
+  renderTargetX: WebGLRenderTarget;
+  renderTargetY: WebGLRenderTarget;
+  copyUniforms: object;
+  materialCopy: ShaderMaterial;
+  convolutionUniforms: object;
+  materialConvolution: ShaderMaterial;
+  fsQuad: object;
+}

examples/jsm/postprocessing/BloomPass.js

@@ -0,0 +1,135 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+import {
+	AdditiveBlending,
+	LinearFilter,
+	RGBAFormat,
+	ShaderMaterial,
+	UniformsUtils,
+	Vector2,
+	WebGLRenderTarget
+} from "../../../build/three.module.js";
+import { Pass } from "../postprocessing/Pass.js";
+import { CopyShader } from "../shaders/CopyShader.js";
+import { ConvolutionShader } from "../shaders/ConvolutionShader.js";
+
+var BloomPass = function ( strength, kernelSize, sigma, resolution ) {
+
+	Pass.call( this );
+
+	strength = ( strength !== undefined ) ? strength : 1;
+	kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25;
+	sigma = ( sigma !== undefined ) ? sigma : 4.0;
+	resolution = ( resolution !== undefined ) ? resolution : 256;
+
+	// render targets
+
+	var pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat };
+
+	this.renderTargetX = new WebGLRenderTarget( resolution, resolution, pars );
+	this.renderTargetX.texture.name = "BloomPass.x";
+	this.renderTargetY = new WebGLRenderTarget( resolution, resolution, pars );
+	this.renderTargetY.texture.name = "BloomPass.y";
+
+	// copy material
+
+	if ( CopyShader === undefined )
+		console.error( "BloomPass relies on CopyShader" );
+
+	var copyShader = CopyShader;
+
+	this.copyUniforms = UniformsUtils.clone( copyShader.uniforms );
+
+	this.copyUniforms[ "opacity" ].value = strength;
+
+	this.materialCopy = new ShaderMaterial( {
+
+		uniforms: this.copyUniforms,
+		vertexShader: copyShader.vertexShader,
+		fragmentShader: copyShader.fragmentShader,
+		blending: AdditiveBlending,
+		transparent: true
+
+	} );
+
+	// convolution material
+
+	if ( ConvolutionShader === undefined )
+		console.error( "BloomPass relies on ConvolutionShader" );
+
+	var convolutionShader = ConvolutionShader;
+
+	this.convolutionUniforms = UniformsUtils.clone( convolutionShader.uniforms );
+
+	this.convolutionUniforms[ "uImageIncrement" ].value = BloomPass.blurX;
+	this.convolutionUniforms[ "cKernel" ].value = ConvolutionShader.buildKernel( sigma );
+
+	this.materialConvolution = new ShaderMaterial( {
+
+		uniforms: this.convolutionUniforms,
+		vertexShader: convolutionShader.vertexShader,
+		fragmentShader: convolutionShader.fragmentShader,
+		defines: {
+			"KERNEL_SIZE_FLOAT": kernelSize.toFixed( 1 ),
+			"KERNEL_SIZE_INT": kernelSize.toFixed( 0 )
+		}
+
+	} );
+
+	this.needsSwap = false;
+
+	this.fsQuad = new Pass.FullScreenQuad( null );
+
+};
+
+BloomPass.prototype = Object.assign( Object.create( Pass.prototype ), {
+
+	constructor: BloomPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
+
+		if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
+
+		// Render quad with blured scene into texture (convolution pass 1)
+
+		this.fsQuad.material = this.materialConvolution;
+
+		this.convolutionUniforms[ "tDiffuse" ].value = readBuffer.texture;
+		this.convolutionUniforms[ "uImageIncrement" ].value = BloomPass.blurX;
+
+		renderer.setRenderTarget( this.renderTargetX );
+		renderer.clear();
+		this.fsQuad.render( renderer );
+
+
+		// Render quad with blured scene into texture (convolution pass 2)
+
+		this.convolutionUniforms[ "tDiffuse" ].value = this.renderTargetX.texture;
+		this.convolutionUniforms[ "uImageIncrement" ].value = BloomPass.blurY;
+
+		renderer.setRenderTarget( this.renderTargetY );
+		renderer.clear();
+		this.fsQuad.render( renderer );
+
+		// Render original scene with superimposed blur to texture
+
+		this.fsQuad.material = this.materialCopy;
+
+		this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY.texture;
+
+		if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
+
+		renderer.setRenderTarget( readBuffer );
+		if ( this.clear ) renderer.clear();
+		this.fsQuad.render( renderer );
+
+	}
+
+} );
+
+BloomPass.blurX = new Vector2( 0.001953125, 0.0 );
+BloomPass.blurY = new Vector2( 0.0, 0.001953125 );
+
+export { BloomPass };

examples/jsm/postprocessing/DotScreenPass.d.ts

@@ -0,0 +1,13 @@
+import {
+  Vector2,
+  ShaderMaterial
+} from '../../../src/Three';
+
+import { Pass } from './Pass';
+
+export class DotScreenPass extends Pass {
+  constructor(center?: Vector2, angle?: number, scale?: number);
+  uniforms: object;
+  material: ShaderMaterial;
+  fsQuad: object;
+}

examples/jsm/postprocessing/DotScreenPass.js

@@ -0,0 +1,65 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+import {
+	ShaderMaterial,
+	UniformsUtils
+} from "../../../build/three.module.js";
+import { Pass } from "../postprocessing/Pass.js";
+import { DotScreenShader } from "../shaders/DotScreenShader.js";
+
+var DotScreenPass = function ( center, angle, scale ) {
+
+	Pass.call( this );
+
+	if ( DotScreenShader === undefined )
+		console.error( "DotScreenPass relies on DotScreenShader" );
+
+	var shader = DotScreenShader;
+
+	this.uniforms = UniformsUtils.clone( shader.uniforms );
+
+	if ( center !== undefined ) this.uniforms[ "center" ].value.copy( center );
+	if ( angle !== undefined ) this.uniforms[ "angle" ].value = angle;
+	if ( scale !== undefined ) this.uniforms[ "scale" ].value = scale;
+
+	this.material = new ShaderMaterial( {
+
+		uniforms: this.uniforms,
+		vertexShader: shader.vertexShader,
+		fragmentShader: shader.fragmentShader
+
+	} );
+
+	this.fsQuad = new Pass.FullScreenQuad( this.material );
+
+};
+
+DotScreenPass.prototype = Object.assign( Object.create( Pass.prototype ), {
+
+	constructor: DotScreenPass,
+
+	render: function ( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
+
+		this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
+		this.uniforms[ "tSize" ].value.set( readBuffer.width, readBuffer.height );
+
+		if ( this.renderToScreen ) {
+
+			renderer.setRenderTarget( null );
+			this.fsQuad.render( renderer );
+
+		} else {
+
+			renderer.setRenderTarget( writeBuffer );
+			if ( this.clear ) renderer.clear();
+			this.fsQuad.render( renderer );
+
+		}
+
+	}
+
+} );
+
+export { DotScreenPass };

examples/jsm/postprocessing/FilmPass.d.ts

@@ -0,0 +1,13 @@
+import {
+  Vector2,
+  ShaderMaterial
+} from '../../../src/Three';
+
+import { Pass } from './Pass';
+
+export class FilmPass extends Pass {
+  constructor(noiseIntensity?: number, scanlinesIntensity?: number, scanlinesCount?: number, grayscale?: number);
+  uniforms: object;
+  material: ShaderMaterial;
+  fsQuad: object;
+}

examples/jsm/postprocessing/FilmPass.js

@@ -0,0 +1,66 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+import {
+	ShaderMaterial,
+	UniformsUtils
+} from "../../../build/three.module.js";
+import { Pass } from "../postprocessing/Pass.js";
+import { FilmShader } from "../shaders/FilmShader.js";
+
+var FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
+
+	Pass.call( this );
+
+	if ( FilmShader === undefined )
+		console.error( "FilmPass relies on FilmShader" );
+
+	var shader = FilmShader;
+
+	this.uniforms = UniformsUtils.clone( shader.uniforms );
+
+	this.material = new ShaderMaterial( {
+
+		uniforms: this.uniforms,
+		vertexShader: shader.vertexShader,
+		fragmentShader: shader.fragmentShader
+
+	} );
+
+	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.fsQuad = new Pass.FullScreenQuad( this.material );
+
+};
+
+FilmPass.prototype = Object.assign( Object.create( Pass.prototype ), {
+
+	constructor: FilmPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, deltaTime /*, maskActive */ ) {
+
+		this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
+		this.uniforms[ "time" ].value += deltaTime;
+
+		if ( this.renderToScreen ) {
+
+			renderer.setRenderTarget( null );
+			this.fsQuad.render( renderer );
+
+		} else {
+
+			renderer.setRenderTarget( writeBuffer );
+			if ( this.clear ) renderer.clear();
+			this.fsQuad.render( renderer );
+
+		}
+
+	}
+
+} );
+
+export { FilmPass };

utils/modularize.js

@@ -67,8 +67,11 @@ var files = [
 	{ path: 'pmrem/PMREMCubeUVPacker.js', dependencies: [], ignoreList: [] },
 	{ path: 'pmrem/PMREMGenerator.js', dependencies: [], ignoreList: [] },
 
+	{ path: 'postprocessing/BloomPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'CopyShader', path: 'shaders/CopyShader.js' }, { name: 'ConvolutionShader', path: 'shaders/ConvolutionShader.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/ClearPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' } ], ignoreList: [] },
+	{ path: 'postprocessing/DotScreenPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'DotScreenShader', path: 'shaders/DotScreenShader.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/EffectComposer.js', dependencies: [ { name: 'CopyShader', path: 'shaders/CopyShader.js' }, { name: 'ShaderPass', path: 'postprocessing/ShaderPass.js' }, { name: 'MaskPass', path: 'postprocessing/MaskPass.js' }, { name: 'ClearMaskPass', path: 'postprocessing/MaskPass.js' } ], ignoreList: [] },
+	{ path: 'postprocessing/FilmPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'FilmShader', path: 'shaders/FilmShader.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/MaskPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/RenderPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/TexturePass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'CopyShader', path: 'shaders/CopyShader.js' } ], ignoreList: [] },