Home/ Questions/Q 8836589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T09:31:51+00:00

I want to start doing some postprocessing on my renders with the EffectComposer but

  • 0

I want to start doing some postprocessing on my renders with the EffectComposer but I can’t get the most basic setup to render to the screen. It just stays blank. I must be looking over something. Does anybody have an idea?

<!doctype html>
<html>
  <head>
    <title>game</title>
    <style type="text/css">
      html, body {        
        margin: 0px;
        width: 100%;
        height: 100%;
      }

      canvas {
        display: block;
      }
    </style>    
  </head>
  <body>
    <canvas id="viewport"></canvas>
    <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="CopyShader.js"></script>
    <script type="text/javascript" src="ShaderPass.js"></script>
    <script type="text/javascript" src="EffectComposer.js"></script>
    <script type="text/javascript" src="RenderPass.js"></script>
    <script type="text/javascript" src="MaskPass.js"></script>
    <script type="text/javascript">
      var width = document.body.clientWidth;
      var height = document.body.clientHeight;      
      var canvas = document.querySelector('#viewport');
      var renderer = new THREE.WebGLRenderer({canvas: canvas});
      renderer.setSize(width, height);

      var scene = new THREE.Scene();

      var cube = new THREE.Mesh(
        new THREE.CubeGeometry(30, 30, 30), 
        new THREE.MeshPhongMaterial({color: 0xFF0000}));
      scene.add(cube);

      var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
      camera.position = new THREE.Vector3(60, 60, 60);
      camera.lookAt(cube.position);
      camera.updateMatrix();
      scene.add(camera);      

      var pointLight = new THREE.PointLight(0xFFFFFF);
      pointLight.position = new THREE.Vector3(100, 80, 20);
      scene.add(pointLight);

      var renderPass = new THREE.RenderPass(scene, camera);
      renderPass.renderToScreen = true;      
      var composer = new THREE.EffectComposer(renderer);
      composer.addPass(renderPass);
      renderer.clear();
      composer.render();

      //renderer.render(scene, camera);
    </script>
  </body>
</html>

If I uncomment the last line I get something on the screen.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, EffectComposer is not part of the library — it’s part of the examples. So it’s not officially supported.

    So yes, you have to “know how it’s working behind the hood.”

    You can fix your problem by adding an extra CopyPass like so:

    var renderPass = new THREE.RenderPass( scene, camera );

var copyPass = new THREE.ShaderPass( THREE.CopyShader );
copyPass.renderToScreen = true;

var composer = new THREE.EffectComposer( renderer );
composer.addPass( renderPass );
composer.addPass( copyPass );

composer.render( 0.05 );
    • 0