glCanvas()

function glCanvas<U>(params: {
  canvas: string | HTMLCanvasElement | OffscreenCanvas;
  webglAttributes?: WebGLContextAttributes;
  dpr?: number;
  postEffects?: (EffectPass<any> | CompositeEffectPass<any>)[];
  renderMode?: "auto" | "manual";
  colorSpace?: "srgb" | "display-p3";
  immediate?: boolean;
  vertex?: string;
  target?: RenderTarget | null;
  fragment: string;
  attributes?: Record<string, Attribute>;
  uniforms?: U;
  blending?: "none" | "normal" | "additive";
  depthTest?: boolean;
  drawMode?:
    | "POINTS"
    | "LINES"
    | "LINE_STRIP"
    | "LINE_LOOP"
    | "TRIANGLES"
    | "TRIANGLE_STRIP"
    | "TRIANGLE_FAN";
  transformFeedbackVaryings?: string[];
  resolutionScale?: number;
}): GLCanvas<U>;

The main high-level function to manage a WebGL canvas.

It combines context creation, a full-screen quad render pass, a post-processing compositor, and automatic rendering/resizing logic.

Type Parameters

U

U extends Uniforms

Parameters

params

canvas

string | HTMLCanvasElement | OffscreenCanvas

The canvas element to use or CSS selector to query it.

webglAttributes?

WebGLContextAttributes

Optional WebGL context attributes.

dpr?

number

Device Pixel Ratio for the canvas.

Default

window.devicePixelRatio;

postEffects?

( | EffectPass<any> | CompositeEffectPass<any>)[]

An array of post-processing effects to apply.

renderMode?

"auto" | "manual"

Whether to render automatically when needed (uniform updated, canvas resized, image texture loaded...) or manually.

Default

"auto";

colorSpace?

"srgb" | "display-p3"

Target color space for the drawing buffer.

immediate?

boolean

If true, the loop will start immediately.

If false, the loop will start when the play method is called.

Default

true;

vertex?

string

Optional vertex shader. If not provided, a default full-screen quad vertex shader is used.

target?

| RenderTarget | null

Optional initial render target for the pass. If not provided, it will render directly to the canvas or can be set later.

fragment

string

Fragment shader source code.

attributes?

Record<string, Attribute>

Mapping of attribute names to their data and configuration.

uniforms?

U

Initial uniform values. These will be wrapped in a reactive proxy to track changes.

blending?

"none" | "normal" | "additive"

Blending mode to use for this pass.

Default

"none";

depthTest?

boolean

Whether to enable depth testing.

Default

false;

drawMode?

| "POINTS" | "LINES" | "LINE_STRIP" | "LINE_LOOP" | "TRIANGLES" | "TRIANGLE_STRIP" | "TRIANGLE_FAN"

WebGL draw mode.

Default

"POINTS" if gl_PointSize is found in the vertex shader, otherwise "TRIANGLES".

transformFeedbackVaryings?

string[]

Array of varying names for Transform Feedback.

resolutionScale?

number

Scaling factor applied to the resolution when the pass is resized.

Default

1;

Returns

GLCanvas<U>