File

projects/atft/src/lib/effect/compose/dof.component.ts

Extends

AbstractComposeEffect

Metadata

Index

Properties
Methods
Inputs

Constructor

constructor(rendererService: RendererService, composer: EffectComposerComponent)
Parameters :
Name Type Optional
rendererService RendererService No
composer EffectComposerComponent No

Inputs

aperture
Type : number
Default value : 0.025
focus
Type : number
Default value : 1.0
maxblur
Type : number
Default value : 0.01

Methods

applyChanges
applyChanges(changes: SimpleChanges)
Inherited from AbstractComposeEffect
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : boolean
initPasses
initPasses()
Inherited from AbstractComposeEffect
Returns : void
Protected disable
disable()
Inherited from AbstractComposeEffect
Returns : void
Protected enable
enable()
Inherited from AbstractComposeEffect
Returns : void
Public ngAfterViewInit
ngAfterViewInit()
Inherited from AbstractComposeEffect
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from AbstractComposeEffect
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnDestroy
ngOnDestroy()
Inherited from AbstractComposeEffect
Returns : void

Properties

Protected pass
Type : T[]
Default value : []
Inherited from AbstractComposeEffect
import {Component, Input, Optional, SimpleChanges, SkipSelf} from '@angular/core';
import {RendererService} from '../../renderer/renderer.service';
import {BokehPass} from 'three/examples/jsm/postprocessing/BokehPass';
import {EffectComposerComponent} from './effect-composer.component';
import {AbstractComposeEffect} from './abstract-compose-effect';

@Component({
  selector: 'atft-dof',
  template: ''
})
export class DofComponent extends AbstractComposeEffect<BokehPass> {

  @Input() focus = 1.0;
  @Input() aperture = 0.025;
  @Input() maxblur = 0.01;

  constructor(
    protected override rendererService: RendererService,
    @SkipSelf() @Optional() protected override composer: EffectComposerComponent
  ) {
    super(rendererService, composer);
  }

  applyChanges(changes: SimpleChanges) {
    let modified = false;

    if (this.pass[0]) {
      if (['focus'].some(propName => propName in changes)) {
        // console.log('change focus', this.focus);
        // @ts-ignore
        this.pass[0].uniforms['focus'].value = this.focus;
        modified = true;
      }

      if (['aperture'].some(propName => propName in changes)) {
        // console.log('change aperture', this.aperture);
        // @ts-ignore
        this.pass[0].uniforms['aperture'].value = this.aperture;
        modified = true;
      }

      if (['maxblur'].some(propName => propName in changes)) {
        // console.log('change maxblur');
        // @ts-ignore
        this.pass[0].uniforms['maxblur'].value = this.maxblur;
        modified = true;
      }
    }

    return modified;
  }

  initPasses() {
    this.pass.push(new BokehPass(this.rendererService.getScene().getObject(), this.rendererService.getCamera().camera, {
        focus: this.focus,
        aperture: this.aperture,
        maxblur: this.maxblur,
        aspect :  window.innerWidth / window.innerHeight
      })
    );
  }


}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""