glCanvas()

function glCanvas<U>(params: {
  webglAttributes?: {
    alpha?: boolean;
    antialias?: boolean;
    depth?: boolean;
    desynchronized?: boolean;
    failIfMajorPerformanceCaveat?: boolean;
    powerPreference?: "default" | "high-performance" | "low-power";
    premultipliedAlpha?: boolean;
    preserveDrawingBuffer?: boolean;
    stencil?: boolean;
  };
  dpr?: number;
  renderMode?: "auto" | "manual";
  canvas: string | HTMLCanvasElement | OffscreenCanvas;
  colorSpace?: "srgb" | "display-p3";
  immediate?: boolean;
  postEffects?: (EffectPass<any> | CompositeEffectPass<any>)[];
  vertex?: string;
  gl?: WebGL2RenderingContext;
  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

webglAttributes?

{ alpha?: boolean; antialias?: boolean; depth?: boolean; desynchronized?: boolean; failIfMajorPerformanceCaveat?: boolean; powerPreference?: "default" | "high-performance" | "low-power"; premultipliedAlpha?: boolean; preserveDrawingBuffer?: boolean; stencil?: boolean; }

Native WebGL2 context attributes.

webglAttributes.alpha?

boolean

webglAttributes.antialias?

boolean

webglAttributes.depth?

boolean

webglAttributes.desynchronized?

boolean

webglAttributes.failIfMajorPerformanceCaveat?

boolean

webglAttributes.powerPreference?

"default" | "high-performance" | "low-power"

webglAttributes.premultipliedAlpha?

boolean

webglAttributes.preserveDrawingBuffer?

boolean

webglAttributes.stencil?

boolean

dpr?

number

Device Pixel Ratio for the canvas.

Default

Math.min(globalThis.devicePixelRatio || 1, 2);

renderMode?

"auto" | "manual"

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

Default

"auto";

canvas

string | HTMLCanvasElement | OffscreenCanvas

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

colorSpace?

"srgb" | "display-p3"

The color space to use 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;

postEffects?

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

Post-processing effects applied after the main pass.

vertex?

string

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

gl?

WebGL2RenderingContext

Optional WebGL2 context used to initialize the pass immediately.

Passes without a context are initialized by calling pass.initialize(gl) or using the compositor. Calling initialize() multiple times with the same context is a no-op.

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>