diff --git a/docs/manual/en/introduction/Import-via-modules.html b/docs/manual/en/introduction/Import-via-modules.html
index e51bd70ad4a9da9d692a016eee7bafa789d06149..3298d207e33beb3190aec4aa87e1eb1b347d6aa5 100644
--- a/docs/manual/en/introduction/Import-via-modules.html
+++ b/docs/manual/en/introduction/Import-via-modules.html
@@ -160,6 +160,7 @@
- AfterimagePass
- BloomPass
+ - BokehPass
- ClearPass
- CubeTexturePass
- DotScreenPass
diff --git a/examples/js/postprocessing/BokehPass.js b/examples/js/postprocessing/BokehPass.js
index 6e1525b794ce41ff78e92f5273cb99d62ca6e383..ec4917a2ee6deae89e9aecc0f38894fa199d4130 100644
--- a/examples/js/postprocessing/BokehPass.js
+++ b/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;
}
diff --git a/examples/jsm/postprocessing/BokehPass.d.ts b/examples/jsm/postprocessing/BokehPass.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..197aa29a851e62709593d743343539a721cf512f
--- /dev/null
+++ b/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;
+}
diff --git a/examples/jsm/postprocessing/BokehPass.js b/examples/jsm/postprocessing/BokehPass.js
new file mode 100644
index 0000000000000000000000000000000000000000..34dd3f23788f30dd357fdf8ee1658a99b2907b8c
--- /dev/null
+++ b/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 };
diff --git a/utils/modularize.js b/utils/modularize.js
index 17c1ca87b0bc43ef6cd26fbe2653fc885437cdd2..a3d98b43f2ec6e6259c2d75662327524ee1ac703 100644
--- a/utils/modularize.js
+++ b/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: [] },