Glass

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

A pane of frosted glass from pixi-silk/glass. It blurs and bends whatever is drawn behind it, splits colours at its curved rim, and catches light on the edge that faces the light.

Put labels and icons in Glass.content. They sit on top of the glass, unblurred. The pane’s top-left corner is at (0, 0). It only sees what was drawn before it in the same frame, so add it after its backdrop. You can rotate and scale it. The light stays fixed on screen, and under an uneven scale the corners keep the radius of the smaller scale. Skew is not supported.

On WebGL the pane reads the canvas through the renderer’s back buffer. It sets renderer.backBuffer.useBackBuffer = true the first time it draws and shows no glass on that one frame. Pass useBackBuffer: true to the application to have glass from the first frame. The back buffer costs a full-screen copy each frame for the whole app. WebGPU reads the backdrop without a back buffer. Any other renderer gets a plain frosted fill instead.

const pane = new Glass({ width: 320, height: 200, radius: 32 });
pane.content.addChild(label);
app.stage.addChild(backdrop, pane);

Extends#

• Container

Constructors#

Constructor#

new Glass(options?: GlassOptions): Glass;

Parameters#

Returns#

Glass

Overrides#

Container.constructor

Properties#

Accessors#

paneHeight#

Get Signature#

get paneHeight(): number;

Pane height in local units. Change it with Glass.resize.

Returns

number

paneWidth#

Get Signature#

get paneWidth(): number;

Pane width in local units. Change it with Glass.resize.

Returns

number

style#

Get Signature#

get style(): Readonly<GlassStyle>;

The style as given, before defaults. Change it with Glass.set.

Returns

Readonly<GlassStyle>

Methods#

resize()#

resize(width: number, height: number): this;

Resizes the pane, in local units, and redraws its outline and shadow. Returns this.

Parameters#

Returns#

this

set()#

set(style: GlassStyle): this;

Merges style into the current style. Fields left out keep their value. Only a change of radius, smoothing, shadow or opacity redraws the outline (frost and tint too in the fallback fill). The rest goes to the filter on the next frame. Returns this.

Parameters#

Returns#

this