vaporwave/Assets/Components/PostProcessingComponent.re.ts

import * as RE from 'rogue-engine';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';

import { RGBShiftShader } from 'three/examples/jsm/shaders/RGBShiftShader.js';
import { FocusShader } from 'three/examples/jsm/shaders/FocusShader.js'
import { FilmShader } from 'three/examples/jsm/shaders/FilmShader.js'

export default class PostProcessingComponent extends RE.Component {
  composer: EffectComposer
  shaders: ShaderPass[] = []

  elapsed: number = 0

  awake() {
    this.elapsed = 0

    this.composer = new EffectComposer(RE.Runtime.renderer);
    this.composer.addPass(new RenderPass(RE.Runtime.scene, RE.Runtime.camera));

    this.addShader(RGBShiftShader, {
      'angle': 0,
      'amount': 0.002,
    })

    this.addShader(FocusShader, {
      'sampleDistance': 0.95,
      'waveFactor': 0.003,
    })

    this.addShader(FilmShader, {
      'time': 0.0,
      'nIntensity': 1.0,
      'sIntensity': 0.8,
      'sCount': 1024,
      'grayscale': false,
    })

    // const effect3 = new OutputPass();
    // this.composer.addPass( effect3 );

    RE.Runtime.renderFunc = () => {
      this.composer.render(RE.Runtime.deltaTime);
    }

    RE.Runtime.onStop(() => {
      RE.Runtime.renderFunc = () => RE.Runtime.defaultRenderFunc();
    });
  }

  addShader(shaderClass, uniforms = {}) {
    const effect1 = new ShaderPass(shaderClass);
    for (let key in uniforms) {
      effect1.uniforms[key].value = uniforms[key]
    }

    this.shaders.push(effect1)
    this.composer.addPass(effect1);
  }

  start() {

  }

  update() {
    this.elapsed += RE.Runtime.deltaTime
    this.shaders.forEach((shaderPass) => {
      if (shaderPass.uniforms['time']) {
        shaderPass.uniforms['time'].value = this.elapsed
      }
      if (shaderPass.uniforms['uTime']) {
        shaderPass.uniforms['uTime'].value = this.elapsed
      }
      if (shaderPass.uniforms['u_time']) {
        shaderPass.uniforms['u_time'].value = this.elapsed
      }
    })
  }
}

RE.registerComponent(PostProcessingComponent);