Question

我有一个全景视图，并希望模糊它，以便在模糊视图前呈现用户界面。模糊的图像必须在客户端上计算，所以我决定使用基于片段着色器的实现来做到这一点。

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

你可以在附件中看到这个（jsfiddle here 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()，这将在不取消设置渲染目标的情况下清除renderTarget而不是屏幕帧缓冲。

非常感谢stackoverflow＆lt; 3

来自WebGLRenderTarget的纹理未使用StereoEffect进行渲染

1 个答案: