Postprocessing masking. Applying post processing on separate objects

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>
1 Like