GLCanvas<U>

type GLCanvas<U> = {
  gl: WebGL2RenderingContext;
  render: () => void;
  onCanvasReady: (callback: () => void) => void;
  canvas: HTMLCanvasElement | OffscreenCanvas;
  setSize: (size: { width: number; height: number }) => void;
  play: () => void;
  pause: () => void;
  dpr: number;
  uniforms: U & Record<string, unknown>;
  onUpdated: (callback: UpdatedCallback<U>) => void;
  onBeforeRender: (callback: () => void) => void;
  onAfterRender: (callback: () => void) => void;
  resizeObserver: ReturnType<typeof onResize> | null;
};

The object returned by the glCanvas function.

Type Parameters

U

U extends Uniforms = Record<string, any>

Properties

Property	Type	Description
gl	WebGL2RenderingContext	The WebGL2 rendering context.
render	() => void	Executes a single render of the entire pipeline.
onCanvasReady	(callback: () => void) => void	Register a callback to execute after the first resizing of the canvas.
canvas	HTMLCanvasElement | OffscreenCanvas	The HTMLCanvasElement or OffscreenCanvas being used.
setSize	(size: { width: number; height: number; }) => void	Resizes the canvas and all render targets in the postprocessing chain.
play	() => void	Resumes the internal animation loop (if a 'time' uniform is detected).
pause	() => void	Pauses the internal animation loop.
dpr	number	The Device Pixel Ratio being used.
uniforms	U & Record<string, unknown>	Reactive proxy of the main render pass's uniforms.
onUpdated	(callback: UpdatedCallback<U>) => void	Registers a callback called whenever a uniform of the main render pass is updated.
onBeforeRender	(callback: () => void) => void	Registers a callback called just before the main render pass is rendered.
onAfterRender	(callback: () => void) => void	Registers a callback called after the last post-processing effect is rendered.
resizeObserver	| ReturnType<typeof onResize> | null	The resize observer managing the canvas resizing.