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

Questions
,
1

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
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?

2

Hi!

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

3

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>
4

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

5

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().