javascript - 来自 WebGLRenderTarget 的纹理未使用 StereoEffect 渲染

Question

我有一个全景 View ，想要对其进行模糊处理，以便在模糊 View 前面呈现一个用户界面。模糊图像必须在客户端上计算，因此我决定使用基于片段着色器的实现来做到这一点。

只要我只使用常规渲染器，这个效果就非常好。 但是，当使用 THREE.StereoEffect 渲染场景时，模糊图像不会出现在屏幕上。

您可以在附加的代码片段中看到这一点(此处为jsfiddle:https://jsfiddle.net/n988sg96/3/):如果您按“切换模糊”，则一切看起来都应该如此。但是，如果您按“切换立体声”，然后激活模糊，屏幕就会变黑(所以基本上，模糊的图像不会渲染)。

模糊图像的生成是在 createBlurredTexture() 中实现的，使用与场景相同的渲染器以及用于垂直和水平模糊传递的两个渲染目标。

我已经验证(通过通过 renderer.readRenderTargetPixels() 将帧缓冲区导出为图像)两个渲染目标在两种情况下都包含正确的图像(因此与立体模式是否开启无关)不是)。

所以我的问题是:

• 为什么来自 RenderTarget 的纹理没有使用 StereoEffect 渲染？
• 还有其他类似的选项可以达到相同的效果吗？

const panoUrl = 'https://farm9.staticflickr.com/8652/29593302665_9e747048f7_k_d.jpg';

const panoTexture = new THREE.Texture();
const image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = () => {
  panoTexture.image = image;
  panoTexture.format = THREE.RGBFormat;
  panoTexture.needsUpdate = true;
};
image.src = panoUrl;

const blurButton = document.querySelector('.blur-btn');
const stereoButton = document.querySelector('.stereo-btn');

// creates meshes
function initScene(scene, renderer) {
  const panoSphere = new THREE.Mesh(
    new THREE.SphereGeometry(100, 36, 18),
    new THREE.MeshBasicMaterial({
      depthWrite: false,
      map: panoTexture
    }));

  const blurSphere = new THREE.Mesh(
    new THREE.SphereGeometry(80, 36, 18),
    new THREE.MeshBasicMaterial({
      color: 0x666666
    })
  );

  // flip normals
  blurSphere.scale.x = panoSphere.scale.x = -1;
  blurSphere.visible = false;

  scene.add(panoSphere, blurSphere);

  blurButton.addEventListener('click', ev => {
    if (blurSphere.visible) {
      blurSphere.visible = false;
    } else {
      blurSphere.material.map = createBlurredTexture(
        renderer, panoSphere.material.map.image);
      blurSphere.material.needsUpdate = true;
      blurSphere.visible = true;
    }
  });
}


// creates a blurred image-texture from the given image
function createBlurredTexture(renderer, img, prescale = 0.25) {
  const width = img.width * prescale;
  const height = img.height * prescale;
  const material = blurPassMaterial;

  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
  const scene = new THREE.Scene()
    .add(new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), material));

  const renderTargetOpts = {
    depthBuffer: false,
    stencilBuffer: false
  };
  const rt1 = new THREE.WebGLRenderTarget(width, height, renderTargetOpts);
  const rt2 = new THREE.WebGLRenderTarget(width, height, renderTargetOpts);

  material.uniforms.resolution.value.set(width, height);

  // prepare: downscale source-image
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  canvas.getContext('2d').drawImage(img, 0, 0, width, height);
  const texture = new THREE.CanvasTexture(canvas);
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

  // pass 1: vertical blur, texture -> rt1
  material.uniforms.image.value = texture;
  material.uniforms.direction.value.set(0, 1);
  renderer.render(scene, camera, rt1);

  // pass 2: horizontal blur, rt1 -> rt2
  material.uniforms.image.value = rt1.texture;
  material.uniforms.direction.value.set(1, 0);
  renderer.render(scene, camera, rt2);

  // cleanup
  texture.dispose();
  rt1.texture.dispose();
  rt1.dispose();

  return rt2.texture;
}


// simple material for a fast 5px blur pass
const blurPassMaterial = new THREE.ShaderMaterial({
  uniforms: {
    image: {type: 't', value: null},
    resolution: {type: 'v2', value: new THREE.Vector2()},
    direction: {type: 'v2', value: new THREE.Vector2(1, 0)}
  },

  vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv; 
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,

  fragmentShader: `
      varying vec2 vUv;

      uniform vec2 direction;
      uniform vec2 resolution;
      uniform sampler2D image;

      // based on https://github.com/Jam3/glsl-fast-gaussian-blur
      vec4 blur5(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
        vec2 offset = (vec2(1.3333333333333333) * direction) / resolution;
        
        return texture2D(image, uv) * 0.29411764705882354
          + texture2D(image, uv + offset) * 0.35294117647058826
          + texture2D(image, uv - offset) * 0.35294117647058826;
      }

      void main() {
        gl_FragColor = blur5(image, vUv, resolution, direction); 
      }
    `
});



// ---- boilerplate-code

// .... setup renderer and stereo-effect
let isStereoMode = false;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const effect = new THREE.StereoEffect(renderer);

// .... setup scene
const scene = window.scene = new THREE.Scene();

// .... setup camera and controls
const camera = new THREE.PerspectiveCamera(
  70, window.innerWidth / window.innerHeight, 1, 1000);
const controls = new THREE.OrbitControls(camera);
controls.enableZoom = false;
controls.enableDamping = true;
controls.dampingFactor = .15;

camera.position.set(0, 0, .1);
camera.lookAt(new THREE.Vector3(0, 0, 0));

// .... setup and run
initScene(scene, renderer);

requestAnimationFrame(function loop(time) {
  controls.update();

  if (isStereoMode) {
    effect.render(scene, camera);
  } else {
    renderer.render(scene, camera);
  }

  requestAnimationFrame(loop);
});

// .... bind events
stereoButton.addEventListener('click', ev => {
  isStereoMode = !isStereoMode;

  if (!isStereoMode) {
    renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
  }
});

window.addEventListener('resize', ev => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});

document.body.appendChild(renderer.domElement);

body {
  margin: 0;
  overflow: hidden;
}
canvas {
  width: 100vw;
  height: 100vh;
}
.buttons {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
}
button {
  display: inline-block;
}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/effects/StereoEffect.js"></script>

<div class="buttons">
  <button class="blur-btn">toggle blur</button>
  <button class="stereo-btn">toggle stereo</button>
</div>

Answer 1

阅读此问题找到了解决方案:three.js - THREE.StereoEffect / webVR-boilerplate + THREE.Mirror

我只需要向 createBlurredTexture() 函数添加一行。 清理时，需要通过调用手动取消设置renderTarget

renderer.setRenderTarget(null);

这样做的原因是立体效果的渲染将调用renderer.clear()，这将在不取消设置渲染目标的情况下清除渲染目标而不是屏幕帧缓冲区。

非常感谢 stackoverflow <3