# Editor: How to add post-processing to published app?

**URL:** <https://discourse.threejs.org/t/editor-how-to-add-post-processing-to-published-app/2293>\
**Category:** Questions\
**Tags:** post-processing, editor\
**Created:** [April 1, 2018, 2:32pm UTC](https://discourse.threejs.org/t/editor-how-to-add-post-processing-to-published-app/2293 "2018-04-01T14:32:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Norbertino](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@Norbertino](https://discourse.threejs.org/u/Norbertino)\
**Post date:** [April 1, 2018, 2:32pm UTC](https://discourse.threejs.org/t/editor-how-to-add-post-processing-to-published-app/2293/1 "2018-04-01T14:32:01Z")

</div>

I got published data from editor and want to use one of the effects composer from three.js shaders repository like BokehShader.js with depth of field to achieve something similar to this example [http://alteredqualia.com/xg/examples/hannibal\_draco.html](http://alteredqualia.com/xg/examples/hannibal_draco.html)  
When I put the code of composer and passes into index.html nothing changes. Whats the correct way to achieve this effect after publishing from editor?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 1, 2018, 2:50pm UTC](https://discourse.threejs.org/t/editor-how-to-add-post-processing-to-published-app/2293/2 "2018-04-01T14:50:49Z")

</div>

Hi!

> [@Norbertino](#):
>
> When I put the code of composer and passes into index.html nothing changes.

This phrase explains nothing. Could you provide a live code example of how and what you’ve tried?

---

<div class="post-metadata">

**Author:** ![Norbertino](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@Norbertino](https://discourse.threejs.org/u/Norbertino)\
**Post date:** [April 1, 2018, 4:28pm UTC](https://discourse.threejs.org/t/editor-how-to-add-post-processing-to-published-app/2293/3 "2018-04-01T16:28:18Z")

</div>

Hi, last time I tried this (body of an html)

```
	<script src="js/three.min.js"></script>
	<script src="js/BokehShader.js"></script>

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

//<script src="js/SepiaShader.js"></script>
//<script src="js/DigitalGlitch.js"></script>
//<script src="js/GlitchPass.js"></script>
	<script src="js/app.js"></script>
	
	<script>

		var loader = new THREE.FileLoader();
		loader.load( 'app.json', function ( text ) {

			var player = new APP.Player();
			player.load( JSON.parse( text ) );
			player.setSize( window.innerWidth, window.innerHeight );
			player.play();

			document.body.appendChild( player.dom );

			window.addEventListener( 'resize', function () {
				player.setSize( window.innerWidth, window.innerHeight );
		
	} );
	} );
	
            function initPostprocessing() {
			var renderPass = new THREE.RenderPass( scene, camera );

			var bokehPass = new THREE.BokehPass( scene, camera, {
				focus: 2.0,
				aperture:	0.025,
				maxblur:	2.0,

				width: width,
				height: height
			} );

			bokehPass.renderToScreen = true;

			var composer = new THREE.EffectComposer( renderer );

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

			postprocessing.composer = composer;
			postprocessing.bokeh = bokehPass;
                            }

		function render() {			

           //postprocessing.renderer.autoClearColor = true;
           //postprocessing.composer.reset();
           //postprocessing.composer.render( scene, camera );

          //postprocessing.composer.toScreen();

        //postprocessing.renderer.clear(); 
          postprocessing.composer.render( 0.2 );		
          }
</script>
</body>
```

---

<div class="post-metadata">

**Author:** ![Norbertino](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@Norbertino](https://discourse.threejs.org/u/Norbertino)\
**Post date:** [April 3, 2018, 8:03am UTC](https://discourse.threejs.org/t/editor-how-to-add-post-processing-to-published-app/2293/4 "2018-04-03T08:03:30Z")

</div>

For example you got simple geometry like box published from editor and want to use some basic effects like bloom or dot screen from

> **[mrdoob/three.js](https://github.com/mrdoob/three.js/tree/dev/examples/js/shaders)**
>
> JavaScript 3D library. Contribute to mrdoob/three.js development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 3, 2018, 5:27pm UTC](https://discourse.threejs.org/t/editor-how-to-add-post-processing-to-published-app/2293/5 "2018-04-03T17:27:39Z")

</div>

It does not work if you change `index.html`. Please open the `app.js` file in the `js` directory and apply our changes there. I guess you have to change at least the the `animate()` function and `Player.load()`.