[SOLVED] How can I use WebGPU in PlayCanvas?

Help & Support
,
1

hey,
i want use web GPU in playcanvas how can i add and use?
Does polycanvas have a document in this field?

1 Like
2

Hi @MaD-BoY and welcome,

WebGPU support for PlayCanvas is in development, several engine examples are already using it. Check this post on how to enable it if you are using an engine only project:

For the editor, support is still pending, stay tuned.

1 Like
3

Will it be released this year?

4

Yes, at least for testing.

1 Like
5

I am using engine standalone ts project.
image

I want to disable using webgl2 and want the project to use WebGPU only
i have already tried multiple wordaround nothing worked with addition to your api docs. Details are here in the README.md and the project itself where i am trying achieve this:
Github repo

PLEASE HELP!!!

6

You need to pass the created graphics device to the app during initialization:

// your gfx options are ok, then
const device = await createGraphicsDevice(canvas, gfxOptions);

// you need to create app options and assign created gfx device
const createOptions = new AppOptions();
createOptions.graphicsDevice = device;

// you'd also need to tell which component systems and handlers
// you gonna use, check API for a full list
createOptions.componentSystems = [RenderComponentSystem, ...];
createOptions.resourceHandlers = [TextureHandler, ...];

// you then create the app
const app = new AppBase(canvas);
app.init(createOptions);

You can also see engine-only examples, that show it:
https://playcanvas.vercel.app/#/misc/hello-world

7

is there any difference between
const app = new pc.Application(canvas, {
graphicsDeviceOptions: {
deviceTypes: [‘webgpu’] // or deviceTypes: [pc.DEVICETYPE_WEBGPU]
}
});

and
new AppBase(canvas)

because i am trying with pc.Application and it does not work

8

The Applicationis WebGL only.
You need to use AppBase as shown above if you want WebGPU.

9

Actually, to be precise, Application supports it as well, but you need to create a WebGPU device yourself, and pass it in as options.graphicsDevice.

You can use this to create a device: createGraphicsDevice | Engine API Reference - v2.10.3

and pass it to the Application, see parameters here:

1 Like
10

Thank you @LeXXik & @mvaligursky

its working now. Thanks alot for your kind & quick responses.
Means alot.

Here is the working snippet on my machine:

import * as pc from "playcanvas";

// create an application

const canvas = document.getElementById("application") as HTMLCanvasElement;

const gfxOptions = {

deviceTypes: [pc.DEVICETYPE_WEBGPU, pc.DEVICETYPE_WEBGL2],

antialias: false,

};

const device = await pc.createGraphicsDevice(canvas, gfxOptions);

console.log("Graphics Device:", device);

console.log("Creating PlayCanvas application...");

const app = new pc.Application(canvas, {

graphicsDevice: device,

});

app.setCanvasResolution(pc.RESOLUTION_AUTO);

app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);

app.start();

//----Environment code here (Camera and lights)----

// log the graphics device type and WebGPU support

console.log("Graphics Device Type:", app.graphicsDevice.deviceType);
// output in console => 'Graphics Device Type: webgpu'
if ("gpu" in navigator) {

console.log("WebGPU is supported in this browser.");

} else {

console.log("WebGPU is NOT supported in this browser.");

}

you can mark this as [SOLVED]

2 Likes