THREEJS物体反射效果

物体反射效果【SSRPass】

效果

正文代码【摘录】

1.引入

// 主要
import { SSRPass } from 'three/examples/jsm/postprocessing/SSRPass';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
// Gamma和ShaderPass主要做矫正用的，习惯写pass通道的时候加上
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader';
// FXAA抗锯齿，常用抗锯齿，测试在SSRPass里好像几种AA抗锯齿都无效
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader';

2.SSRPass主要代码

createSSRPass(object)
object是一个数组，可以先声明一个数组，把要做反射的物体添加到数组里，然后在SSRPass的selects里添加

function createSSRPass(object) {
  const width = document.getElementById('threecanvas').offsetWidth
  const height = document.getElementById('threecanvas').offsetHeight
  //
  const size = renderer.getDrawingBufferSize(new THREE.Vector2());
  const target = new THREE.WebGLRenderTarget(
    width,
    height,
    {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.LinearFilter,
      format: THREE.RGBAFormat,
      stencilBuffer: false,
      type: THREE.FloatType,
      encoding: THREE.sRGBEncoding
    }
  )
  // 其他不需要的话，可以直接摘这一段start————end
  /*--------------------start------------------*/
  ssrcomposer = new EffectComposer(renderer, target);
  const ssrPass = new SSRPass({
      renderer,
      scene,
      camera,
      width: width,
      height: height,
      encoding: THREE.sRGBEncoding,
	  isPerspectiveCamera:true,
	  morphTargets: true,
      selects: object
  });// 反射衰减
  ssrPass.isDistanceAttenuation = true;
  // 反射距离
  ssrPass.maxDistance = 0.2;
  // 菲涅尔反应
  ssrPass.isFresnel = true;
  ssrPass.isBouncing = true;
  ssrPass.output = parseInt(SSRPass.OUTPUT.Default);
  ssrPass.opacity = 0.5;
  ssrPass.surfDist = 0.01;
  ssrcomposer.addPass(ssrPass);
  /*--------------------end------------------*/
  // 色彩空间矫正
  ssrcomposer.addPass(new ShaderPass(GammaCorrectionShader));

  // 增加fxaashader处理模型边缘锯齿,开启composer渲染后期后才能生效
  var FXAAShaderPass = new ShaderPass(FXAAShader);
  const pixelRatio = renderer.getPixelRatio();
  FXAAShaderPass.uniforms['resolution'].value.set(1 / (width * pixelRatio), 1 / (height * pixelRatio));
  FXAAShaderPass.renderToScreen = true;
  ssrcomposer.addPass(FXAAShaderPass);
}

3.窗口监听添加

ssrcomposer.setSize(width, height);

function onWindowResize () {
  const width = document.getElementById('threecanvas').offsetWidth;
  const height = document.getElementById('threecanvas').offsetHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
  // -------------look here-------------
  ssrcomposer.setSize(width, height);
}

4.render里换用ssrcomposer

function render(){
  // -------------look here-------------
  if(ssrcomposer){
    ssrcomposer.render();
  } else {
    renderer.render(scene, camera);
  }

  requestAnimationFrame(render);
  controls.update();
}

常见问题

1.OrbitControls控制器操作场景旋转缩放时，反射拉长

如图：

这种情况是【WEBGLRenderer】中 logarithmicDepthBuffer = true;深度精度引起的，可以把这个设置为false。

renderer = new THREE.WebGLRenderer({
    antialias: true, //抗锯齿
    /*-------------look here-----------*/
    logarithmicDepthBuffer: true, //图层交叉闪烁问题z-buffer
  });

但是设置为false时，另外可能有些精度的场景会出现叠加图层闪烁z-buffer这种问题，处理办法是，创建相机【PerspectiveCamera】尽量缩小场景可见范围，根据自己场景的调整相机的【near/far】，我这个0.1/10是模型本来就长度不到3，这个根据自己条件调整。

camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10);

2.条纹

出现这种情况是近切面引起
处理方式和上一个问题雷同，把camera的near【近切面】设置大一点即可，根据自身场景调整，不多赘述。

问题探讨：

使用SSRPass后在composer合成器里添加AA抗锯齿，我这里测试无效，有时间测试的大佬，评论里点一下我。