[p5.js 2.0+ Bug Report]: WebGPU text() doesn't work in Firefox

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• WebGPU
• p5.strands
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

dev-2.0

Web browser and version

Firefox 148

Operating system

MacOS 15.2

Steps to reproduce this

Steps:

1. Load a font in WEBGPU mode
2. Draw text with the font

In Chrome, this works, but in Firefox, I get this error:

TypeError: GPUQueue.copyExternalImageToTexture: 'source' member of GPUCopyExternalImageSourceInfo could not be converted to any of: ImageBitmap, HTMLImageElement, HTMLCanvasElement, OffscreenCanvas.
    at uploadTextureFromSource (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.webgpu.js:7110:20)
    at init (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:66860:24)
    at Texture (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:66738:12)
    at getTexture (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:54764:19)
    at updateUniformValue (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.webgpu.js:7081:51)
    at setUniform (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:61212:22)
    at text/Renderer3D.prototype._renderText (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:122569:16)
    at textCore/Renderer.prototype.text/< (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:51930:34)
    at textCore/Renderer.prototype.text (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:51930:13)
    at textCore/</fn[func] (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:51879:36)
    at validateParams/</< (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:91428:29)
    at draw (/sketch.js:13:7)
    at structure/fn.redraw (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:3574:27)

Snippet:

let font
async function setup() {
  font = await loadFont('https://fonts.gstatic.com/s/ebgaramond/v32/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QI96WamXgXFI.ttf')
  await createCanvas(400, 400, WEBGPU);
}

function draw() {
  background(0)
  textFont(font)
  textSize(100)
  textAlign(CENTER, CENTER)
  fill(255)
  text('WebGPU', 0, 0)
}

Live: https://editor.p5js.org/davepagurek/sketches/eJbmJQUZy

[kavyakapoor420]

HI @davepagurek can i work on this issue . ?

[davepagurek]

Feel free to look into it @kavyakapoor420! This is one of those ones where we maybe want to share some findings + possible paths forward here before continuing. e.g. if this is a thing Firefox will implement soon, then we can possibly just leave it, or if there's a low effort way to get it to work in both contexts without breaking WebGL mode, then we can see if that's worth doing.