Custom RenderNode - Depth of field

This sample creates a depth of field (DoF) effect by implementing a custom RenderNode.

In addition to the initial setup in the introductory sample [Custom RenderNode - Color modification] (/sample-code/custom-render-node-color/), we want to be able to modify shader parameters in real time.

  • focus: sets the focus distance of the DoF effect. Can be controlled via slider, but also through click in scene.
  • aperture: sets the aperture of the virtual camera, i.e. the spread of the DoF effect.
Use dark colors for code blocksCopy
1
2
3
  // user-controllable parameters
  let focus = 570;
  let aperture = 2.2;

Beside the color textures, we also need the depth texture for the depth of field effect.

Use dark colors for code blocksCopy
1
2
3
  // get color and depth texture of current target
  const color = input.getTexture();
  const depth = input.getTexture(this.gl.DEPTH_STENCIL_ATTACHMENT);

Define uniform locations for the parameters and textures needed in the shader

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
  // bind color and depth textures for access in shader programs
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, color.glName);
  gl.uniform1i(this.textureUniformLocation, 0);
  gl.activeTexture(gl.TEXTURE1);
  gl.bindTexture(gl.TEXTURE_2D, depth.glName);
  gl.uniform1i(this.depthTextureUniformLocation, 1);
  gl.activeTexture(gl.TEXTURE0);

  // Set up gl uniforms for access in shader programs
  gl.uniform1f(this.focusUniformLocation, focus);
  gl.uniform1f(this.apertureUniformLocation, aperture * 0.00001);
  gl.uniform2fv(this.nearFarUniformLocation, [this.camera.near, this.camera.far]);

and access these in the fragment shader program

Use dark colors for code blocksCopy
1
2
3
4
5
6
  uniform sampler2D colorTex;
  uniform sampler2D depthTex;

  uniform float focus;
  uniform float aperture;
  uniform vec2 nearFar;

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.