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);