在 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();
  }
});

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

提前致谢

Answer 1

代码是正确的，您只需调整暴露的 SSAOShader 制服即可：
SSAOPass.kernelRadius、SSAOPass.minDistance、SSAOPass.maxDistance - 如Three.js example.

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

能够动态更新组件是个好主意（如果您 properly handle updates), so you can see what's going on in realtime. Something like I did here - SSAO in a-frame (also based on Don McCurdys gist.

通过 setAttribute()

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

在 AFrame 中实施 Three.js SSAOPass

Implementing Three.js SSAOPass in AFrame

html

post-processing

three.js

webvr

aframe