在 AFrame 中实现 Three.js SSAOPass

Question

通过将所有内容导出为 THREE.Effectcomposer、THREE.SSAOPass 等并将效果添加到 aframe 组件中，我能够成功地将 Threejs Effect composer 作为组件集成到 aframe 中，我调整了 AFrame 渲染器以更新场景。 Threejs 的 OutlinePass 在此代码中运行良好，但 SSAO 无法正常工作，我没有收到任何错误。请有人帮我找出问题所在。 SSAOPass 的代码如下所示

AFRAME.registerComponent('ssao', {

  init: function () {
    this.el.addEventListener('that', evt => this.onEnter());
    this.el.addEventListener('mouseleave', evt => this.onLeave());
    setTimeout(() => this.el.emit("that"), 2000);
  },
  onEnter: function () {
    const scene = this.el.sceneEl.object3D;
    const camera = this.el.sceneEl.camera;
    const renderer = this.el.sceneEl.renderer;
    const render = renderer.render;
    const composer = new THREE.EffectComposer(renderer);
    //let renderPass = new THREE.RenderPass(scene, camera);
    //let outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
    const ssaoPass = new THREE.SSAOPass( scene, camera, window.innerWidth, window.innerHeight );
    //composer.addPass(renderPass);
    //composer.addPass(outlinePass);
    ssaoPass.kernelRadius = 16;
        composer.addPass( ssaoPass );
    // let objects = [];
    // this.el.object3D.traverse(node => {
    //   if (!node.isMesh) return;
    //   objects.push(node);
    // });
    // outlinePass.selectedObjects = objects;
    // outlinePass.renderToScreen = true;
    // outlinePass.edgeStrength = this.data.strength;
    // outlinePass.edgeGlow = this.data.glow;
    // outlinePass.visibleEdgeColor.set(this.data.color);
    // HACK the AFRAME render method (a bit ugly)
    const clock = new THREE.Clock();
    this.originalRenderMethod = render;
    let calledByComposer = false;
        renderer.render = function () {
      if (calledByComposer) {
        render.apply(renderer, arguments);
      } else {
        calledByComposer = true;
        composer.render(clock.getDelta());
        calledByComposer = false;
      }
    };
  },
  onLeave: function () {
    this.el.sceneEl.renderer.render = this.originalRenderMethod;
  },
  remove: function () {
    this.onLeave();
  }
});

我还创建了一个故障项目，我在这里分享。请随时加入我的项目并进行合作 编辑链接：https://glitch.com/edit/#!/accessible-torpid-partridge 网站链接：https://accessible-torpid-partridge.glitch.me

提前致谢

Answer 1

代码是正确的，您只需调整暴露的SSAOShader 制服：
SSAOPass.kernelRadius、SSAOPass.minDistance、SSAOPass.maxDistance - 就像在Three.js example 中一样。

请记住 - 示例中的比例很大，因此默认 aframe 场景中的值需要不同。

能够动态更新组件是个好主意（如果您是properly handle updates，则通过setAttribute()），这样您就可以实时查看正在发生的事情。就像我在这里所做的一样 - SSAO in a-frame（也基于 Don McCurdys gist。

我使用了一些基本的 HTML 元素，大多数threejs 示例使用dat.GUI - 它是为演示/调试调整而制作的。