Skip to content

Commit f429f02

Browse files
author
Jay Weeks
committed
Refactor depth of field example to use EffectComposer
1 parent 7eac0a7 commit f429f02

File tree

1 file changed

+43
-45
lines changed

1 file changed

+43
-45
lines changed

‎examples/webgl_postprocessing_dof.html‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,17 @@
3333
</head>
3434

3535
<body>
36-
<script src="../build/three.min.js"></script>
36+
<script src="../build/three.js"></script>
3737

38+
<script src="js/shaders/CopyShader.js"></script>
3839
<script src="js/shaders/BokehShader.js"></script>
3940

41+
<script src="js/postprocessing/EffectComposer.js"></script>
42+
<script src="js/postprocessing/RenderPass.js"></script>
43+
<script src="js/postprocessing/ShaderPass.js"></script>
44+
<script src="js/postprocessing/MaskPass.js"></script>
45+
<script src="js/postprocessing/BokehPass.js"></script>
46+
4047
<script src="js/Detector.js"></script>
4148
<script src="js/libs/stats.min.js"></script>
4249

@@ -64,6 +71,7 @@
6471
var windowHalfX = window.innerWidth / 2;
6572
var windowHalfY = window.innerHeight / 2;
6673

74+
var width = window.innerWidth;
6775
var height = window.innerHeight - 300;
6876

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

79-
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / height, 1, 3000 );
87+
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 3000 );
8088
camera.position.z = 200;
8189

8290
scene = new THREE.Scene();
8391

8492
renderer = new THREE.WebGLRenderer( { antialias: false } );
85-
renderer.setSize( window.innerWidth, height );
93+
renderer.setSize( width, height );
8694
container.appendChild( renderer.domElement );
8795

8896
renderer.sortObjects = false;
@@ -177,6 +185,8 @@
177185
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
178186
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
179187

188+
window.addEventListener( 'resize', onWindowResize, false );
189+
180190
var effectController = {
181191

182192
focus: 1.0,
@@ -187,9 +197,9 @@
187197

188198
var matChanger = function( ) {
189199

190-
postprocessing.bokeh_uniforms[ "focus" ].value = effectController.focus;
191-
postprocessing.bokeh_uniforms[ "aperture" ].value = effectController.aperture;
192-
postprocessing.bokeh_uniforms[ "maxblur" ].value = effectController.maxblur;
200+
postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
201+
postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture;
202+
postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur;
193203

194204
};
195205

@@ -233,39 +243,43 @@
233243

234244
}
235245

236-
function initPostprocessing() {
246+
function onWindowResize() {
237247

238-
postprocessing.scene = new THREE.Scene();
248+
windowHalfX = window.innerWidth / 2;
249+
windowHalfY = window.innerHeight / 2;
239250

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

243-
postprocessing.scene.add( postprocessing.camera );
254+
camera.aspect = width / height;
255+
camera.updateProjectionMatrix();
244256

245-
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
246-
postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
247-
postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
257+
renderer.setSize( width, height );
258+
postprocessing.composer.setSize( width, height );
259+
260+
}
248261

249-
var bokeh_shader = THREE.BokehShader;
262+
function initPostprocessing() {
263+
var renderPass = new THREE.RenderPass( scene, camera );
250264

251-
postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
265+
var bokehPass = new THREE.BokehPass( scene, camera, {
266+
focus: 1.0,
267+
aperture: 0.025,
268+
maxblur: 1.0,
252269

253-
postprocessing.bokeh_uniforms[ "tColor" ].value = postprocessing.rtTextureColor;
254-
postprocessing.bokeh_uniforms[ "tDepth" ].value = postprocessing.rtTextureDepth;
255-
postprocessing.bokeh_uniforms[ "focus" ].value = 1.1;
256-
postprocessing.bokeh_uniforms[ "aspect" ].value = window.innerWidth / height;
270+
width: width,
271+
height: height
272+
} );
257273

258-
postprocessing.materialBokeh = new THREE.ShaderMaterial( {
274+
bokehPass.renderToScreen = true;
259275

260-
uniforms: postprocessing.bokeh_uniforms,
261-
vertexShader: bokeh_shader.vertexShader,
262-
fragmentShader: bokeh_shader.fragmentShader
276+
var composer = new THREE.EffectComposer( renderer );
263277

264-
} );
278+
composer.addPass( renderPass );
279+
composer.addPass( bokehPass );
265280

266-
postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
267-
postprocessing.quad.position.z = - 500;
268-
postprocessing.scene.add( postprocessing.quad );
281+
postprocessing.composer = composer;
282+
postprocessing.bokeh = bokehPass;
269283

270284
}
271285

@@ -300,22 +314,7 @@
300314

301315
if ( postprocessing.enabled ) {
302316

303-
renderer.clear();
304-
305-
// Render scene into texture
306-
307-
scene.overrideMaterial = null;
308-
renderer.render( scene, camera, postprocessing.rtTextureColor, true );
309-
310-
// Render depth into texture
311-
312-
scene.overrideMaterial = material_depth;
313-
renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
314-
315-
// Render bokeh composite
316-
317-
renderer.render( postprocessing.scene, postprocessing.camera );
318-
317+
postprocessing.composer.render( 0.1 );
319318

320319
} else {
321320

@@ -326,7 +325,6 @@
326325

327326
}
328327

329-
330328
</script>
331329
</body>
332330
</html>

0 commit comments

Comments
 (0)