4.34.0
This release enables GPU Canvas content to work in React runtimes as an opt-in feature, specifically for the @rive-app/react-webgl2 runtime. It follows the JS runtime's 2.42.0 release, which introduces the foundation for a deferred rendering pattern for both Canvas2d and WebGL2. This will continue to be built upon in future releases to improve performance in the long run.
New
With GPU Canvas, you can opt-in at the useRiveFile level if constructing the file yourself, or at the useRive/<Rive /> level, both are valid, with some caveats to keep in mind.
useRiveFile
enableGPUCanvas: boolean— When passing parameters touseRiveFile, you can opt in to GPU Canvas with this flag set totrue. After passing the resultingRiveFileto theriveFileparameter onuseRive, it will draw GPU Canvas content.
useRive / <Rive />
enableGPUCanvas: boolean— When creating a Rive instance through theuseRivehook or the<Rive />component, opt in to render GPU Canvas content with this flag set totrue. Note that if you pass inriveFile(as opposed to src or buffer), the Rive instance will respect the rendering mode theriveFilewas set up with as source of truth.
useOffscreenRenderer default
The React runtime currently defaults useOffscreenRenderer to true, so that instancing multiple Rive graphics on a page would lessen the chance of running into WebGL context limits that browsers impose. Opting in to enableGPUCanvas now changes that React-side default to false.
If you set useOffscreenRenderer to any value, the runtime will respect that and will not draw GPU Canvas content if set to true, even if you opt in with enableGPUCanvas. We recommend either leaving useOffscreenRenderer unset or to false when you want to draw GPU canvas content.
More docs to come and will be linked here soon!