RealisticBokehPass

[byelik]

Hi. I'm trying to use the RealisticBokehPass. I've took this sample But for me it doesn't work. Also I was trying to use BokehPass and it works. Here is my code:

import { Injectable } from '@angular/core';
import {Camera, Clock, DepthTexture, Scene, WebGLRenderer} from "three";
import * as THREE from 'three';

import '../EnableThreeExamples.js';
import '@root/node_modules/three/examples/js/postprocessing/EffectComposer.js';
import '@root/node_modules/three/examples/js/shaders/CopyShader.js';
import '@root/node_modules/three/examples/js/postprocessing/ShaderPass.js';

import {BokehPass} from '@root/node_modules/postprocessing/src/passes/BokehPass.js';
import {RealisticBokehPass} from '@root/node_modules/postprocessing/src/passes/RealisticBokehPass.js';

import {RenderPass} from "postprocessing";

@Injectable()
export class CameraControllerService {

  postprocessing = {};

  bokehPass;

  renderPass;
  composer;

  pass;

  clock = new Clock();

  constructor(private camera:Camera, private scene:Scene, private renderer:WebGLRenderer) {

    this.composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( 800, 600 ) );

    this.renderPass = new RenderPass(scene, camera);
    this.bokehPass = new RealisticBokehPass(camera, {
      // focus: 0.5,
      // dof: 0,
      // aperture: 0.15,
      // maxBlur: 0.1

      rings: 5,
      samples: 5,
      showFocus: false,
      manualDoF: true,
      vignette: true,
      pentagon: true,
      shaderFocus: true,
      noise: false,
      maxBlur: 2.0,
      luminanceThreshold: 0.15,
      luminanceGain: 3.5,
      bias: 0.25,
      fringe: 0.33

    });

    this.renderPass.renderToScreen = false;
    this.bokehPass.renderToScreen = true;

    this.composer.addPass(this.renderPass);
    this.composer.addPass(this.bokehPass);

  }

  updateDOF(){

    const time = this.clock.getDelta();//performance.now() * 0.001;
    this.composer.render(time);
  }

}

Thanks in advance

[vanruesc]

Hi!

But for me it doesn't work. Also I was trying to use BokehPass and it works.

I'm afraid I need more information to be able to help you. Could you please explain your problem in more detail? What was the expected result and what did you get instead?

One thing that jumped at me, though, was the following line:

this.composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( 800, 600 ) );

The EffectComposer from three.js is not compatible with this library. If you want to use a custom render target size, you should set the size via the EffectComposer. I'm not sure why the BokehPass worked for you, but since you're using a pass that depends on depth information, you actually have to activate the depthTexture functionality of the EffectComposer:

import { WebGLRenderer } from "three";
import { EffectComposer } from "postprocessing";

const renderer = new WebGLRenderer();
const composer = new EffectComposer(renderer, {
    depthTexture: true
});

composer.setSize(800, 600);

I admit that this configuration step is not very obvious. I do plan on changing that in the next major release.

[byelik]

Hi. Sorry for delay. Thanks for your help.

24 квіт. 2018 р. о 18:06 Raoul v. R. notifications@github.com написав(ла):

Hi!

But for me it doesn't work. Also I was trying to use BokehPass and it works.

I'm afraid I need more information to be able to help you. Could you please explain your problem in more detail? What was the expected result and what did you get instead?

One thing that jumped at me, though, was the following line:

this.composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( 800, 600 ) ); The EffectComposer from three.js is not compatible with this library. If you want to use a custom render target size, you should set the size via the EffectComposer. I'm not sure why the BokehPass worked for you, but since you're using a pass that depends on depth information, you actually have to activate the depthTexture functionality of the EffectComposer:

Now I understand.

import { WebGLRenderer } from "three"; import { EffectComposer } from "postprocessing";

const renderer = new WebGLRenderer(); const composer = new EffectComposer(renderer, { depthTexture: true });

composer.setSize(800, 600); I’ve used this line of code and now it works(I see a blur on objects). But I have one more question: On my scene I have some objects, is it possible with the help of "RealisticBokehPass» focus on one of them.? I mean focus on one obj and blur other objs. And again, thanks a lot for your help.

I admit that this configuration step is not very obvious. I do plan on changing that in the next major release.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/vanruesc/postprocessing/issues/77#issuecomment-383967515, or mute the thread https://github.com/notifications/unsubscribe-auth/AB6xB2xoVXyGoF2RN5eonryk3NHEjy_vks5trz-FgaJpZM4ThxKp.

[vanruesc]

On my scene I have some objects, is it possible with the help of RealisticBokehPass focus on one of them? I mean focus on one obj and blur other objs.

Yes, focusing on a specific object is possible if you implement the required logic in JavaScript. Take a look at the original DoF Demo from three.js to get an idea of how to accomplish that. This part in particular seems to be important. Unfortunately, it looks like that demo is currently partly broken: the bokeh effect doesn't properly react to mouse movements 😕

Anyway, keep in mind that multiple objects can have the same depth value so objects that are very close to the one you want to focus will also be sharp. The bokeh passes operate solely on depth information, not on objects.

The basic BokehPass allows you to define a relative distance from the camera at which objects should appear sharp while the rest of the scene will be blurred. The RealisticBokehPass can do that, too, but its settings are more complicated because it's supposed to be realistic. I'm not an expert when it comes to photography and artistic camera settings, so I can't provide more information on that front.

[byelik]

25 квіт. 2018 р. о 15:34 Raoul v. R. notifications@github.com написав(ла):

On my scene I have some objects, is it possible with the help of RealisticBokehPass focus on one of them? I mean focus on one obj and blur other objs.

Yes, focusing on a specific object is possible if you implement the required logic in JavaScript. Take a look at the original DoF Demo https://threejs.org/examples/?q=dof#webgl_postprocessing_dof2 from three.js to get an idea of how to accomplish that. This part https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_dof2.html#L444-L467 in particular seems to be important. Unfortunately, it looks like that demo is currently partly broken: the bokeh effect doesn't properly react to mouse movements 😕

Anyway, keep in mind that multiple objects can have the same depth value so objects that are very close to the one you want to focus will also be sharp. The bokeh passes operate solely on depth information, not on objects.

The basic BokehPass allows you to define a relative distance from the camera at which objects should appear sharp while the rest of the scene will be blurred. The RealisticBokehPass can do that, too, but its settings are more complicated because it's supposed to be realistic. I'm not an expert when it comes to photography and artistic camera settings, so I can't provide more information on that front.

I’ve found one good sample with the «RealisticBokehPass»: http://www.andrewberg.com/prototypes/threejs/bokeh/ http://www.andrewberg.com/prototypes/threejs/bokeh/

I’ve made some tests and I think it works fine. I've attached image with my test. And again, thanks for your help. I think this issue is closed.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/vanruesc/postprocessing/issues/77#issuecomment-384270422, or mute the thread https://github.com/notifications/unsubscribe-auth/AB6xB0LtuHw4rmScU5tjuR-tzbE0iv0qks5tsG1HgaJpZM4ThxKp.

[byelik]

[vanruesc]

Alright, glad I could help!