无法让 three.js EffectComposer 工作答案

【问题标题】：Can't get three.js EffectComposer to work无法让 three.js EffectComposer 工作
【发布时间】：2012-11-14 22:30:41
【问题描述】：

我想开始使用 EffectComposer 对我的渲染进行一些后处理，但我无法获得用于渲染到屏幕的最基本设置。它只是保持空白。我一定在看什么。有人有想法吗？

<!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>

如果我取消注释最后一行，我会在屏幕上看到一些东西。

【问题讨论】：

我遇到了同样的问题，除了我可以让它渲染，但它渲染成一团糟。我也不认为“renderPass.renderToScreen = true;”实际上是 renderpass 的一个选项（我知道它似乎应该有，就像电影一样，但是如果你查看 RenderPass.js 的源代码，它没有 renderToScreen 选项。
您是否尝试过我的示例，因为当我在这里使用renderer.render(scene, camera); 时，我的立方体正确显示在屏幕上。
是的，如果同时启用会发生什么？ cytoweb.co.uk/3ds/examples/freakout.html
然后它只是渲染我的立方体，就像它应该的那样
不知道是不是我的着色器导致了我的问题.. 嗯

标签： javascript three.js

【解决方案1】：

首先，EffectComposer 不是库的一部分——它是示例的一部分。所以官方不支持。

所以是的，你必须“知道它是如何在幕后工作的。”

您可以通过添加额外的CopyPass 来解决您的问题，如下所示：

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

【讨论】：

感谢您的帮助，希望可以用它来解决我的问题。我不是在寻求勺子喂食的帮助......但只是为了检查......这个问题是我遇到（相关）cytoweb.co.uk/3ds/examples/freakout.html.. 一个错误还是只是我搞混了？（这应该是一个立方体，但是在通过 EffectComposer 运行它之后，它对我来说是抽象的）
@james 如果您遇到问题，请发布新问题。但我认为您可以通过消除过程自己回答这个问题。
是的，我已经研究了几天，但还没有解决这个问题（但可能是我错得太远了，我只需要一个新的方法）。我会继续努力的：）
要了解发生了什么：RenderPass 只渲染到作曲家缓冲区，它没有“renderToScreen”标志。它不打算单独使用，因此如果您的作曲家是“空的”，则需要最小的 CopyShader。

【解决方案2】：

我也遇到了 EffectComposer 的一些问题。

但我认为这完全归结为不知道这一切是如何在幕后工作的。

你可以解决你的问题（作为一个小技巧）

如果你添加

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

【讨论】：