# Postprocessing masking. Applying post processing on separate objects

**URL:** https://discourse.threejs.org/t/postprocessing-masking-applying-post-processing-on-separate-objects/11496
**Category:** Questions
**Tags:** geometry, shaders, masking
**Created:** [December 9, 2019, 10:19pm UTC](https://discourse.threejs.org/t/postprocessing-masking-applying-post-processing-on-separate-objects/11496 "2019-12-09T22:19:23Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![kanistra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanistra/32/26750_2.png) [@kanistra](https://discourse.threejs.org/u/kanistra)
#### Post date: [December 9, 2019, 10:19pm UTC](https://discourse.threejs.org/t/postprocessing-masking-applying-post-processing-on-separate-objects/11496/1 "2019-12-09T22:19:23Z")

</div>

Hello, this is my first question on this board and i am learning vanilla js vs three js at the same time, so i apologies for newbie questions.

I am trying to apply postprocessing selectively.

I have two scenes - cubes and shadow. I want to apply bloom postprocessing only on shadow scene and then on the top of everything apply film pass.

Unfortunately no errors in console and i only see white blank screen.

Would greatly appreciate if someone can point me to the right direction.

Here is my code:

 0 - Blueprints body { margin: 0;height: 100vh;background-color: white; } canvas { display: block;} #c {background-color: white;} nav {position: absolute;right: 10%;top:10%;} nav a {font-size:25px;;display: block;text-decoration: none;color:black;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin:5% 0} 

```
</head>
<body>

    <canvas id="c"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script> 

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

<script src="js/ClearPass.js"></script>   
<script src="js/MaskPass.js"></script>   

    <script type="module">
    

            import {BloomPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/postprocessing/BloomPass.js';
            import {FilmPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/postprocessing/FilmPass.js';

            // variables
            
            let scene, camera, renderer, canvas, mesh;

            let init = function() {

                // create the scene
                let shadowscene = new THREE.Scene();
                let cubescene = new THREE.Scene();

                // create an locate the camera
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
                camera.position.z = 8;
                camera.position.y = 0;
                camera.position.x = 1;

        
                // responsive adjustments
    	    	window.addEventListener('resize', () =>{
    			renderer.setSize( window.innerWidth, window.innerHeight );
    			camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();   

		})

                // create the ground plane
                let planeGeometry = new THREE.PlaneGeometry(60, 40, 120, 120);
                let planeMaterial = new THREE.ShadowMaterial();

                   

                    

                        let plane = new THREE.Mesh(planeGeometry, planeMaterial);
                        plane.receiveShadow = true;
                        plane.rotation.x = -0.5 * Math.PI;
                        plane.position.x = 1;
                        plane.position.y = -3;
                        plane.position.z = -10;   
                        shadowscene.add(plane);

                        //cubescene.add(plane);
                        
                

                
                        // Geometry Globals

                        const boxWidth = 1.5;
                        const boxHeight = 1.5;
                        const boxDepth = 1.5;
                        const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

                        // Box
                        const material = new THREE.MeshPhongMaterial({color:0x44aa88});
                        const cube = new THREE.Mesh(geometry, material);
                        cubescene.add(cube);
                        cube.castShadow = false; 
                        cube.position.x = -3;
                        cube.position.y = .2;
                        cube.position.z = 0;
                        

                        // Box for casting shadow on the plane only
                        const materialTransparent = new THREE.MeshPhongMaterial({color:0x44aa88, opacity: 0.001}); // material opacity set to low, so we see only shadow on the plane
                        const cubeShadowOnly = new THREE.Mesh(geometry, materialTransparent);
                        shadowscene.add(cubeShadowOnly);
                        cubeShadowOnly.castShadow = true; 
                        cubeShadowOnly.position.x = -3;
                        cubeShadowOnly.position.y = .2;
                        cubeShadowOnly.position.z = 0;
                        

                // light parameters

                const color = 0xFFFFFF;
                const intensity = 1;

                // light Shadows Only

                const light = new THREE.DirectionalLight(color, intensity);
                light.castShadow = true;
                light.position.set(0, 10, 0);
                light.target.position.set(-4, 0, -4);
                light.shadow.camera.near = 0.5;       
                light.shadow.camera.far = 20;
                light.shadow.camera.left = -100;
                light.shadow.camera.bottom = -100;
                light.shadow.camera.right = 100;
                light.shadow.camera.top = 100;
                light.shadow.camera.zoom = 1;
                shadowscene.add(light);
                shadowscene.add(light.target);   

                 // light Geometry Only

                const lightGeometryOnly = new THREE.DirectionalLight(color, intensity);
                lightGeometryOnly.castShadow = false;
                lightGeometryOnly.position.set(0, 10, 0);
                lightGeometryOnly.target.position.set(-4, 0, -4);
                lightGeometryOnly.shadow.camera.near = 0.5;       
                lightGeometryOnly.shadow.camera.far = 20;
                lightGeometryOnly.shadow.camera.left = -100;
                lightGeometryOnly.shadow.camera.bottom = -100;
                lightGeometryOnly.shadow.camera.right = 100;
                lightGeometryOnly.shadow.camera.top = 100;
                lightGeometryOnly.shadow.camera.zoom = 1;
                cubescene.add(lightGeometryOnly);
                cubescene.add(lightGeometryOnly.target);   
                
          
                
                // create the renderer              
                canvas = document.querySelector('#c');
                renderer = new THREE.WebGLRenderer({canvas,antialias:true, alpha: true});
                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer.shadowMap.enabled = true;
                renderer.shadowMap.type = THREE.PCFSoftShadowMap; 

                                // setup passes. First the main renderpasses. Note that
                                // only the bgRenderpass clears the screen.
                               
                                var shadowscenePass = new THREE.RenderPass(shadowscene, camera);
                                shadowscenePass.clear = false;
                                var cubescenePass = new THREE.RenderPass(cubescene, camera);
                                cubescenePass.clear = false;

                                // setup the mask
                                var clearMask = new THREE.ClearMaskPass();
                                var shadowsceneMask = new THREE.MaskPass(shadowscene, camera);
                                var cubesceneMask = new THREE.MaskPass(cubescene, camera);

                                // setup some effects to apply

                               let bloomPass = new BloomPass(
                                    1, // strength
                                    25, // kernel size
                                    4, // sigma ?
                                    256, // blur render target resolution
                            );

                                            let filmPass = new FilmPass(
                                    0.35, // noise intensity
                                    0.025, // scanline intensity
                                    648, // scanline count
                                    false, // grayscale
                           );

                                var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
                                effectCopy.renderToScreen = true;
                                
                                var composer = new THREE.EffectComposer(renderer);
                                composer.renderTarget1.stencilBuffer = true;
                                composer.renderTarget2.stencilBuffer = true;
                        
                                
                                composer.addPass(cubescenePass);
                                composer.addPass(cubesceneMask);
                                composer.addPass(filmPass);
                                composer.addPass(clearMask);
                                composer.addPass(shadowscenePass);
                                composer.addPass(shadowsceneMask);
                                composer.addPass(bloomPass);
                                composer.addPass(clearMask);
                                composer.addPass(effectCopy);

                function render(time) {

                

                    cube.rotation.x += 0.01;
                    cubeShadowOnly.rotation.x += 0.01;
                  
                    requestAnimationFrame(render);
                       };

            requestAnimationFrame(render);
       
               
        }
            ///////////////////////////////////////////////
            init();
           
        </script>

```
