javascript - 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 poser = new THREE.EffectComposer(renderer);
      poser.addPass(renderPass);
      renderer.clear();
      poser.render();

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

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

<!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 poser = new THREE.EffectComposer(renderer);
      poser.addPass(renderPass);
      renderer.clear();
      poser.render();

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

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

Share Improve this question asked Nov 12, 2012 at 19:21 Jan 8,1413 gold badges39 silver badges65 bronze badges

I'm having the same issue, Except I can make it render but it renders as a plete mess. Also I don't think that "renderPass.renderToScreen = true;" is actually an option of the renderpass (I know it seems like it should have, as film has it, but if you look at the source for RenderPass.js it does not have a renderToScreen option. – james Commented Nov 13, 2012 at 11:55
Did you try my sample because when I use renderer.render(scene, camera); here I get my cube on the screen correctly. – Jan Commented Nov 13, 2012 at 12:30
Yeah, what happends if you enable both? cytoweb.co.uk/3ds/examples/freakout.html < that's what happends when I do – james Commented Nov 13, 2012 at 12:40
Then it just renders my cube like it should – Jan Commented Nov 13, 2012 at 13:02
wonder if its my shader that is causing my issue.. hmmmm – james Commented Nov 13, 2012 at 13:03

Add a ment |

2 Answers 2

Sorted by: Reset to default 12

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 poser = new THREE.EffectComposer( renderer );
poser.addPass( renderPass );
poser.addPass( copyPass );

poser.render( 0.05 );

I'm having some issues with the EffectComposer aswell.

But I think it purely es 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;
poser.addPass( effectFilm );

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Can't get three.js EffectComposer to work - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)