bytev-charts/lib/plugin/three.js/examples/js/postprocessing/BokehPass.js

基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;

import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
import _Object$create from "@babel/runtime-corejs2/core-js/object/create";
import "core-js/modules/es.function.name.js";
console.warn("THREE.BokehPass: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/#manual/en/introduction/Installation.");
/**
 * Depth-of-field post-process with bokeh shader
 */

THREE.BokehPass = function (scene, camera, params) {
  THREE.Pass.call(this);
  this.scene = scene;
  this.camera = camera;
  var focus = params.focus !== undefined ? params.focus : 1.0;
  var aspect = params.aspect !== undefined ? params.aspect : camera.aspect;
  var aperture = params.aperture !== undefined ? params.aperture : 0.025;
  var maxblur = params.maxblur !== undefined ? params.maxblur : 1.0; // render targets

  var width = params.width || window.innerWidth || 1;
  var height = params.height || window.innerHeight || 1;
  this.renderTargetDepth = new THREE.WebGLRenderTarget(width, height, {
    minFilter: THREE.NearestFilter,
    magFilter: THREE.NearestFilter,
    stencilBuffer: false
  });
  this.renderTargetDepth.texture.name = "BokehPass.depth"; // depth material

  this.materialDepth = new THREE.MeshDepthMaterial();
  this.materialDepth.depthPacking = THREE.RGBADepthPacking;
  this.materialDepth.blending = THREE.NoBlending; // bokeh material

  if (THREE.BokehShader === undefined) {
    console.error("THREE.BokehPass relies on THREE.BokehShader");
  }

  var bokehShader = THREE.BokehShader;
  var bokehUniforms = THREE.UniformsUtils.clone(bokehShader.uniforms);
  bokehUniforms["tDepth"].value = this.renderTargetDepth.texture;
  bokehUniforms["focus"].value = focus;
  bokehUniforms["aspect"].value = aspect;
  bokehUniforms["aperture"].value = aperture;
  bokehUniforms["maxblur"].value = maxblur;
  bokehUniforms["nearClip"].value = camera.near;
  bokehUniforms["farClip"].value = camera.far;
  this.materialBokeh = new THREE.ShaderMaterial({
    defines: _Object$assign({}, bokehShader.defines),
    uniforms: bokehUniforms,
    vertexShader: bokehShader.vertexShader,
    fragmentShader: bokehShader.fragmentShader
  });
  this.uniforms = bokehUniforms;
  this.needsSwap = false;
  this.fsQuad = new THREE.Pass.FullScreenQuad(this.materialBokeh);
  this.oldClearColor = new THREE.Color();
};

THREE.BokehPass.prototype = _Object$assign(_Object$create(THREE.Pass.prototype), {
  constructor: THREE.BokehPass,
  render: function render(renderer, writeBuffer, readBuffer
  /*, deltaTime, maskActive*/
  ) {
    // Render depth into texture
    this.scene.overrideMaterial = this.materialDepth;
    this.oldClearColor.copy(renderer.getClearColor());
    var oldClearAlpha = renderer.getClearAlpha();
    var oldAutoClear = renderer.autoClear;
    renderer.autoClear = false;
    renderer.setClearColor(0xffffff);
    renderer.setClearAlpha(1.0);
    renderer.setRenderTarget(this.renderTargetDepth);
    renderer.clear();
    renderer.render(this.scene, this.camera); // Render bokeh composite

    this.uniforms["tColor"].value = readBuffer.texture;
    this.uniforms["nearClip"].value = this.camera.near;
    this.uniforms["farClip"].value = this.camera.far;

    if (this.renderToScreen) {
      renderer.setRenderTarget(null);
      this.fsQuad.render(renderer);
    } else {
      renderer.setRenderTarget(writeBuffer);
      renderer.clear();
      this.fsQuad.render(renderer);
    }

    this.scene.overrideMaterial = null;
    renderer.setClearColor(this.oldClearColor);
    renderer.setClearAlpha(oldClearAlpha);
    renderer.autoClear = oldAutoClear;
  }
});