Frame Rate limiter on WebGPU

Help & Support Gaussian Splatting
1

Hello,

I am trying to implement a simple framerate limiter using WebGPU and the playcanvas/react library. I had to make a small tweak to playcanvas/react to enable WebGPU by adding

deviceTypes: [DEVICETYPE_WEBGPU])

to createGraphicsDevice in the Application component.

I have autoRender set to false on the Application component and I am using GSAP.ticker to set app.renderNextFrame at 60fps.

This setup works perfectly with WebGL2, but when using the WebGPU the screen flashes like it’s rendering empty frames in between the throttled frames. I have also tried an approach using setInterval but have the same results.

Is there way to throttle the frame rate when using WebGPU, or do I need to render the final pass to a texture in order to prevent these empty frames?

My scene makes heavy use of gaussian splatting, but I’m not sure if that is relevant to the issue.

2

@Mark_Lundin - any idea?
We use autoRender in model_viewer and that works, so perhaps this is react related?

3

Hmm sounds like it could be a react thing @scottdarby. Could you do a simple test case on stack blitz? Just give a comment on the react code that you needed to change

4

Hello, I’m trying to get a PlayCanvas React component to render with WebGPU, but I haven’t had any luck so far.

export const defaultGraphicsDeviceOptions = {
    alpha: true,
    depth: true,
    stencil: true,
    antialias: false,
    premultipliedAlpha: true,
    preserveDrawingBuffer: false,
    powerPreference: 'high-performance',
    failIfMajorPerformanceCaveat: false,
    desynchronized: false,
    xrCompatible: false,
    deviceTypes: 'webgpu'
};

I understand pc.createGraphicsDevice is used to specify the device type, but I’m unsure how to implement it. Could you please explain your approach?

5

I think this page might be relevant:

it mentions graphicsDeviceOptions

those can have deviceTypes: ['webgpu'] probably?

Not sure, not a react guy. @Mark_Lundin can clarify next week

6

To get WebGPU working with playcanvas/react I had to make a small edit to Application.tsx in the playcanvas/react library:

...
createGraphicsDevice(canvas, {
          deviceTypes: [DEVICETYPE_WEBGPU], // webgl2 will be added as a fallback automatically
          glslangUrl: glslangUrl,
          twgslUrl: twgslUrl,
        })

and then back in your project in the <Application /> component you need to add:

<Application
        ...application component props
        twgslUrl={`/static/lib/twgsl/twgsl.js`} // publicly accessible location of twgsl.js
        glslangUrl={`/static/lib/glslang/glslang.js`} // publicly accessible location of glslang.js
      >

and ensure you have a copy of twgsl.js and glslang.js in a public directory.

1 Like
7

For engine v2.8 you no longer need twgsl and gslang anymore, unless you need your custom GLSL shaders to be compiled. All internal shaders are in WGSL now and those transpilation tools are not needed.

8

heads up; we have a PR for WebGPU with @playcanvas/react.

There are some internal scripts that still use glsl so it may still be neccessary to use the glslang lib. I’ve created an issue to migrate these out

1 Like
9

@scottdarby Ironed out a few issues with this. You can test with npm i https://pkg.pr.new/@playcanvas/react@176

2 Likes
10

Hey @Mark_Lundin since your latest @playcanvas/react update with WebGPU support, autoRender and renderNextFrame are working perfectly for me, thanks!