Skip to content

Commit

Permalink
Merge branch 'post-bokeh-pass' of https://github.com/jpweeks/three.js …
Browse files Browse the repository at this point in the history 
…into dev
  • Loading branch information
@mrdoob
mrdoob committed Dec 11, 2013
2 parents c135af2 + f429f02 commit 1228df6
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 45 deletions.
96 changes: 96 additions & 0 deletions examples/js/postprocessing/BokehPass.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/**
* Depth-of-field post-process with bokeh shader
*/


THREE.BokehPass = function ( scene, camera, params ) {

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 THREE.WebGLRenderTarget( width, height, {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat
} );

this.renderTargetDepth = this.renderTargetColor.clone();

// depth material

this.materialDepth = new THREE.MeshDepthMaterial();

// bokeh material

if ( THREE.BokehShader === undefined ) {
console.error( "THREE.BokehPass relies on THREE.BokehShader" );
}

var bokehShader = THREE.BokehShader;
var bokehUniforms = THREE.UniformsUtils.clone( bokehShader.uniforms );

bokehUniforms[ "tDepth" ].value = this.renderTargetDepth;

bokehUniforms[ "focus" ].value = focus;
bokehUniforms[ "aspect" ].value = aspect;
bokehUniforms[ "aperture" ].value = aperture;
bokehUniforms[ "maxblur" ].value = maxblur;

this.materialBokeh = new THREE.ShaderMaterial({
uniforms: bokehUniforms,
vertexShader: bokehShader.vertexShader,
fragmentShader: bokehShader.fragmentShader
});

this.uniforms = bokehUniforms;
this.enabled = true;
this.needsSwap = false;
this.renderToScreen = false;
this.clear = false;

};

THREE.BokehPass.prototype = {

render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

var composer = THREE.EffectComposer;

composer.quad.material = this.materialBokeh;

// Render depth into texture

this.scene.overrideMaterial = this.materialDepth;

renderer.render( this.scene, this.camera, this.renderTargetDepth, true );

// Render bokeh composite

this.uniforms[ "tColor" ].value = readBuffer;

if ( this.renderToScreen ) {

renderer.render( composer.scene, composer.camera );

} else {

renderer.render( composer.scene, composer.camera, writeBuffer, this.clear );

}

this.scene.overrideMaterial = null;

}

};

88 changes: 43 additions & 45 deletions examples/webgl_postprocessing_dof.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,17 @@
</head>

<body>
<script src="../build/three.min.js"></script>
<script src="../build/three.js"></script>

<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/BokehShader.js"></script>

<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/BokehPass.js"></script>

<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

Expand Down Expand Up @@ -64,6 +71,7 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var width = window.innerWidth;
var height = window.innerHeight - 300;

var postprocessing = { enabled : true };
Expand All @@ -76,13 +84,13 @@
container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / height, 1, 3000 );
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 3000 );
camera.position.z = 200;

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, height );
renderer.setSize( width, height );
container.appendChild( renderer.domElement );

renderer.sortObjects = false;
Expand Down Expand Up @@ -177,6 +185,8 @@
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );

window.addEventListener( 'resize', onWindowResize, false );

var effectController = {

focus: 1.0,
Expand All @@ -187,9 +197,9 @@

var matChanger = function( ) {

postprocessing.bokeh_uniforms[ "focus" ].value = effectController.focus;
postprocessing.bokeh_uniforms[ "aperture" ].value = effectController.aperture;
postprocessing.bokeh_uniforms[ "maxblur" ].value = effectController.maxblur;
postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture;
postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur;

};

Expand Down Expand Up @@ -233,39 +243,43 @@

}

function initPostprocessing() {
function onWindowResize() {

postprocessing.scene = new THREE.Scene();
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;

postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
postprocessing.camera.position.z = 100;
width = window.innerWidth;
height = window.innerHeight - 300;

postprocessing.scene.add( postprocessing.camera );
camera.aspect = width / height;
camera.updateProjectionMatrix();

var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
renderer.setSize( width, height );
postprocessing.composer.setSize( width, height );

}

var bokeh_shader = THREE.BokehShader;
function initPostprocessing() {
var renderPass = new THREE.RenderPass( scene, camera );

postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
var bokehPass = new THREE.BokehPass( scene, camera, {
focus: 1.0,
aperture: 0.025,
maxblur: 1.0,

postprocessing.bokeh_uniforms[ "tColor" ].value = postprocessing.rtTextureColor;
postprocessing.bokeh_uniforms[ "tDepth" ].value = postprocessing.rtTextureDepth;
postprocessing.bokeh_uniforms[ "focus" ].value = 1.1;
postprocessing.bokeh_uniforms[ "aspect" ].value = window.innerWidth / height;
width: width,
height: height
} );

postprocessing.materialBokeh = new THREE.ShaderMaterial( {
bokehPass.renderToScreen = true;

uniforms: postprocessing.bokeh_uniforms,
vertexShader: bokeh_shader.vertexShader,
fragmentShader: bokeh_shader.fragmentShader
var composer = new THREE.EffectComposer( renderer );

} );
composer.addPass( renderPass );
composer.addPass( bokehPass );

postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
postprocessing.quad.position.z = - 500;
postprocessing.scene.add( postprocessing.quad );
postprocessing.composer = composer;
postprocessing.bokeh = bokehPass;

}

Expand Down Expand Up @@ -300,22 +314,7 @@

if ( postprocessing.enabled ) {

renderer.clear();

// Render scene into texture

scene.overrideMaterial = null;
renderer.render( scene, camera, postprocessing.rtTextureColor, true );

// Render depth into texture

scene.overrideMaterial = material_depth;
renderer.render( scene, camera, postprocessing.rtTextureDepth, true );

// Render bokeh composite

renderer.render( postprocessing.scene, postprocessing.camera );

postprocessing.composer.render( 0.1 );

} else {

Expand All @@ -326,7 +325,6 @@

}


</script>
</body>
</html>

0 comments on commit 1228df6

Please sign in to comment.