[p5.js 2.0 Bug Report]: [WEBGPU] Vertex buffers not getting reused, causing memory buildup and an eventual crash

[davepagurek]

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-rc2

Web browser and version

Chrome 143

Operating system

MacOS 15.2

Steps to reproduce this

Steps:

1. Draw a p5.Geometry, e.g. with textToModel
2. Draw it every frame
3. Eventually, the sketch crashes when it fails to allocate memory for a buffer

It's allocating a new

Snippet:

Not a minimal example, but this sketch exhibits this behaviour: https://editor.p5js.org/davepagurek/sketches/NAms_4pKI

let geom
let font
let warp
let fbo

async function setup() {
	try {
		await createCanvas(windowWidth, windowHeight, WEBGPU)
	} catch (e) {
		console.log('Your browser doesn\'t yet support WebGPU! Falling back to WebGL.')
		createCanvas(windowWidth, windowHeight, WEBGL)
	}
	// Dela Gothic One
	font = await loadFont('https://fonts.gstatic.com/s/delagothicone/v19/hESp6XxvMDRA-2eD0lXpDa6QkBAGRUsJQAlbUA.ttf')
	textAlign(CENTER, CENTER)
	textSize(100)
	geom = font.textToModel('WEBGPU', 0, 0, {
		sampleFactor: 0.4
	})

	warp = baseStrokeShader().modify(() => {
		const iters = uniformFloat()
		const amplitude = uniformFloat()
		const t = uniformFloat(() => millis() * 0.001)
		getObjectInputs((inputs) => {
			let pos = inputs.position
			for (let i = 0; i < iters; i++) {
				pos += amplitude * [
					noise(1000 + pos.x*0.01, 1000 + pos.y*0.01, i * PI) - 0.25,
					noise(1000 + pos.y*0.01, 1000 + pos.x*0.01, i * PI) - 0.25,
					0
				]
			}
			pos.y += iters * 2 * sin(pos.x * 0.03 + t + 0.005 * pos.y)
			inputs.position = pos
			return inputs
		})
	})
}

function draw() {
	background('#33186D')

	push()
	noStroke()
	fill(255)
	model(geom)
	pop()

	push()
	noFill()
	strokeWeight(2)
	strokeShader(warp)
	for (let i = 0; i < 10; i++) {
		push()
		stroke(lerpColor(color(255), color('#41C187'), pow(i/9, 0.5)))
		scale(1 + i * 0.3)
		warp.setUniform('iters', i)
		warp.setUniform('amplitude', i * 3)
		model(geom, 10)
		pop()
	}
	pop()
}