const THREE = require('three')
const EffectComposer = require('three-effectcomposer')(THREE)

class ClearPass {
  constructor () {
    this.scene = new THREE.Scene()
    this.camera = new THREE.PerspectiveCamera()
    this.enabled = true
    this.needsSwap = true
  }

  render (renderer, writeBuffer) {
    renderer.render(this.scene, this.camera, writeBuffer)
  }
}

class EnsembleAveragePass {
  constructor (target, repeat) {
    this.target = target
    this.uniforms = THREE.UniformsUtils.clone({
      accBuffer: {type: 't', value: null},
      newBuffer: {type: 't', value: null},
      scale: {type: 'f', value: 1 / repeat}
    })
    this.material = new THREE.ShaderMaterial({
      uniforms: this.uniforms,
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
      `,
      fragmentShader: `
        uniform sampler2D accBuffer;
        uniform sampler2D newBuffer;
        uniform float scale;
        varying vec2 vUv;
        void main() {
          vec4 accColor = texture2D(accBuffer, vUv);
          vec4 newColor = texture2D(newBuffer, vUv) * scale;
          newColor.a = 1.0;
          gl_FragColor = accColor + newColor;
        }
      `
    })
    this.enabled = true
    this.needsSwap = true
  }

  render (renderer, writeBuffer, readBuffer) {
    this.uniforms.accBuffer.value = readBuffer
    this.uniforms.newBuffer.value = this.target.readBuffer
    EffectComposer.quad.material = this.material
    if (this.renderToScreen) {
      renderer.render(EffectComposer.scene, EffectComposer.camera)
    } else {
      renderer.render(EffectComposer.scene, EffectComposer.camera, writeBuffer, true)
    }
  }
}

class EnsembleScenePass {
  constructor (scene, camera) {
    this.scene = scene
    this.camera = camera
    this.enabled = true
    this.needsSwap = false
  }

  render (renderer, writeBuffer) {
    this.readBuffer = writeBuffer.clone()
    renderer.render(this.scene, this.camera, this.readBuffer, true)
  }
}

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)
camera.position.z = 400

const composer = new EffectComposer(renderer)
composer.addPass(new ClearPass())

const repeat = 10
for (let j = 0; j < repeat; ++j) {
  const scene = new THREE.Scene()
  scene.fog = new THREE.Fog(0x000000, 1, 1000)

  const object = new THREE.Object3D()
  scene.add(object)

  const geometry = new THREE.SphereGeometry(1, 4, 4)
  const material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading
  })

  for (let i = 0; i < 100; i++) {
    const mesh = new THREE.Mesh(geometry, material)
    mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize()
    mesh.position.multiplyScalar(Math.random() * 400)
    mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2)
    mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50
    object.add(mesh)
  }

  scene.add(new THREE.AmbientLight(0x222222))

  const light = new THREE.DirectionalLight(0xffffff)
  light.position.set(1, 1, 1)
  scene.add(light)

  const target = new EnsembleScenePass(scene, camera)
  composer.addPass(target)
  const effect = new EnsembleAveragePass(target, repeat)
  if (j === repeat - 1) {
    effect.renderToScreen = true
  }
  composer.addPass(effect)
}

const render = () => {
  window.requestAnimationFrame(render)
  composer.render()
}

render()