Processing pixelShader doesn't work

Questions
, ,
1

Hello everybody,

I tried to add the PixelShader to my code but it seem’s to didn’t work. I add the script to my code and the shader to my js folder. I have no error. I paste my code juste here :

Interactive Geometry body { margin: 0; } canvas { width: 100%; height: 100% } 
	<script>
           
        
          window.addEventListener('resize', function(){

var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();

});

          var params = {
			exposure: 10,
			bloomStrength: 10,
			bloomThreshold: 0.1,
			bloomRadius: 1,
			pixelSize: 15,
			
		};

        
           
          
          
       
           const scene = new THREE.Scene();
           const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

           const renderer = new THREE.WebGLRenderer();
           renderer.setSize( window.innerWidth, window.innerHeight );
           document.body.appendChild( renderer.domElement );	


           var loader = new THREE.TextureLoader();
			var texture = loader.load( 'textures/point.png' );
			group = new THREE.Group();
			scene.add( group );

            
          // points

	        var vertices = new THREE.SphereGeometry(10,2,2).vertices;
			for ( var i = 0; i < vertices.length; i ++ ) {
				//vertices[ i ].add( randomPoint().multiplyScalar( 2 ) ); // wiggle the points
			}



            var pointsMaterial = new THREE.PointsMaterial( {
				color: 0xFFFFFF,
				map: texture,
				size: 0.2,
				alphaTest: 0.5
			} );
            
            var pointsGeometry = new THREE.BufferGeometry().setFromPoints( vertices );
			var points = new THREE.Points( pointsGeometry, pointsMaterial );
			group.add( points );


			

           // geometry 

           const geometry = new THREE.SphereGeometry(8, 1, 1)	
           const material = new THREE.MeshNormalMaterial({wireframe : true})
           const sphere = new THREE.Mesh(geometry, material)
           scene.add(sphere)

           scene.add( new THREE.AmbientLight( 0x404040 ) );
           

           const domEvents = new THREEx.DomEvents(camera, renderer.domElement)
           let sphereCliked = false
           domEvents.addEventListener(sphere, 'click', event => {
            if(!sphereCliked){

             material.wireframe = false
             sphereCliked = true
            } else{
            	material.wireframe = true
            	sphereClicked = false
            }
           })

                   
          // COMPOSER

          var composer = new THREE.EffectComposer(renderer);

          //Passes
           var renderPass = new THREE.RenderPass(scene, camera);
           composer.addPass(renderPass);
           renderPass.renderToScreen = true;

           var pass1 = new THREE.UnrealBloomPass();
           pass1.threshold = params.bloomThreshold;
		   pass1.strength = params.bloomStrength;
		   pass1.radius = params.bloomRadius;
           composer.addPass(pass1);
           pass1.renderToScreen = true;
  
           var pass2 = new THREE.GlitchPass(1);  
           composer.addPass(pass2);
           pass2.renderToScreen = true; 

           var pass3 = new THREE.AfterimagePass(0.9, 0.1);
           composer.addPass(pass3);
           pass3.renderToScreen = true;

           var pass4 = new THREE.ShaderPass(THREE.PixelShader);
           pass4.uniforms[ "resolution" ].value = new THREE.Vector2( window.innerWidth, window.innerHeight );
		   pass4.uniforms[ "resolution" ].value.multiplyScalar( window.devicePixelRatio );
           composer.addPass(pass4); 
           pass4.rendertoScreen = true;
           
          
		  
			params = {
				pixelSize: 16,
				postprocessing: true
			};

		   
           

        

          


           


           camera.position.z = 25

           const animate = () => {
           	 requestAnimationFrame(animate)
            
              group.rotation.x += 0.05
             group.rotation.y += 0.05
             sphere.rotation.x += 0.05
    
             


            
           //	 renderer.render(scene, camera);
              composer.render();	


           }
           
           controls = new THREE.OrbitControls(camera, renderer.domElement);
           controls.minDistance = 25
           controls.maxDistance = 25
           controls.enablePan = false
           controls.enableKeys = false
           animate()



	</script>
</body>