[p5.js 2.0 Bug Report]: WebGPU: can't call pixelDensity(1) after setAttributes

[nbogie]

Most appropriate sub-area of p5.js?

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

p5.js version

2.2.0-rc.6

Web browser and version

144.0.7559.60 (Official Build) (arm64)

Operating system

MacOS Sonoma 14.6.1

Steps to reproduce this

I've provided a sketch that tries to (in order)...:

1. createCanvas with webgpu renderer
2. call setAttributes
3. call pixelDensity(1)

Steps:

1. visit and run https://editor.p5js.org/neill0/sketches/iiIdcxoAz
2. see stack trace in console (included below)
3. see pixel density has NOT been set to 1 (in console report)
4. switch out the renderer to use WEBGL instead of WEBGPU
5. re-run the sketch
6. observe all works fine

stack trace

Cannot read properties of undefined (reading 'createTexture')
    at RendererWebGPU._updateSize
    at RendererWebGPU.resize
    at RendererWebGPU.resize
    at fn.resizeCanvas
    at p5.resizeCanvas
    at fn.pixelDensity
    at p5.pixelDensity
    at setup

Snippet:

This is just a copy of the live code at https://editor.p5js.org/neill0/sketches/iiIdcxoAz

async function setup() {
  
  // const renderer = WEBGL; // this works
  const renderer = WEBGPU ?? "webgpu";

  const canvas = await createCanvas(400, 400, renderer);
  
  setAttributes({ alpha: false, antialias: true });
  
  pixelDensity(1);

  console.log("pixel density: " + pixelDensity())
  console.log("VERSION: " + VERSION)
  console.log("renderer: " + renderer)
}

function draw() {
  background("orange");
  sphere(100);
}

alternative: trying to call setAttributes BEFORE createCanvas

Until v2.2.x it's been possible to call setAttributes before calling createCanvas, which might have worked as a workaround for the above.

However, that doesn't seem possible now - it errors with

this._renderer._setAttributes is not a function

both under WEBGPU and WEBGL. (Maybe it's by design).

[saurabh24thakur]

Hi! I’ve been looking into this WebGPU issue. It seems like setAttributes() is causing the WebGPU device context to become undefined before pixelDensity() triggers the _updateSize logic. I'd like to investigate if we need to re-verify the device state in the RendererWebGPU.resize loop or if setAttributes is missing a re-initialization step. Could you assign this to me?

[davepagurek]

Thanks @saurabh24thakur ! Let me know what you find!