q5 WebGPU renderer - q5js/q5.js GitHub Wiki

The WebGPU graphics API is the successor to WebGL.

As of February 2025, WebGPU is fully supported in Google Chrome and Edge. 🎉

In June 2025, Apple announced that Safari 26 will have default support for WebGPU.

Why use q5 WebGPU?

q5's WebGPU renderer can perform over 32x faster than p5.js.

When you intend for a q5 sketch to use WebGPU, but WebGPU is not supported on a viewer's browser, q5 will put a warning in the console, apply a compatibility layer, and display the sketch with the fallback Canvas2D renderer.

q5 WebGPU differences

• The origin of the canvas (0, 0) is in the center, not the top left.
• The default color mode is RGB in 0-1 "float" format: colorMode(RGB, 1).
• Unlike in p5's WebGL mode, mouse and touch coordinates align with canvas pixel values.
• Fonts must be loaded in MSDF format.

Module Usage

I recommend using q5 WebGPU in an ESM (JavaScript module), which enables top-level global mode.

Set the type of your sketch script to "module" in your html.

<script type="module" src="sketch.js">

In your sketch, await for createCanvas to load WebGPU and create a canvas. Set functions like draw on Q5 itself.

await createCanvas(200);
noStroke();

Q5.draw = function () {
  clear();
  rect(50, 50, 100, 100);
};

createCanvas should be called before any loading or rendering functions are used.

Loading WebGPU is async because GPU.requestAdapter and GPUAdapter.requestDevice are async functions. A GPUDevice is needed before anything can be drawn to a WebGPU canvas.

Classic Script Usage

To use q5's WebGPU renderer, run Q5.webgpu() after the creation of any file level variables.

let message = "Hello world!";

Q5.WebGPU();

function setup() {
  createCanvas(200, 100);
  text(message, 0, 0);
}

Note that with this method of using q5 WebGPU, you can only use q5 functions and variables inside q5 functions like setup and draw, similar to p5's limited global mode. You'll need to use the preload function if you want to preload assets.

Try it out with the OpenProcessing online code editor!

https://openprocessing.org/sketch/2534845

Text Rendering

The q5 WebGPU text renderer uses multi-channel signed distance fields (MSDF) for high performance and high quality text rendering. Text can be rapidly recolored, rotated, and scaled without any loss in quality or performance.

MSDF, introduced by Chlumsky Viktor in his master's thesis "Shape Decomposition for Multi-channel Distance Fields" (2015), improves upon the signed distance field (SDF) technique, popularized by Chris Green and Valve Software in "Improved Alpha-Tested Magnification for Vector Textures and Special Effects" (2007).

SDF	MSDF

For convenience, if no font is loaded before text is run, then q5's default "sans-serif" MSDF font is loaded: https://q5js.org/fonts/sans-serif-msdf.json

This 512x512 msdf texture (207kb) was made with the Microsoft YaHei font and stores every character visible on a standard English keyboard, letters with diacritics (accents) used in European languages, and mathematical symbols.

!"#$%&'()\*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^\_`abcdefghijklmnopqrstuvwxyz{|}~€¡¢£¥©®°²³´·¹º¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ‘’“”ΑαΒβΓγΔδΕεΛλΠπΣσΩω∴∵─│┌┐└┘├┤┬┴┼▀▄█▌▐▓▒░←↑→↓↔↕↖↗↘↙«»µτΦΘ∞≡±≈∙√ⁿ

Do you think any other characters ought to be included in the default set? Let us know! https://github.com/q5js/q5.js/issues

Create a MSDF Font

You can choose a custom set of characters and convert fonts to MSDF format by using the msdf-bmfont-xml website, created by Don McCurdy.

Optionally, you can use q5's msdf-minifier node.js script to reduce the size of the MSDF json file.

Load a MSDF font

Fonts must be in MSDF format with the file ending "-msdf.json".

Q5.WebGPU();

function preload() {
  loadFont('arial-msdf.json');
}

function setup() {
  createCanvas(200, 200);
}

function draw() {
  fill(0.71, 0.92, 1);
  text('Hello, World!', mouseX, mouseY);
}

Credits

Pixel font is mac's minecraft

Displaying Emojis

Full color emoji characters can't be rendered using the MSDF technique, so draw them using textImage.

Advanced Usage

See the wiki page on "Custom Shaders in q5 WebGPU"