Can't get three.js EffectComposer to work

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.

Answers:

Answer

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 );
Answer

I'm having some issues with the EffectComposer aswell.

But I think it purely comes down to not knowing how it's all working behind the hood.

You can fix your issue (as a bit of a hack)

if you add

var effectFilm = new THREE.FilmPass( 0, 0, 0, false );
effectFilm.renderToScreen = true;
composer.addPass( effectFilm );

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.