three.js/examples/jsm/postprocessing/SSRPass.js

import {
  AddEquation,
  Color,
  NormalBlending,
  DepthTexture,
	SrcAlphaFactor,
	OneMinusSrcAlphaFactor,
  LinearFilter,
  MeshNormalMaterial,
  MeshBasicMaterial,
  NearestFilter,
  NoBlending,
  RGBAFormat,
  ShaderMaterial,
  UniformsUtils,
  UnsignedShortType,
  WebGLRenderTarget,
	HalfFloatType,
} from "../../../build/three.module.js";
import { Pass } from "../postprocessing/Pass.js";
import { SSRShader } from "../shaders/SSRShader.js";
import { SSRBlurShader } from "../shaders/SSRShader.js";
import { SSRDepthShader } from "../shaders/SSRShader.js";
import { CopyShader } from "../shaders/CopyShader.js";

var SSRPass = function({ renderer, scene, camera, width, height, selects, encoding, isPerspectiveCamera = true, isBouncing = false, morphTargets = false, groundReflector }) {

  Pass.call(this);

  this.width = (width !== undefined) ? width : 512;
  this.height = (height !== undefined) ? height : 512;

  this.clear = true;

	this.renderer = renderer;
	this.scene = scene;
  this.camera = camera;
	this.groundReflector = groundReflector;

  this.opacity = SSRShader.uniforms.opacity.value;;
  this.output = 0;

  this.maxDistance = SSRShader.uniforms.maxDistance.value;
  this.surfDist = SSRShader.uniforms.surfDist.value;

	this.encoding = encoding

	this.tempColor = new Color()

	this._selects = selects
  this.isSelective = Array.isArray(this._selects)
	Object.defineProperty(this, 'selects', {
		get() {
			return this._selects
		},
		set(val) {
      if (this._selects === val) return
      this._selects = val
			if (Array.isArray(val)) {
				this.isSelective = true
				this.ssrMaterial.defines.isSelective = true
				this.ssrMaterial.needsUpdate = true
			} else {
				this.isSelective = false
				this.ssrMaterial.defines.isSelective = false
				this.ssrMaterial.needsUpdate = true
			}
		}
	})

  this._isBouncing = isBouncing ///todo: don't need defineProperty
  Object.defineProperty(this, 'isBouncing', {
    get() {
      return this._isBouncing
    },
    set(val) {
      if (this._isBouncing === val) return
      this._isBouncing = val
      if (val) {
        this.ssrMaterial.uniforms['tDiffuse'].value = this.prevRenderTarget.texture;
      } else {
        this.ssrMaterial.uniforms['tDiffuse'].value = this.beautyRenderTarget.texture;
      }
    }
  })

  this.isBlur = true

  this._isDistanceAttenuation = SSRShader.defines.isDistanceAttenuation
  Object.defineProperty(this, 'isDistanceAttenuation', {
    get() {
      return this._isDistanceAttenuation
    },
    set(val) {
      if (this._isDistanceAttenuation === val) return
      this._isDistanceAttenuation = val
      this.ssrMaterial.defines.isDistanceAttenuation = val
      this.ssrMaterial.needsUpdate = true
    }
	})


  this._isFresnel = SSRShader.defines.isFresnel
  Object.defineProperty(this, 'isFresnel', {
    get() {
      return this._isFresnel
    },
    set(val) {
      if (this._isFresnel === val) return
      this._isFresnel = val
      this.ssrMaterial.defines.isFresnel = val
      this.ssrMaterial.needsUpdate = true
    }
	})

  this._isInfiniteThick = SSRShader.defines.isInfiniteThick
  Object.defineProperty(this, 'isInfiniteThick', {
    get() {
      return this._isInfiniteThick
    },
    set(val) {
      if (this._isInfiniteThick === val) return
      this._isInfiniteThick = val
      this.ssrMaterial.defines.isInfiniteThick = val
      this.ssrMaterial.needsUpdate = true
    }
  })
  this.thickTolerance = SSRShader.uniforms.thickTolerance.value;

  // beauty render target with depth buffer

  var depthTexture = new DepthTexture();
  depthTexture.type = UnsignedShortType;
  depthTexture.minFilter = NearestFilter;
  depthTexture.maxFilter = NearestFilter;

  this.beautyRenderTarget = new WebGLRenderTarget(this.width, this.height, {
    minFilter: LinearFilter,
    magFilter: LinearFilter,
    format: RGBAFormat,
    depthTexture: depthTexture,
    depthBuffer: true
  });

  //for bouncing
  this.prevRenderTarget = new WebGLRenderTarget(this.width, this.height, {
    minFilter: LinearFilter,
    magFilter: LinearFilter,
    format: RGBAFormat,
  });

  // normal render target

  this.normalRenderTarget = new WebGLRenderTarget(this.width, this.height, {
    minFilter: NearestFilter,
    magFilter: NearestFilter,
		format: RGBAFormat,
		type: HalfFloatType,
  });

  // metalness render target

  // if (this.isSelective) {
    this.metalnessRenderTarget = new WebGLRenderTarget(this.width, this.height, {
      minFilter: NearestFilter,
      magFilter: NearestFilter,
      format: RGBAFormat
    });
  // }



  // ssr render target

  this.ssrRenderTarget = new WebGLRenderTarget(this.width, this.height, {
    minFilter: LinearFilter,
    magFilter: LinearFilter,
    format: RGBAFormat
  });

  this.blurRenderTarget = this.ssrRenderTarget.clone();
  this.blurRenderTarget2 = this.ssrRenderTarget.clone();
  // this.blurRenderTarget3 = this.ssrRenderTarget.clone();

  // ssr material

  if (SSRShader === undefined) {

    console.error('THREE.SSRPass: The pass relies on SSRShader.');

  }

  this.ssrMaterial = new ShaderMaterial({
    defines: Object.assign({
      MAX_STEP: Math.sqrt(window.innerWidth * window.innerWidth + window.innerHeight * window.innerHeight)
    }, SSRShader.defines),
    uniforms: UniformsUtils.clone(SSRShader.uniforms),
    vertexShader: SSRShader.vertexShader,
    fragmentShader: SSRShader.fragmentShader,
    blending: NoBlending
  });
  if (!isPerspectiveCamera) {
    this.ssrMaterial.defines.isPerspectiveCamera = isPerspectiveCamera
    this.ssrMaterial.needsUpdate = true
  }

  this.ssrMaterial.uniforms['tDiffuse'].value = this.beautyRenderTarget.texture;
  this.ssrMaterial.uniforms['tNormal'].value = this.normalRenderTarget.texture;
  // if (this.isSelective) {
    this.ssrMaterial.defines.isSelective = this.isSelective
    this.ssrMaterial.needsUpdate = true
    this.ssrMaterial.uniforms['tMetalness'].value = this.metalnessRenderTarget.texture;
  // }
  this.ssrMaterial.uniforms['tDepth'].value = this.beautyRenderTarget.depthTexture;
  this.ssrMaterial.uniforms['cameraNear'].value = this.camera.near;
  this.ssrMaterial.uniforms['cameraFar'].value = this.camera.far;
  this.ssrMaterial.uniforms['surfDist'].value = this.surfDist;
  this.ssrMaterial.uniforms['resolution'].value.set(this.width, this.height);
  this.ssrMaterial.uniforms['cameraProjectionMatrix'].value.copy(this.camera.projectionMatrix);
  this.ssrMaterial.uniforms['cameraInverseProjectionMatrix'].value.copy(this.camera.projectionMatrixInverse);

  // normal material

  this.normalMaterial = new MeshNormalMaterial({ morphTargets });
  this.normalMaterial.blending = NoBlending;

  // if (this.isSelective) {
    // metalnessOn material

    this.metalnessOnMaterial = new MeshBasicMaterial({
      color: 'white'
    });

    // metalnessOff material

    this.metalnessOffMaterial = new MeshBasicMaterial({
      color: 'black'
    });
  // }

  // blur material

  this.blurMaterial = new ShaderMaterial({
    defines: Object.assign({}, SSRBlurShader.defines),
    uniforms: UniformsUtils.clone(SSRBlurShader.uniforms),
    vertexShader: SSRBlurShader.vertexShader,
    fragmentShader: SSRBlurShader.fragmentShader
  });
  this.blurMaterial.uniforms['tDiffuse'].value = this.ssrRenderTarget.texture;
  this.blurMaterial.uniforms['resolution'].value.set(this.width, this.height);

  // blur material 2

  this.blurMaterial2 = new ShaderMaterial({
    defines: Object.assign({}, SSRBlurShader.defines),
    uniforms: UniformsUtils.clone(SSRBlurShader.uniforms),
    vertexShader: SSRBlurShader.vertexShader,
    fragmentShader: SSRBlurShader.fragmentShader
  });
  this.blurMaterial2.uniforms['tDiffuse'].value = this.blurRenderTarget.texture;
  this.blurMaterial2.uniforms['resolution'].value.set(this.width, this.height);

  // // blur material 3

  // this.blurMaterial3 = new ShaderMaterial({
  //   defines: Object.assign({}, SSRBlurShader.defines),
  //   uniforms: UniformsUtils.clone(SSRBlurShader.uniforms),
  //   vertexShader: SSRBlurShader.vertexShader,
  //   fragmentShader: SSRBlurShader.fragmentShader
  // });
  // this.blurMaterial3.uniforms['tDiffuse'].value = this.blurRenderTarget2.texture;
  // this.blurMaterial3.uniforms['resolution'].value.set(this.width, this.height);

  // material for rendering the depth

  this.depthRenderMaterial = new ShaderMaterial({
    defines: Object.assign({}, SSRDepthShader.defines),
    uniforms: UniformsUtils.clone(SSRDepthShader.uniforms),
    vertexShader: SSRDepthShader.vertexShader,
    fragmentShader: SSRDepthShader.fragmentShader,
    blending: NoBlending
  });
  this.depthRenderMaterial.uniforms['tDepth'].value = this.beautyRenderTarget.depthTexture;
  this.depthRenderMaterial.uniforms['cameraNear'].value = this.camera.near;
  this.depthRenderMaterial.uniforms['cameraFar'].value = this.camera.far;

  // material for rendering the content of a render target

  this.copyMaterial = new ShaderMaterial({
    uniforms: UniformsUtils.clone(CopyShader.uniforms),
    vertexShader: CopyShader.vertexShader,
    fragmentShader: CopyShader.fragmentShader,
    transparent: true,
    depthTest: false,
    depthWrite: false,
    blendSrc: SrcAlphaFactor,
    blendDst: OneMinusSrcAlphaFactor,
    blendEquation: AddEquation,
    blendSrcAlpha: SrcAlphaFactor,
    blendDstAlpha: OneMinusSrcAlphaFactor,
    blendEquationAlpha: AddEquation,
    // premultipliedAlpha:true,
  });

  this.fsQuad = new Pass.FullScreenQuad(null);

  this.originalClearColor = new Color();

};

SSRPass.prototype = Object.assign(Object.create(Pass.prototype), {

  constructor: SSRPass,

  dispose: function() {

    // dispose render targets

    this.beautyRenderTarget.dispose();
    this.prevRenderTarget.dispose();
    this.normalRenderTarget.dispose();
		// if (this.isSelective)
			this.metalnessRenderTarget.dispose();
    this.ssrRenderTarget.dispose();
    this.blurRenderTarget.dispose();
    this.blurRenderTarget2.dispose();
    // this.blurRenderTarget3.dispose();

    // dispose materials

    this.normalMaterial.dispose();
    // if (this.isSelective) {
      this.metalnessOnMaterial.dispose();
      this.metalnessOffMaterial.dispose();
    // }
    this.blurMaterial.dispose();
    this.blurMaterial2.dispose();
    this.copyMaterial.dispose();
    this.depthRenderMaterial.dispose();

    // dipsose full screen quad

    this.fsQuad.dispose();

  },

  render: function(renderer, writeBuffer /*, readBuffer, deltaTime, maskActive */ ) {

    // render beauty and depth

    if (this.encoding) this.beautyRenderTarget.texture.encoding = this.encoding
    renderer.setRenderTarget(this.beautyRenderTarget);
		renderer.clear();
		if (this.groundReflector) {
			this.groundReflector.doRender(this.renderer, this.scene, this.camera);
			this.groundReflector.visible = true
		}
    renderer.render(this.scene, this.camera);
		if(this.groundReflector) this.groundReflector.visible=false

    // render normals

    this.renderOverride(renderer, this.normalMaterial, this.normalRenderTarget, 0, 0);

    // render metalnesses

    if (this.isSelective) {
      this.renderMetalness(renderer, this.metalnessOnMaterial, this.metalnessRenderTarget, 0, 0);
    }

    // render SSR

    this.ssrMaterial.uniforms['opacity'].value = this.opacity;
    this.ssrMaterial.uniforms['maxDistance'].value = this.maxDistance;
    this.ssrMaterial.uniforms['surfDist'].value = this.surfDist;
    this.ssrMaterial.uniforms['thickTolerance'].value = this.thickTolerance
    this.renderPass(renderer, this.ssrMaterial, this.ssrRenderTarget);


    // render blur

    if (this.isBlur) {
      this.renderPass(renderer, this.blurMaterial, this.blurRenderTarget);
      this.renderPass(renderer, this.blurMaterial2, this.blurRenderTarget2);
      // this.renderPass(renderer, this.blurMaterial3, this.blurRenderTarget3);
    }

    // output result to screen

    switch (this.output) {

      case SSRPass.OUTPUT.Default:

        if (this.isBouncing) {
          this.copyMaterial.uniforms['tDiffuse'].value = this.beautyRenderTarget.texture;
          this.copyMaterial.blending = NoBlending;
          this.renderPass(renderer, this.copyMaterial, this.prevRenderTarget);

          if (this.isBlur)
            this.copyMaterial.uniforms['tDiffuse'].value = this.blurRenderTarget2.texture;
          else
            this.copyMaterial.uniforms['tDiffuse'].value = this.ssrRenderTarget.texture;
          this.copyMaterial.blending = NormalBlending;
          this.renderPass(renderer, this.copyMaterial, this.prevRenderTarget);

          this.copyMaterial.uniforms['tDiffuse'].value = this.prevRenderTarget.texture;
          this.copyMaterial.blending = NoBlending;
          this.renderPass(renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer);
        } else {
          this.copyMaterial.uniforms['tDiffuse'].value = this.beautyRenderTarget.texture;
          this.copyMaterial.blending = NoBlending;
          this.renderPass(renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer);

          if (this.isBlur)
            this.copyMaterial.uniforms['tDiffuse'].value = this.blurRenderTarget2.texture;
          else
            this.copyMaterial.uniforms['tDiffuse'].value = this.ssrRenderTarget.texture;
          this.copyMaterial.blending = NormalBlending;
          this.renderPass(renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer);
        }

        break;
      case SSRPass.OUTPUT.SSR:

        if (this.isBlur)
          this.copyMaterial.uniforms['tDiffuse'].value = this.blurRenderTarget2.texture;
        else
          this.copyMaterial.uniforms['tDiffuse'].value = this.ssrRenderTarget.texture;
        this.copyMaterial.blending = NoBlending;
        this.renderPass(renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer);

        if (this.isBouncing) {
          if (this.isBlur)
            this.copyMaterial.uniforms['tDiffuse'].value = this.blurRenderTarget2.texture;
          else
            this.copyMaterial.uniforms['tDiffuse'].value = this.beautyRenderTarget.texture;
          this.copyMaterial.blending = NoBlending;
          this.renderPass(renderer, this.copyMaterial, this.prevRenderTarget);

          this.copyMaterial.uniforms['tDiffuse'].value = this.ssrRenderTarget.texture;
          this.copyMaterial.blending = NormalBlending;
          this.renderPass(renderer, this.copyMaterial, this.prevRenderTarget);
        }

        break;

      case SSRPass.OUTPUT.Beauty:

        this.copyMaterial.uniforms['tDiffuse'].value = this.beautyRenderTarget.texture;
        this.copyMaterial.blending = NoBlending;
        this.renderPass(renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer);

        break;

      case SSRPass.OUTPUT.Depth:

        this.renderPass(renderer, this.depthRenderMaterial, this.renderToScreen ? null : writeBuffer);

        break;

      case SSRPass.OUTPUT.Normal:

        this.copyMaterial.uniforms['tDiffuse'].value = this.normalRenderTarget.texture;
        this.copyMaterial.blending = NoBlending;
        this.renderPass(renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer);

        break;

      case SSRPass.OUTPUT.Metalness:

        this.copyMaterial.uniforms['tDiffuse'].value = this.metalnessRenderTarget.texture;
        this.copyMaterial.blending = NoBlending;
        this.renderPass(renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer);

        break;

      default:
        console.warn('THREE.SSRPass: Unknown output type.');

    }

  },

  renderPass: function(renderer, passMaterial, renderTarget, clearColor, clearAlpha) {

    // save original state
    this.originalClearColor.copy(renderer.getClearColor(this.tempColor));
    var originalClearAlpha = renderer.getClearAlpha(this.tempColor);
    var originalAutoClear = renderer.autoClear;

    renderer.setRenderTarget(renderTarget);

    // setup pass state
    renderer.autoClear = false;
    if ((clearColor !== undefined) && (clearColor !== null)) {

      renderer.setClearColor(clearColor);
      renderer.setClearAlpha(clearAlpha || 0.0);
      renderer.clear();

    }

    this.fsQuad.material = passMaterial;
    this.fsQuad.render(renderer);

    // restore original state
    renderer.autoClear = originalAutoClear;
    renderer.setClearColor(this.originalClearColor);
    renderer.setClearAlpha(originalClearAlpha);

  },

  renderOverride: function(renderer, overrideMaterial, renderTarget, clearColor, clearAlpha) {

    this.originalClearColor.copy(renderer.getClearColor(this.tempColor));
    var originalClearAlpha = renderer.getClearAlpha(this.tempColor);
    var originalAutoClear = renderer.autoClear;

    renderer.setRenderTarget(renderTarget);
    renderer.autoClear = false;

    clearColor = overrideMaterial.clearColor || clearColor;
    clearAlpha = overrideMaterial.clearAlpha || clearAlpha;

    if ((clearColor !== undefined) && (clearColor !== null)) {

      renderer.setClearColor(clearColor);
      renderer.setClearAlpha(clearAlpha || 0.0);
      renderer.clear();

    }

    this.scene.overrideMaterial = overrideMaterial;
    renderer.render(this.scene, this.camera);
    this.scene.overrideMaterial = null;

    // restore original state

    renderer.autoClear = originalAutoClear;
    renderer.setClearColor(this.originalClearColor);
    renderer.setClearAlpha(originalClearAlpha);

  },

  renderMetalness: function(renderer, overrideMaterial, renderTarget, clearColor, clearAlpha) {

    this.originalClearColor.copy(renderer.getClearColor(this.tempColor));
    var originalClearAlpha = renderer.getClearAlpha(this.tempColor);
    var originalAutoClear = renderer.autoClear;

    renderer.setRenderTarget(renderTarget);
    renderer.autoClear = false;

    clearColor = overrideMaterial.clearColor || clearColor;
    clearAlpha = overrideMaterial.clearAlpha || clearAlpha;

    if ((clearColor !== undefined) && (clearColor !== null)) {

      renderer.setClearColor(clearColor);
      renderer.setClearAlpha(clearAlpha || 0.0);
      renderer.clear();

    }

    this.scene.traverseVisible(child => {
      child._SSRPassMaterialBack = child.material
      if (this._selects.includes(child)) {
        child.material = this.metalnessOnMaterial
      } else {
        child.material = this.metalnessOffMaterial
      }
    })
    renderer.render(this.scene, this.camera);
    this.scene.traverseVisible(child => {
      child.material = child._SSRPassMaterialBack
    })

    // restore original state

    renderer.autoClear = originalAutoClear;
    renderer.setClearColor(this.originalClearColor);
    renderer.setClearAlpha(originalClearAlpha);

  },

  setSize: function(width, height) {

    this.width = width;
    this.height = height;

    this.ssrMaterial.defines.MAX_STEP = Math.sqrt(width * width + height * height)
    this.ssrMaterial.needsUpdate = true
    this.beautyRenderTarget.setSize(width, height);
    this.prevRenderTarget.setSize(width, height);
    this.ssrRenderTarget.setSize(width, height);
    this.normalRenderTarget.setSize(width, height);
		// if (this.isSelective)
			this.metalnessRenderTarget.setSize(width, height);
    this.blurRenderTarget.setSize(width, height);
    this.blurRenderTarget2.setSize(width, height);
    // this.blurRenderTarget3.setSize(width, height);

    this.ssrMaterial.uniforms['resolution'].value.set(width, height);
    this.ssrMaterial.uniforms['cameraProjectionMatrix'].value.copy(this.camera.projectionMatrix);
    this.ssrMaterial.uniforms['cameraInverseProjectionMatrix'].value.copy(this.camera.projectionMatrixInverse);

    this.blurMaterial.uniforms['resolution'].value.set(width, height);
    this.blurMaterial2.uniforms['resolution'].value.set(width, height);

  },

});

SSRPass.OUTPUT = {
  'Default': 0,
  'SSR': 1,
  'Beauty': 3,
  'Depth': 4,
  'Normal': 5,
  'Metalness': 7,
};

export { SSRPass };