GlassFilter

import { GlassFilter } from 'pixi-silk/glass';

The frosted glass filter behind Glass. Prefer Glass: it sizes the filter, keeps it in step with the transform and turns on the WebGL back buffer the filter needs.

Using it alone, set filterArea on the filtered container to the glass rectangle. Pass every distance in screen pixels, so multiply by the world scale yourself, and pass the world rotation to GlassFilter.setRotation. The filter reads the backdrop (blendRequired), so on WebGL it needs useBackBuffer: true on the renderer. Each setter uploads its uniform only when a value changes.

Extends#

• Filter

Constructors#

Constructor#

new GlassFilter(): GlassFilter;

Returns#

GlassFilter

Overrides#

Filter.constructor

Methods#

setLight()#

setLight(
   x: number, 
   y: number, 
   strength: number, 
   grain: number
): void;

Unit vector towards the light (see lightVector), light strength and grain amount. Defaults top left, 0.8, 0.035.

Parameters#

Returns#

void

setOptics()#

setOptics(
   blur: number, 
   refraction: number, 
   dispersion: number, 
   bevel: number
): void;

Blur radius, refraction distance and bevel width in screen pixels, and dispersion 0 to 1. Defaults 16, 12, 0.3, 18.

Parameters#

Returns#

void

setRotation()#

setRotation(angle: number): void;

Rotation of the pane on screen in radians, clockwise as Pixi’s rotation. The shape, its rim and the refraction follow it. The light stays fixed on screen. Default 0.

Parameters#

Returns#

void

setShape()#

setShape(
   halfWidth: number, 
   halfHeight: number, 
   radius: number, 
   smoothing: number
): void;

Half width, half height and corner radius in screen pixels, and squircle smoothing 0 to 1. Defaults 50, 50, 16, 0.

Parameters#

Returns#

void

setSurface()#

setSurface(
   frost: number, 
   opacity: number, 
   saturation: number, 
   seed: number
): void;

Frost 0 to 1, opacity 0 to 1, saturation (1 keeps colours) and a grain seed. Defaults 0.06, 1, 1.15, 0.

Parameters#

Returns#

void

setTint()#

setTint(
   r: number, 
   g: number, 
   b: number, 
   amount: number
): void;

Tint colour as straight sRGB 0 to 1 per channel, and how much of it to mix in, 0 to 1. Default white at 0.04.

Parameters#

Returns#

void