RogueBloomShader.re.ts 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import * as RE from 'rogue-engine';
  2. import * as THREE from 'three';
  3. import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
  4. import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
  5. import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
  6. import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
  7. export default class RogueBloomShader extends RE.Component {
  8. @RE.props.num() strength = 1.5;
  9. @RE.props.num() radius = 0.4;
  10. @RE.props.num() threshold = 0.85;
  11. @RE.props.num() exposure = 1;
  12. composer: EffectComposer;
  13. bloomPass: UnrealBloomPass;
  14. outputPass: OutputPass;
  15. awake() {
  16. this.composer = new EffectComposer( RE.Runtime.renderer );
  17. this.composer.addPass( new RenderPass( RE.Runtime.scene, RE.Runtime.camera ) );
  18. let bounds = RE.Runtime.rogueDOMContainer.getBoundingClientRect()
  19. this.bloomPass = new UnrealBloomPass( new THREE.Vector2( bounds.width, bounds.height ), this.strength, this.radius, this.threshold );
  20. this.bloomPass.threshold = this.threshold;
  21. this.bloomPass.strength = this.strength;
  22. this.bloomPass.radius = this.radius;
  23. this.composer.addPass( this.bloomPass );
  24. this.outputPass = new OutputPass( THREE.ReinhardToneMapping );
  25. this.outputPass.toneMappingExposure = Math.pow(this.exposure, 4.0)
  26. this.composer.addPass( this.outputPass );
  27. RE.Runtime.renderFunc = () => {
  28. this.composer.render(RE.Runtime.deltaTime);
  29. }
  30. RE.Runtime.onStop(() => {
  31. RE.Runtime.renderFunc = () => RE.Runtime.defaultRenderFunc();
  32. });
  33. }
  34. start() {
  35. }
  36. update() {
  37. if(this.threshold != this.bloomPass.threshold) {
  38. this.bloomPass.threshold = this.threshold
  39. }
  40. if(this.strength != this.bloomPass.strength) {
  41. this.bloomPass.strength = this.strength
  42. }
  43. if(this.radius != this.bloomPass.radius) {
  44. this.bloomPass.radius = this.radius
  45. }
  46. if(Math.pow(this.exposure, 4.0) != this.outputPass.toneMappingExposure ) {
  47. this.outputPass.toneMappingExposure = Math.pow(this.exposure, 4.0)
  48. }
  49. }
  50. }
  51. RE.registerComponent(RogueBloomShader);