[p5.js 2.0+ Bug Report]: Framebuffer texture sizes getting clamped by main canvas density

[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

2.3.0

Web browser and version

All

Operating system

All

Steps to reproduce this

Steps:

1. Create a high density canvas
2. Create a framebuffer at 1x density
3. The framebuffer may still get its size truncated as if it were the same density as the main canvas

This is because we are using the renderer's density when adjusting the size, even for framebuffers:

p5.js/src/webgl/p5.RendererGL.js

Lines 444 to 461 in b96a732

	_adjustDimensions(width, height) {
	if (!this._maxTextureSize) {
	this._maxTextureSize = this._getMaxTextureSize();
	}
	let maxTextureSize = this._maxTextureSize;
	let maxAllowedPixelDimensions = Math.floor(
	maxTextureSize / this._pixelDensity
	);
	let adjustedWidth = Math.min(width, maxAllowedPixelDimensions);
	let adjustedHeight = Math.min(height, maxAllowedPixelDimensions);
	if (adjustedWidth !== width || adjustedHeight !== height) {
	console.warn(
	"Warning: The requested width/height exceeds hardware limits. " +
	`Adjusting dimensions to width: ${adjustedWidth}, height: ${adjustedHeight}.`
	);
	}

We need to update this to take in the target object's density.

This is probably an issue in the WebGPU renderer too.

Snippet:

function setup() {
  let renderer = createCanvas(100, 100, WEBGL);
  renderer._maxTextureSize = 100 // For testing

  pixelDensity(4)
  console.log(width, height) // Expected: 25, 25

  let fbo = createFramebuffer({ width: 100, height: 100, density: 1 })
  console.log(fbo.width, fbo.height) // Expected: 100, 100
  // Actually logs 25, 25
}

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

[NalinDalal]

The root cause is that _adjustDimensions() in p5.RendererGL.js always divides by this._pixelDensity (the main renderer's density), but framebuffers have their own independent density. So a framebuffer at density: 1 on a 4x canvas gets its max texture size clamped 4x too aggressively.

Fix: _adjustDimensions(width, height, density = this._pixelDensity) — added an optional density parameter defaulting to the renderer's density for backward compatibility. Framebuffer call sites pass this.density.

PR