Post-processing

This is renderer plugin which is used to add additional rendering effects.

How to use

To use Post-processing you should do the following:

• Initialize the plugin in the AnimatedScene instance:

  /* skipped */
  @Override
  protected void onStart() {
      /* skipped */
      Postprocessing composer = new Postprocessing( getRenderer(), getScene() );
  }
  

• Setup RenderPass, which is needed to render current scene in the post-processor :

  RenderPass renderModel = new RenderPass( getScene(), camera );
  composer.addPass( renderModel );
  

• Disable auto-cleaning in WebGL renderer:

  getRenderer().setAutoClear(false);
  

• Add interesting post-processor pass/es:

  BloomPass effectBloom = new BloomPass( 1.3 );
  ShaderPass effectCopy = new ShaderPass( new CopyShader() );
  effectCopy.setRenderToScreen(true);
  
  composer.addPass( effectBloom );
  composer.addPass( effectCopy );
  

• Do not forget to add render() method and clear():

  @Override
  protected void onUpdate(double duration) {
  	getRenderer().clear();
  	getRenderer().render(getScene(), camera);
  }
  

Available passes

Bloom

Used to reproduce an imaging artifact of real-world cameras. The effect produces fringes (or feathers) of light around very bright objects in an image, obscuring fine details. Basically, if an object has a light behind it, the light will look more realistic and will somewhat overlap the front of the object from the 3rd person perspective.

BloomPass effect = new BloomPass( 1.3 );
composer.addPass( effect );

Dot Screen

Used to produce dots on the screen.

images/dot_screen_pass.jpg

	DotScreenPass effect = new DotScreenPass( 
		new Vector2( 0, 0 ), // Sets center 
		0.5, // Sets angle
		0.8  // Sets scale
	);
	effect.setRenderToScreen(true);
	composer.addPass( effect );

Film

This pass produces an analogue noise overlay similar to a film grain / TV static

images/film_pass.jpg

FilmPass effect = new FilmPass( 
    0.35, // Sets intensity of noise
    0.95, // Sets intensity of scanlines
    2048, // Sets number of the scanlines
    false // Enable / disable gray-scale
);
composer.addPass( effect );

Shader

Used to pass any shaders.

Built-In post-processing shaders

Bleach bypass

Used for effect of the partial or complete skipping of the bleaching function during the processing of a color film. The result is a black and white image over a color image.

images/bleach_bypass_shader.jpg

Uniforms:

• opacity:

	ShaderPass effect = new ShaderPass( new BleachBypassShader() );
	effect.setRenderToScreen(true);

Brightness Contrast

Used for brightness and contrast adjustment.

images/brightness_contrast_shader.jpg

Uniforms:

• brightness: -1 to 1 (-1 is solid black, 0 is no change, and 1 is solid white).
• contrast: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)

	ShaderPass effect = new ShaderPass( new BrightnessContrastShader() );
	effect.getUniforms().get("brightness").setValue(0.3);
	effect.getUniforms().get("contrast").setValue(0.5);
	effect.setRenderToScreen(true);

Focus

images/focus_shader.jpg

Uniforms:

• screenWidth:
• screenHeight:
• sampleDistance:
• waveFactor:

	ShaderPass effect = new ShaderPass( new FocusShader() );
	effect.setRenderToScreen(true);

Hue Saturation

Used for Hue and saturation adjustment

images/hue_saturation_shader.jpg

Uniforms:

• hue: -1 to 1 (-1 is 180 degrees in the negative direction, 0 is no change, etc.
• saturation: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast).

	ShaderPass effect = new ShaderPass( new HueSaturationShader() );
	effect.getUniforms().get("hue").setValue(0.9);
	effect.setRenderToScreen(true);

Sepia

Sepia tone shader.

images/sepia_shader.jpg

Uniforms:

• amount:

	ShaderPass effect = new ShaderPass( new SepiaShader() );
	effect.setRenderToScreen(true);

Horizontal Tilt Shift

Simple fake tilt-shift effect, modulating two pass Gaussian blur (see above) by vertical position. Shader uses 9 samples per pass, standard deviation is 2.7.

images/horizontal_tilt_shift_shader.jpg

Uniforms:

• h: parameters should be set to "1 / width" and "1 / height"
• r: parameter controls where "focused" horizontal line lies

	ShaderPass effect = new ShaderPass( new HorizontalTiltShiftShader() );
	effect.getUniforms().get("h").setValue(1.0/100.0);
	effect.setRenderToScreen(true);

Vertical Tilt Shift

Simple fake tilt-shift effect, modulating two pass Gaussian blur (see above) by vertical position. Shader uses 9 samples per pass, standard deviation is 2.7.

images/vertical_tilt_shift_shader.jpg

Uniforms:

• v: parameters should be set to "1 / width" and "1 / height"
• r: parameter controls where "focused" horizontal line lies

	ShaderPass effect = new ShaderPass( new VerticalTiltShiftShader() );
	effect.getUniforms().get("v").setValue(1.0/100.0);
	effect.setRenderToScreen(true);

Triangle Blur

This is a basic blur filter, which convolves the image with a pyramid filter. The pyramid filter is separable and is applied as two perpendicular triangle filters.

images/triangle_blur_shader.jpg

	ShaderPass effect = new ShaderPass( new TriangleBlurShader() );
	effect.getUniforms().get("delta").setValue(new Vector2( 0.1, 0.1 ));
	effect.setRenderToScreen(true);

Vignette

Used for reduction of an image's brightness or saturation at the periphery compared to the image center.

images/vignette_shader.jpg

Uniforms:

• offset:
• darkness: 0 - 1 (0 is no change, and 1 is maximum darkness)

	ShaderPass effect = new ShaderPass( new VignetteShader() );
	effect.getUniforms().get("offset").setValue(3.5);
	effect.setRenderToScreen(true);