JSM: Added module and TS file for BokehPass.

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

@@ -160,6 +160,7 @@
 					<ul>
 						<li>AfterimagePass</li>
 						<li>BloomPass</li>
+						<li>BokehPass</li>
 						<li>ClearPass</li>
 						<li>CubeTexturePass</li>
 						<li>DotScreenPass</li>

examples/js/postprocessing/BokehPass.js

@@ -2,7 +2,6 @@
  * Depth-of-field post-process with bokeh shader
  */
 
-
 THREE.BokehPass = function ( scene, camera, params ) {
 
 	THREE.Pass.call( this );
@@ -69,7 +68,6 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	this.fsQuad = new THREE.Pass.FullScreenQuad( this.materialBokeh );
 
 	this.oldClearColor = new THREE.Color();
-	this.oldClearAlpha = 1;
 
 };
 
@@ -77,14 +75,14 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 	constructor: THREE.BokehPass,
 
-	render: function ( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
+	render: function ( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
 
 		// Render depth into texture
 
 		this.scene.overrideMaterial = this.materialDepth;
 
 		this.oldClearColor.copy( renderer.getClearColor() );
-		this.oldClearAlpha = renderer.getClearAlpha();
+		var oldClearAlpha = renderer.getClearAlpha();
 		var oldAutoClear = renderer.autoClear;
 		renderer.autoClear = false;
 
@@ -115,8 +113,8 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 		this.scene.overrideMaterial = null;
 		renderer.setClearColor( this.oldClearColor );
-		renderer.setClearAlpha( this.oldClearAlpha );
-		renderer.autoClear = this.oldAutoClear;
+		renderer.setClearAlpha( oldClearAlpha );
+		renderer.autoClear = oldAutoClear;
 
 	}
 

examples/jsm/postprocessing/BokehPass.d.ts

@@ -0,0 +1,32 @@
+import {
+  Scene,
+  Camera,
+  ShaderMaterial,
+  WebGLRenderTarget,
+  MeshDepthMaterial,
+  Color
+} from '../../../src/Three';
+
+import { Pass } from './Pass';
+
+export interface BokehPassParamters {
+  focus?: number;
+  aspect?: number;
+  aperture?: number;
+  maxblur?: number;
+  width?: number;
+  height?: number;
+}
+
+export class BokehPass extends Pass {
+  constructor(scene: Scene, camera: Camera, params: BokehPassParamters);
+  scene: Scene;
+  camera: Camera;
+  renderTargetColor: WebGLRenderTarget;
+  renderTargetDepth: WebGLRenderTarget;
+  materialDepth: MeshDepthMaterial;
+  materialBokeh: ShaderMaterial;
+  uniforms: object;
+  fsQuad: object;
+  oldClearColor: Color;
+}

examples/jsm/postprocessing/BokehPass.js

@@ -0,0 +1,137 @@
+/**
+ * Depth-of-field post-process with bokeh shader
+ */
+
+import {
+	Color,
+	LinearFilter,
+	MeshDepthMaterial,
+	NoBlending,
+	RGBADepthPacking,
+	RGBFormat,
+	ShaderMaterial,
+	UniformsUtils,
+	WebGLRenderTarget
+} from "../../../build/three.module.js";
+import { Pass } from "../postprocessing/Pass.js";
+import { BokehShader } from "../shaders/BokehShader.js";
+
+var BokehPass = function ( scene, camera, params ) {
+
+	Pass.call( this );
+
+	this.scene = scene;
+	this.camera = camera;
+
+	var focus = ( params.focus !== undefined ) ? params.focus : 1.0;
+	var aspect = ( params.aspect !== undefined ) ? params.aspect : camera.aspect;
+	var aperture = ( params.aperture !== undefined ) ? params.aperture : 0.025;
+	var maxblur = ( params.maxblur !== undefined ) ? params.maxblur : 1.0;
+
+	// render targets
+
+	var width = params.width || window.innerWidth || 1;
+	var height = params.height || window.innerHeight || 1;
+
+	this.renderTargetColor = new WebGLRenderTarget( width, height, {
+		minFilter: LinearFilter,
+		magFilter: LinearFilter,
+		format: RGBFormat
+	} );
+	this.renderTargetColor.texture.name = "BokehPass.color";
+
+	this.renderTargetDepth = this.renderTargetColor.clone();
+	this.renderTargetDepth.texture.name = "BokehPass.depth";
+
+	// depth material
+
+	this.materialDepth = new MeshDepthMaterial();
+	this.materialDepth.depthPacking = RGBADepthPacking;
+	this.materialDepth.blending = NoBlending;
+
+	// bokeh material
+
+	if ( BokehShader === undefined ) {
+
+		console.error( "BokehPass relies on BokehShader" );
+
+	}
+
+	var bokehShader = BokehShader;
+	var bokehUniforms = UniformsUtils.clone( bokehShader.uniforms );
+
+	bokehUniforms[ "tDepth" ].value = this.renderTargetDepth.texture;
+
+	bokehUniforms[ "focus" ].value = focus;
+	bokehUniforms[ "aspect" ].value = aspect;
+	bokehUniforms[ "aperture" ].value = aperture;
+	bokehUniforms[ "maxblur" ].value = maxblur;
+	bokehUniforms[ "nearClip" ].value = camera.near;
+	bokehUniforms[ "farClip" ].value = camera.far;
+
+	this.materialBokeh = new ShaderMaterial( {
+		defines: Object.assign( {}, bokehShader.defines ),
+		uniforms: bokehUniforms,
+		vertexShader: bokehShader.vertexShader,
+		fragmentShader: bokehShader.fragmentShader
+	} );
+
+	this.uniforms = bokehUniforms;
+	this.needsSwap = false;
+
+	this.fsQuad = new Pass.FullScreenQuad( this.materialBokeh );
+
+	this.oldClearColor = new Color();
+
+};
+
+BokehPass.prototype = Object.assign( Object.create( Pass.prototype ), {
+
+	constructor: BokehPass,
+
+	render: function ( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
+
+		// Render depth into texture
+
+		this.scene.overrideMaterial = this.materialDepth;
+
+		this.oldClearColor.copy( renderer.getClearColor() );
+		var oldClearAlpha = renderer.getClearAlpha();
+		var oldAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+
+		renderer.setClearColor( 0xffffff );
+		renderer.setClearAlpha( 1.0 );
+		renderer.setRenderTarget( this.renderTargetDepth );
+		renderer.clear();
+		renderer.render( this.scene, this.camera );
+
+		// Render bokeh composite
+
+		this.uniforms[ "tColor" ].value = readBuffer.texture;
+		this.uniforms[ "nearClip" ].value = this.camera.near;
+		this.uniforms[ "farClip" ].value = this.camera.far;
+
+		if ( this.renderToScreen ) {
+
+			renderer.setRenderTarget( null );
+			this.fsQuad.render( renderer );
+
+		} else {
+
+			renderer.setRenderTarget( writeBuffer );
+			renderer.clear();
+			this.fsQuad.render( renderer );
+
+		}
+
+		this.scene.overrideMaterial = null;
+		renderer.setClearColor( this.oldClearColor );
+		renderer.setClearAlpha( oldClearAlpha );
+		renderer.autoClear = oldAutoClear;
+
+	}
+
+} );
+
+export { BokehPass };

utils/modularize.js

@@ -69,6 +69,7 @@ var files = [
 
 	{ path: 'postprocessing/AfterimagePass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'AfterimageShader', path: 'shaders/AfterimageShader.js' } ], 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/BokehPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'BokehShader', path: 'shaders/BokehShader.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/ClearPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/CubeTexturePass.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: [] },