Skip to content
/ pex-gl Public

Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, webgpu) for use in PEX.

License

Notifications You must be signed in to change notification settings

pex-gl/pex-gl

Repository files navigation

pex-gl

npm version stability-stable npm minzipped size dependencies types Conventional Commits styled with prettier linted with eslint license

Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, webgpu) for use in PEX.

Installation

npm install pex-gl

Usage

import createRenderingContext, { FALLBACKS } from "pex-gl";

// Creates a webgl context filling the window
const context = createRenderingContext();

// Creates a webgl context from an existing canvas and keeps its size
const context = createRenderingContext({ canvas });

// Creates a webgl context on a new canvas with given width and height
const context = createRenderingContext({ width, height });

// Creates a new canvas of type "webgpu"
const context = createRenderingContext({ type: "webgpu" });

// Creates a new canvas of type "webgl" or fallback to experimental-webgl in case it fails
const context = createRenderingContext({ type: "webgl" });

// Disable fallbacks for "webgl2"
FALLBACKS.webgl2 = [];
// Creates a new canvas of type "webgl2" and return null in case it fails
const context = createRenderingContext({ type: "webgl2" });

API

Modules

pex-gl

Typedefs

PexGLOptions : object

Options for context creation. All optional.

pex-gl

pex-gl.FALLBACKS

Context fallbacks map

Kind: static constant of pex-gl

pex-gl.default([opts]) ⇒ RenderingContext

Creates a rendering context.

Kind: static method of pex-gl

Param Type Default
[opts] PexGLOptions {}

PexGLOptions : object

Options for context creation. All optional.

Kind: global typedef Properties

Name Type Default Description
[width] number window.innerWidth Request an initial canvas width.
[height] number window.innerHeight Request an initial canvas height.
[pixelRatio] boolean 1 Multiply canvas dimensions with a given ratio.
[fullscreen] boolean !opts.width && !opts.height Make the canvas fullscreen.
[type] "2d" | "bitmaprenderer" | "webgl" | "webgl2" | "webgpu" "webgl" A "contextType" for getContext.
[element] HTMLElement document.body Element to append the canvas to.
[...contextAttributes] CanvasRenderingContext2DSettings | WebGLContextAttributes {} Attributes to be passed to getContext.

License

MIT. See license file.