Skip to content

WebGPU-to-WebGL fallback #9175

Description

@davepagurek

Increasing access

WebGPU is still a relatively new technology: for example, most major browsers do not implement WebGPU for Linux yet. At the same time, many people do have the ability to run WebGPU code. To make it easier for p5 users to test out WebGPU without worrying about limiting who can see it, it would be good to fall back to the next closest technology, WebGL, if possible.

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)

Feature enhancement details

In some past projects I manually did a WebGL fallback with:

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)
}

Internalizing this into p5 is a good start, but we should also note that if your sketch does anything that can't do a fallback -- basically just buildComputeShader or createStorage or createStorageList for now -- we want to flag that immediately and fail early if you aren't in WebGPU mode. I'm not sure where we stand yet on these and how clear the errors are; part of this task is making those errors better if they're currently cryptic or nonexistent.

Another part of this task is exposing, somehow, what renderer we're in. We have webglVersion to tell apart webgl 2 vs 1, and this returns p2d if you're in 2d mode, but it also currently returns that if you're in webgpu mode. We maybe want to expose a rendererType variable or something that you can use to check if rendererType === WEBGPU?

After this initial task, a follow-up would be to see if we can support running compute shaders on the CPU as a fallback. I can imagine if you have a compute shader, also checking if you're in webgl mode, and using a different number of particles if so. That project is much bigger in scope so let's only tackle it after we have this done to start with. But that will be the goal!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions